1. Selamat datang
Di lab ini, Anda akan mengerjakan aplikasi web yang sudah ada dan membuatnya berfungsi secara offline. Ini adalah pertama dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Ada tujuh codelab lagi di seri ini.
Yang akan Anda pelajari
- Menulis Service Worker secara manual
- Menambahkan Pekerja Layanan ke aplikasi web yang ada
- Menggunakan Pekerja Layanan dan Cache Storage API agar resource tersedia secara offline
Yang perlu Anda ketahui
- JavaScript dan HTML dasar
Yang akan Anda butuhkan
- Browser yang mendukung Pekerja Layanan
2. Memulai Persiapan
Mulai dengan membuat 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.
Database ini memerlukan Node.js 14 atau yang lebih tinggi. 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 yang akan Anda kerjakan di sepanjang codelab ini:
File Kunci
js/main.js- File JavaScript aplikasi utamaservice-worker.js- File pekerja layanan aplikasi
3. Menguji Offline
Sebelum melakukan perubahan, uji untuk menunjukkan bahwa aplikasi web saat ini tidak berfungsi secara offline. Untuk melakukannya, offlinekan komputer kami 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 berhasil diuji dan gagal dimuat secara offline, saatnya menambahkan beberapa fungsi online! Hapus centang pada kotak offline dan lanjutkan ke langkah berikutnya.
4. Atur secara offline
Waktunya menambahkan pekerja layanan dasar! Hal ini akan terjadi dalam dua langkah: mendaftarkan pekerja layanan dan caching ke 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:
import swURL from 'sw:../service-worker.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 {
const reg = await navigator.serviceWorker.register(swURL);
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 kosong setelah halaman dimuat, dan hanya jika situs mendukung pekerja layanan.
Resource pra-cache
Agar aplikasi web dapat berfungsi secara offline, browser harus dapat merespons permintaan jaringan dan memilih tempat untuk merutekannya. Untuk melakukannya, tambahkan hal 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 lagi. Anda akan melihat console.log yang sesuai dengan peristiwa yang berbeda di pekerja layanan.
Selanjutnya, offline lagi dan muat ulang situs. Anda akan melihat halaman tersebut dimuat meskipun Anda sedang offline.
Penjelasan
Selama peristiwa pemasangan pekerja layanan, cache bernama dibuka menggunakan Cache Storage API. File dan rute yang ditentukan dalam precacheResources akan dimuat ke dalam cache menggunakan metode cache.addAll. Hal ini disebut cabang karena secara preemtif menyimpan cache kumpulan file selama waktu penginstalan, bukan meng-cache file tersebut saat diperlukan atau diminta.
Setelah pekerja layanan mengontrol situs, resource yang diminta melewati pekerja layanan seperti proxy. Setiap permintaan memicu peristiwa pengambilan yang, dalam pekerja layanan ini, akan 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 dalam cache memungkinkan aplikasi bekerja secara offline dengan menghindari permintaan jaringan. Sekarang aplikasi bisa merespons dengan kode status 200 ketika offline!
5. Selamat!
Anda telah mempelajari cara membuat aplikasi web menjadi offline menggunakan pekerja layanan dan API penyimpanan cache.
Codelab berikutnya dalam seri ini adalah Bekerja dengan Workbox