1. Selamat Datang
Di lab ini, Anda akan menggunakan aplikasi web yang sudah ada dan membuatnya berfungsi secara offline. Ini adalah codelab pertama dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Ada tujuh codelab lainnya dalam seri ini.
Yang akan Anda pelajari
- Menulis Pekerja Layanan secara manual
- Menambahkan Pekerja Layanan ke aplikasi web yang sudah ada
- Menggunakan Pekerja Layanan dan Cache Storage API untuk menyediakan resource secara offline
Yang perlu Anda ketahui
- HTML biasa dan JavaScript
Yang akan Anda butuhkan
- Browser yang mendukung Pekerja Layanan
2. Memulai Persiapan
Mulailah dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:
Jika Anda meng-clone repo, pastikan Anda berada di cabang starter. File zip juga berisi kode untuk cabang tersebut.
Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan untuk codelab.
File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang ada dan akan Anda gunakan selama codelab ini:
File Utama
js/main.js- File JavaScript aplikasi utamaservice-worker.js- File service worker aplikasi
3. Menguji Offline
Sebelum melakukan perubahan apa pun, mari kita uji untuk menunjukkan bahwa aplikasi web saat ini tidak berfungsi secara offline. Untuk melakukannya, bawa komputer kita ke mode offline dan muat ulang aplikasi web, atau, jika Anda menggunakan Chrome:
- Buka Chrome Dev Tools
- Beralih ke tab Aplikasi
- Beralih ke bagian Pekerja Layanan
- Centang kotak Offline
- Muat ulang halaman tanpa menutup Chrome Dev Tools
Setelah situs diuji dan gagal dimuat secara offline, saatnya menambahkan beberapa fungsi online. Hapus centang kotak offline dan lanjutkan ke langkah berikutnya.
4. Mengaktifkan Mode Offline
Saatnya menambahkan service worker dasar! Hal ini akan dilakukan dalam dua langkah: mendaftarkan service worker dan menyimpan resource dalam cache.
Mendaftarkan Pekerja Layanan
Sudah ada file service worker kosong, jadi untuk memastikan perubahan muncul, mari daftarkan di aplikasi kita. Untuk melakukannya, tambahkan kode berikut ke bagian atas js/main.js:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Penjelasan
Kode ini mendaftarkan file service worker service-worker.js kosong setelah halaman dimuat, dan hanya jika situs mendukung service worker.
Menyimpan resource dalam cache
Agar aplikasi web dapat berfungsi secara offline, browser harus dapat merespons permintaan jaringan dan memilih tempat untuk merutekannya. Untuk melakukannya, tambahkan kode berikut ke service-worker.js
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Sekarang, kembali ke browser, tutup tab pratinjau, lalu buka kembali. Anda akan melihat console.log yang sesuai dengan berbagai peristiwa di service worker.
Selanjutnya, kembali ke mode offline dan muat ulang situs. Anda akan melihat bahwa situs dimuat meskipun Anda sedang offline.
Penjelasan
Selama peristiwa penginstalan pekerja layanan, cache bernama akan dibuka menggunakan Cache Storage API. File dan rute yang ditentukan dalam precacheResources kemudian dimuat ke dalam cache menggunakan metode cache.addAll. Hal ini disebut precaching karena secara preemptif menyimpan dalam cache kumpulan file selama waktu penginstalan, bukan menyimpannya dalam cache saat diperlukan atau diminta.
Setelah service worker mengontrol situs, resource yang diminta akan diteruskan melalui service worker seperti proxy. Setiap permintaan memicu peristiwa pengambilan data yang, dalam service worker ini, menelusuri cache untuk menemukan kecocokan, jika ada kecocokan, akan merespons dengan resource yang di-cache. Jika tidak ada kecocokan, resource akan diminta secara normal.
Resource penyimpanan dalam cache memungkinkan aplikasi berfungsi secara offline dengan menghindari permintaan jaringan. Sekarang aplikasi dapat merespons dengan kode status 200 saat offline.
5. Selamat!
Anda telah mempelajari cara mengaktifkan mode offline aplikasi web menggunakan pekerja layanan dan Cache Storage API.
Codelab berikutnya dalam seri ini adalah Bekerja dengan Workbox