Developer yang menggunakan service worker dan Cache Storage API harus mencari dua perubahan kecil yang diluncurkan di Chrome 71. Kedua perubahan ini membuat implementasi Chrome lebih selaras dengan spesifikasi dan browser lainnya.
Melarang importScripts() asinkron
importScripts()
memberi tahu skrip pekerja layanan utama Anda untuk
menjeda eksekusi saat ini, mengunduh 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 Anda menjadi bagian-bagian yang lebih kecil untuk alasan organisasi, atau
mengambil kode pihak ketiga untuk menambahkan
fungsionalitas ke pekerja layanan Anda.
Browser berupaya mengurangi kemungkinan tercapainya performa "mendownload dan menjalankan beberapa
"kode" dengan otomatis meng-cache apa pun yang diambil melalui importScripts()
, artinya setelah
unduhan awal, hanya ada sedikit overhead yang dibutuhkan dalam mengeksekusi kode yang diimpor.
Agar dapat bekerja, browser perlu mengetahui bahwa tidak akan ada “kejutan” kode diimpor
ke dalam pekerja layanan setelah
penginstalan.
Sesuai dengan spesifikasi pekerja layanan,
memanggil importScripts()
seharusnya hanya berfungsi selama eksekusi sinkron level teratas
skrip pekerja layanan, atau jika diperlukan, secara asinkron di dalam pengendali install
.
Sebelum Chrome 71, memanggil importScripts()
secara asinkron di luar pengendali install
akan
Anda. Mulai Chrome 71, panggilan tersebut
menampilkan pengecualian runtime (kecuali jika URL yang sama sebelumnya diimpor dalam pengendali install
),
mencocokkan dengan
perilaku di {i>browser<i} lain.
Alih-alih menggunakan 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 akan terlihat seperti ini:
// 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));
});
Penghentian penggunaan URL berulang yang diteruskan ke cache.addAll()
Jika Anda menggunakan Cache Storage API bersama pekerja layanan, ada perubahan kecil lain di
Chrome 71 agar selaras dengan spesifikasi yang relevan. Jika URL yang sama
diteruskan beberapa kali menjadi satu panggilan
cache.addAll()
,
dalam spesifikasi mengatakan bahwa promise yang
dikembalikan 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, di mana alih-alih hanya peringatan yang dicatat dalam log, URL duplikat akan
menyebabkan cache.addAll()
ditolak. Jika Anda memanggil cache.addAll()
sebagai bagian dari rantai promise
diteruskan ke
InstallEvent.waitUntil()
,
seperti praktik umum, penolakan itu dapat menyebabkan pekerja layanan gagal menginstal.
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 apa yang
pada akhirnya menjadi dua respons setara yang memiliki URL berbeda—seperti '/'
dan '/index.html'
—akan
tidak memicu penolakan.
Menguji implementasi pekerja layanan secara luas
Service worker diimplementasikan secara luas di semua bidang "evergreen" browser di di titik ini. Jika Anda rutin menguji progressive web app Anda terhadap sejumlah {i>browser<i}, atau jika Anda memiliki banyak sekali pengguna yang tidak menggunakan Chrome, ada kemungkinan Anda telah mendeteksi inkonsistensi dan memperbarui kode Anda. Namun, jika Anda belum memperhatikan di {i>browser<i} lain, kami ingin memberitahukan perubahan sebelum mengubah perilaku Chrome.