Progressive Web App (PWA)

Dokumentasi integrasi PWA pada Skalfa App. Fitur ini mengubah web app Anda menjadi aplikasi web progresif yang dapat diinstal, responsif, dan dapat berjalan secara offline.

Keterangan Ekstensi:Ekstensi ini bersifat opsional. Anda dapat menambahkannya ke proyek frontend Anda dengan menjalankan perintah berikut di terminal:
Kode berhasil di copy!
5

Deskripsi

Ekstensi PWA Skalfa mengintegrasikan library @ducanh2912/next-pwa ke dalam struktur Next.js Anda. Ini memungkinkan browser mengunduh Service Worker untuk melakukan caching aset secara otomatis, memungkinkan akses luring (offline), dan menampilkan prompt instalasi di ponsel (Android/iOS) atau desktop.

1. Pembuatan Manifest File (app/manifest.ts)

Membuat file metadata manifest standar Next.js yang mendefinisikan identitas aplikasi (nama, warna tema, start URL, dan ikon). Anda dapat menyesuaikannya seperti ini:

Kode berhasil di copy!
5

2. Modifikasi Konfigurasi (next.config.ts)

Membungkus objek konfigurasi Next.js Anda dengan withPWA yang otomatis mendeteksi lingkungan kerja dan menonaktifkan Service Worker di mode pengembangan (development) agar tidak mengganggu proses debugging:

Kode berhasil di copy!
5

3. Verifikasi PWA

Untuk memverifikasi bahwa PWA Anda berfungsi dengan baik:

  • Build proyek Anda dengan menjalankan bun run build (atau npm run build).
  • Jalankan server produksi lokal dengan bun run start.
  • Buka browser, lalu periksa tab Application → Service Workers / Manifest di Chrome DevTools.
  • Anda juga akan melihat ikon instalasi (berupa tanda tambah/unduh) di sebelah kanan bar alamat browser.