PWA (Progressive Web Apps) adalah teknologi web yang berfokus pada kecepatan sehingga pengalaman menggunakan website akan terasa seperti menggunakan aplikasi native. Ada sangat banyak fitur PWA yang dapat digunakan, tapi hari ini kita akan berfokus ke fitur utama PWA yang paling powerful : Offline Support.
Website pada umumnya hanya dapat diakses apabila ada koneksi internet. Jika internet kita terputus dan mengakses sebuah website normal, biasanya yang akan muncul adalah error browser "No Internet". Kalau di browser chrome sih lucu bisa sambil main dinosaurus-dinosaurusan, tapi kalau di browser lain sih ya cuma error browser begitu saja. Hal tersebut tidak terjadi jika kita menggunakan PWA, kita bisa membuat halaman utama website kita tetap dapat diakses dengan fungsi terbatas sekalipun tidak ada koneksi internet.
Website yang sudah menerapkan PWA Offline Support sudah sangat banyak, contohnya yang paling sering kita temukan adalah seperti https://tokopedia.com , https://blibli.com. Jika kita sudah pernah mengunjunginya sekali, maka tanpa koneksi internet pun, halaman ini tetap dapat dibuka sekalipun hanya untuk menampilkan pesan error custom. Contohnya seperti berikut ini :
Secara garis besar, yang harus kita lakukan untuk membuat fitur offline support menggunakan PWA adalah berikut ini :
- Membuat service worker untuk background process yang akan menghandle request injection
- Melakukan cache halaman dan asset utama sehingga dapat ditampilkan dalam kondisi offline
- Mendaftarkan service worker di halaman utama website untuk digunakan
Silakan download contoh script PWA Offline untuk latihan berikut ini https://www.mediafire.com/file/gxzs75tc4vuadqu/file .
Sebagai catatan, PWA tidak dapat berjalan di protokol HTTP. Jadi mohon jalankan project yang sudah didownload tadi di protokol HTTPS. Selain itu, karena scope website diset ke root directory, mohon agar tidak menyimpannya di sub directory. script diatas dapat berjalan di root domain, virtual domain, maupun sub domain. Anda dapat menggunakan laragon dengan fitur auto-virtual-host sebagai local development server agar tidak kesulitan di langkah awal yang penting ini.
File index.html adalah file utama yang akan diakses. Isinya hanya konten HTML normal dengan styling CSS dan jQuery. Perhatikan di index.html baris 89 ada file "assets/js/service-worker-controller.js" yang diinclude. File tersebut berisi logic untuk mendaftarkan service worker yang akan kita buat.
Di file "assets/js/service-worker-controller.js" baris 13 kita dapat melihat bahwa file service worker yang akan diinstall bernama "/service-worker.js". Artinya, ketika halaman index.html dijalankan, halaman tersebut akan menginstall service worker "/service-worker.js" yang ada di root directory. Instalasi harusnya akan berhasil jika kita menjalankan project ini di protokol HTTPS dan di root domain (contoh : https://pwa.test, https://pwa.domain.com, ...)
Jika kita membuka file "service-worker.js", ada 2 bagian penting yang harus kita perhatikan :
- baris 2-18 : define array "files" yang berisi path-path halaman, script, maupun asset yang perlu dicache. Nantinya seluruh file yang didefine untuk dicache ini akan dapat diakses secara offline. List dokumen nantinya dapat ditambahkan atau dikurangi sesuai kebutuhan.
- baris 1 : define variabel "cacheVersion". Tujuannya adalah untuk melabel versi cache pada seluruh "files" yang disimpan secara offline. Versioning sangat penting, karena jika kita melakukan perubahan pada file yang sudah pernah dicache, perubahan tersebut TIDAK AKAN PERNAH muncul. Kenapa perubahannya tidak akan pernah muncul? Karena ketika kita mengakses file yang sudah berubah tersebut, service worker akan melakukan pengecekan dulu apakah path tersebut ada di cache atau tidak. Jika ada, maka file yang dicache lah yang akan diload.
//service-worker.js
const cacheVersion = 'v0.0.1';
const files = [
// halaman utama
'/',
// asset css & js utama
'assets/css/bootstrap.min.css',
'assets/css/style.css',
'assets/js/jquery-3.5.1.min.js',
'assets/js/bootstrap.bundle.min.js',
'assets/js/script.js',
'assets/js/service-worker-controller.js',
// asset gambar & icon
'assets/images/logo.png',
'assets/images/logo-large.png',
'assets/images/hero-banner-example.jpg',
];Dengan demikian, setiap kali kita melakukan perubahan pada file-file yang sudah dicache, maka versioning di baris 1 ini harus selalu diperbarui agar perubahan dapat diupdate di website tersebut.
Bagaimana dengan offline detectionnya? Di javascript kita dapat memeriksa status online/offline browser dengan berbagai cara :
- cek di window.navigator.onLine . Akan bernilai true jika online, dan false jika offline.
- listen ke event "online" dan "offline" di window. ( window.addEventListener('online', function(){...}) dan window.addEventListener('offline', function(){...}) )
Penerapan online/offline detection dapat kita lihat di "assets/js/script.js" baris 8-23. Dengan demikian, kita dapat mengendalikan hal-hal apa saja yang dilakukan jika load pertama kali dalam keadaan offline (baris 9-14), dan bagaimana jika website tiba-tiba berubah jadi offline/online saat kita sudah membuka website (baris 16-23).
//assets/js/script.js
...
// online & offline detection
if(window.navigator.onLine){
$("#offline-notification").addClass('online');
}
else{
$("#offline-notification").removeClass('online');
}
$(window).on('online', function(){
$("#offline-notification").addClass('online');
loadBlog(); //in case saat offline, blog blm diload dan koneksi internet sudah kembali
});
$(window).on('offline', function(){
$("#offline-notification").removeClass('online');
});
...
Jika project tersebut dijalankan, kita dapat melihat hal-hal berikut ini :
Saat website dibuka pertama kali akan memunculkan log "Service Worker berhasil didaftarkan"
Jika kita close window/tab tersebut, lalu mematikan koneksi internet dan membuka ulang, maka website tersebut tetap dapat dibuka secara terbatas (muncul notifikasi bahwa internet terputus).
Jika kita melakukan perubahan pada asset lalu kita mengubah cacheVersion di service-worker.js, maka akan muncul notifikasi "New Updates Available". Jika kita klik tombol refresh, maka asset-asset yang diload selanjutnya adalah asset yang terupdate.
Demikian tutorial sederhana PWA Offline Support, semoga bermanfaat. Apabila ada kesulitan atau bagian yang masih sulit dipahami dapat didiskusikan lebih lanjut di kolom komentar dibawah ini.
Link download tutorial : https://www.mediafire.com/file/gxzs75tc4vuadqu/file
