Developer yang menggunakan service worker dan Cache Storage API harus memantau dua perubahan kecil yang diluncurkan di Chrome 71. Kedua perubahan ini membuat implementasi Chrome lebih sesuai dengan spesifikasi dan browser lainnya.
Tidak mengizinkan importScripts() asinkron
importScripts()
memberi tahu skrip pekerja layanan utama Anda untuk menjeda eksekusi saat ini, mendownload kode tambahan dari
URL tertentu, dan menjalankannya hingga selesai dalam cakupan global saat ini. Setelah selesai,
skrip pekerja layanan utama akan melanjutkan eksekusi. importScripts() berguna saat Anda ingin memecah skrip pekerja layanan utama menjadi bagian-bagian yang lebih kecil karena alasan organisasi, atau mengambil kode pihak ketiga untuk menambahkan fungsi ke pekerja layanan Anda.
Browser mencoba mengurangi kemungkinan masalah performa "download dan jalankan beberapa kode
sinkron" dengan otomatis meng-cache apa pun yang diambil melalui importScripts(), yang berarti bahwa setelah
download awal, ada sedikit overhead yang terlibat dalam mengeksekusi kode yang diimpor.
Namun, agar berfungsi, browser perlu mengetahui bahwa tidak akan ada kode "kejutan" yang diimpor ke dalam pekerja layanan setelah penginstalan awal.
Sesuai dengan spesifikasi pekerja layanan,
panggilan importScripts() seharusnya hanya berfungsi selama eksekusi sinkron skrip pekerja layanan
level atas, atau jika diperlukan, secara asinkron di dalam pengendali install.
Sebelum Chrome 71, memanggil importScripts() secara asinkron di luar pengendali install akan
berfungsi. Mulai Chrome 71, panggilan tersebut
akan menampilkan pengecualian runtime (kecuali jika URL yang sama sebelumnya diimpor di pengendali install),
yang cocok dengan perilaku di browser lain.
Daripada kode seperti ini:
// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
importScripts('my-fetch-logic.js');
event.respondWith(self.customFetchLogic(event));
});
Kode pekerja layanan Anda akan terlihat seperti:
// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
event.respondWith(self.customFetchLogic(event));
});
Menghentikan penggunaan URL berulang yang diteruskan ke cache.addAll()
Jika Anda menggunakan Cache Storage API bersama dengan pekerja layanan, ada perubahan kecil lainnya di
Chrome 71 untuk menyesuaikan dengan spesifikasi yang relevan. Jika URL yang sama
diteruskan beberapa kali ke satu panggilan ke
cache.addAll(), spesifikasi
mengatakan bahwa promise yang ditampilkan oleh panggilan harus ditolak.
Sebelum Chrome 71, hal tersebut tidak terdeteksi, dan URL duplikat akan diabaikan secara efektif.
Logging ini adalah awal dari Chrome 72, yang bukan hanya peringatan yang dicatat ke dalam log, URL duplikat akan
menyebabkan penolakan cache.addAll(). Jika Anda memanggil cache.addAll() sebagai bagian dari rantai promise yang diteruskan ke InstallEvent.waitUntil(), seperti praktik yang umum dilakukan, penolakan tersebut dapat menyebabkan pekerja layanan gagal diinstal.
Berikut cara Anda mungkin mengalami masalah:
const urlsToCache = [
'/index.html',
'/main.css',
'/app.js',
'/index.html', // Oops! This is listed twice and should be removed.
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
);
});
Batasan ini hanya berlaku untuk URL sebenarnya yang diteruskan ke cache.addAll(), dan menyimpan dalam cache yang
akhirnya menjadi dua respons yang setara dan memiliki URL yang berbeda—seperti '/' dan '/index.html'—tidak akan
memicu penolakan.
Menguji implementasi pekerja layanan secara luas
Pada tahap ini, pekerja layanan diterapkan secara luas di semua browser"evergreen" utama. Jika Anda rutin menguji progressive web app Anda terhadap sejumlah browser, atau jika Anda memiliki banyak pengguna yang tidak menggunakan Chrome, kemungkinan Anda telah mendeteksi inkonsistensi dan memperbarui kode Anda. Namun, jika Anda belum melihat perilaku ini di browser lain, kami ingin menyampaikan perubahan ini sebelum mengubah perilaku Chrome.