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

Jeff Posnick

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));
});

Catatan: Beberapa pengguna library Workbox mungkin secara implisit mengandalkan panggilan asinkron ke importScripts() tanpa menyadarinya. Harap lihat panduan ini untuk pastikan Anda tidak mengalami masalah di Chrome 71.

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.

Mulai Chrome 71, Anda akan melihat pesan peringatan yang dicatat ke konsol.

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.