1. Selamat Datang
Dalam lab ini, Anda akan mengambil aplikasi web yang sudah ada dan membuatnya berfungsi secara offline. Codelab ini adalah yang pertama dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Ada tujuh codelab lagi dalam seri ini.
Yang akan Anda pelajari
- Menulis Service Worker secara manual
- Menambahkan Service Worker ke aplikasi web yang sudah ada
- Menggunakan Service Worker dan Cache Storage API untuk membuat resource tersedia secara offline
Yang perlu Anda ketahui
- HTML dan JavaScript dasar
Yang akan Anda butuhkan
- Browser yang mendukung Service Worker
2. Memulai Persiapan
Mulai 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 codelab.
File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:
File Utama
js/main.js- File JavaScript aplikasi utamaservice-worker.js- File pekerja layanan aplikasi
3. Uji Offline
Sebelum membuat perubahan, mari kita uji untuk menunjukkan bahwa aplikasi web saat ini tidak berfungsi secara offline. Untuk melakukannya, alihkan komputer ke offline dan muat ulang aplikasi web, atau, jika Anda menggunakan Chrome:
- Buka Chrome Dev Tools
- Beralih ke tab Aplikasi
- Beralih ke bagian Service Workers
- Centang kotak Offline
- Memuat ulang halaman tanpa menutup Chrome DevTools
Setelah situs diuji dan gagal dimuat secara offline, saatnya menambahkan beberapa fungsi online. Hapus centang pada kotak offline dan lanjutkan ke langkah berikutnya.
4. Lakukan Interaksi di Luar Platform
Saatnya menambahkan pekerja layanan dasar. Hal ini akan terjadi dalam dua langkah: mendaftarkan pekerja layanan dan menyimpan cache resource.
Mendaftarkan Pekerja Layanan
Sudah ada file pekerja layanan kosong, jadi untuk memastikan perubahan muncul, mari kita 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 pekerja layanan service-worker.js yang kosong setelah halaman dimuat, dan hanya jika situs mendukung pekerja layanan.
Melakukan pra-cache resource
Agar aplikasi web berfungsi secara offline, browser harus dapat merespons permintaan jaringan dan memilih ke mana permintaan tersebut akan dirutekan. 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 pekerja layanan.
Selanjutnya, kembali offline dan muat ulang situs. Anda akan melihat bahwa aplikasi dimuat meskipun Anda sedang offline.
Penjelasan
Selama peristiwa penginstalan pekerja layanan, cache bernama dibuka menggunakan Cache Storage API. File dan rute yang ditentukan dalam precacheResources kemudian dimuat ke dalam cache menggunakan metode cache.addAll. Hal ini disebut pra-penyimpanan dalam cache karena secara preventif menyimpan dalam cache sekumpulan file selama waktu penginstalan, bukan menyimpannya dalam cache saat dibutuhkan atau diminta.
Setelah pekerja layanan mengontrol situs, resource yang diminta akan melewati pekerja layanan seperti proxy. Setiap permintaan memicu peristiwa pengambilan data yang, di pekerja layanan ini, menelusuri kecocokan dalam cache. Jika ada kecocokan, respons dengan resource yang di-cache. Jika tidak ada kecocokan, resource akan diminta secara normal.
Dengan menyimpan resource dalam cache, aplikasi dapat berfungsi secara offline dengan menghindari permintaan jaringan. Sekarang aplikasi dapat merespons dengan kode status 200 saat offline.
5. Selamat!
Anda telah mempelajari cara membuat aplikasi web Anda tersedia secara offline menggunakan pekerja layanan dan Cache Storage API.
Codelab berikutnya dalam seri ini adalah Bekerja dengan Workbox