Tweaks untuk cache.addAll() dan importScripts() akan hadir di Chrome 71

Jeff Posnick

Developer yang menggunakan pekerja layanan 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.

Melarang imporScripts() asinkron

importScripts() memberi tahu skrip pekerja layanan utama Anda untuk menjeda eksekusinya 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 menarik kode pihak ketiga untuk menambahkan fungsi ke pekerja layanan Anda.

Browser mencoba mengurangi kemungkinan gocha performa dari "download dan jalankan beberapa kode sinkron" dengan secara otomatis meng-cache apa pun yang ditarik melalui importScripts(). Artinya, setelah download awal, hanya ada sedikit overhead yang diperlukan dalam menjalankan kode yang diimpor.

Agar dapat berfungsi, browser perlu mengetahui bahwa tidak akan ada kode "surprise" yang diimpor ke pekerja layanan setelah penginstalan awal. Sesuai dengan spesifikasi pekerja layanan, memanggil importScripts() seharusnya hanya berfungsi selama eksekusi sinkron skrip pekerja layanan tingkat 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 dalam pengendali install), yang cocok dengan perilaku di browser lain.

Alih-alih 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:

// 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 pekerja layanan, ada perubahan kecil lain di Chrome 71 untuk menyesuaikan dengan spesifikasi yang relevan. Jika URL yang sama diteruskan beberapa kali ke satu panggilan ke cache.addAll(), spesifikasinya menyatakan bahwa promise yang ditampilkan oleh panggilan harus ditolak.

Sebelum Chrome 71, URL duplikat tidak terdeteksi dan secara efektif akan diabaikan.

Logging ini adalah awal dari Chrome 72. Dalam versi ini, URL duplikat akan menyebabkan cache.addAll() penolakan, bukan hanya peringatan yang dicatat dalam log. Jika Anda memanggil cache.addAll() sebagai bagian dari promise chain yang diteruskan ke InstallEvent.waitUntil(), seperti yang umum dilakukan, penolakan tersebut dapat menyebabkan pekerja layanan gagal diinstal.

Berikut adalah cara Anda 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))
  );
});

Pembatasan ini hanya berlaku untuk URL sebenarnya yang diteruskan ke cache.addAll(). Dalam cache, dua respons setara yang memiliki URL berbeda—seperti '/' dan '/index.html'—tidak akan memicu penolakan.

Menguji implementasi pekerja layanan secara luas

Pekerja layanan diterapkan secara luas di semua browser"selalu relevan" pada tahap ini. Jika Anda secara rutin menguji progressive web app Anda terhadap sejumlah browser, atau jika Anda memiliki sejumlah besar pengguna yang tidak menggunakan Chrome, maka kemungkinan Anda telah mendeteksi inkonsistensi dan memperbarui kode Anda. Namun, jika Anda tidak menyadari perilaku ini di browser lain, kami ingin menunjukkan perubahan tersebut sebelum mengalihkan perilaku Chrome.