Penerapan PWA pada Nextjs

Berbicara tentang PWA, apa itu? Kenapa PWA diperlukan? tapi sebelum itu saya akan menjelaskan sedikit.
So, pernah kah kita mengunjungi situs web dengan mobile? Kalau jaringan internet yang kita miliki tidak ada kendala, mungkin ketika mengunjungi situs web tersebut tidak ada masalah. Bagaimana jika sebaliknya? beberapa masalah akan muncul, seperti loading yang lama atau menampilkan layar putih saja? Mungkin akan tampil tulisan ‘No Internet Connection’.
Karena hal itu, jalan pintasnya adalah dengan install aplikasi mobile-nya. But, apakah situs web tersebut ada aplikasinya? bagaimana dengan storage yang kita miliki di mobile? Apakah cukup? ditambah lagi jika kita ingin install aplikasinya harus mengunjungi playstore or appstore.
Apa itu PWA? Progessive Web App. Itu kepanjangannya haha
Progressive Web App atau Aplikasi Web Progessif inilah yang akan mengatasi masalah tersebut.
PWA is a must!
Why? Offline Support, Instantaneous Page Loads, Automatic Caching and Superior Engagement.
Ketika koneksi jaringan mati, tetap akan menampilkan halaman. Karena PWA memanfaatkan teknologi web modern untuk memberikan dukungan offline. Bagaimana bisa? Karena PWA menyimpan file-file assets yang dibutuhkan untuk halaman web tersebut di dalam cache. PWA juga dapat dipasang pada Home Screen layar mobile.
Easy to Enable
Dengan Nextjs, mengubah web menjadi PWA sangat mudah. Kita cukup menambahkan package next-offline dan membuat file manifest-nya.
Dibagian sini saya anggap kalian sudah membuat project nextjs, bisa cek dokumentasinya disini.
Dan jangan lupa baca tentang service worker yaa, bisa cek disini.
Baiklah kita akan melakukan penerapan PWA pada nextjs.
Pertama, buat 1 halaman dengen css, gambar dan asset lainnya. Kenapa perlu asset-asset lainya? Agar penerapannya terlihat lebih jelas. 😬
Lakukan perintah ini pada folder project yang akan diterapkan.
npm install — save next-offline @zeit/next-css next-images
Pada file server.js, buatlah seperti ini.

Sedikit tambahan untuk pengaturan file package.json, buat seperti ini.

Pada file next.config.js, buatlah seperti ini.

Buatlah file untuk manifest yang akan digunakan pada PWA nantinya. Untuk contoh seperti ini.

Anda bisa membuat file manifest tersebut disini. Silahkan cek.
Pada file index.js, buatlah seperti ini.

Dan yang terakhir adalah, kita akan cek struktur folder dan file-filenya. Sudah sesuai seperti ini belum? jika belum, mari kita sesuaikan. 😬

Setelah kita selesai membuat 1 halaman yang akan kita jadikan bahan untuk penerapannya. Lalu kita akan test apakah berhasil?
Wah ternyata ketika kita eksekusi dengan npm run dev, halaman tersebut berjalan yuhuuu. Tapi, ketika di offline kan pada koneksi internet mati, muncul halaman internet no connection, masih gagal :(

Lalu coba kita jalankan dulu npm run build. Setelah prosesnya selesai, jalankan npm start.
Mari kit tes lagi 😬. Tes dengan koneksi hidup, lalu tes dengan koneksi mati. Maka tampilan yang dihasilkan akan tetap seperti ini. 😬

Kenapa bisa tampilan yang dihasilkan tetap seperti itu? karena, pada penerapannya kita telah menyimpan file file assetsnya. Sebagai bukti kita bisa lihat di Cache Storage-nya.

Yuhuuu, coba kita lihat hasil nya dari lighthouse chrome

Wah kereeen! 😬
Repo lengkapnya ada disini 😬 😬 😬
Sekian dari saya, maaf jika penulisan saya disini masih berantakan 😬 😬 😬
