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 penerapan 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 umum, penolakan tersebut dapat menyebabkan pekerja layanan Anda 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 setara yang memiliki URL berbeda—seperti '/' dan '/index.html'—tidak akan memicu penolakan.

Menguji implementasi pekerja layanan Anda secara luas

Pada tahap ini, pekerja layanan diterapkan secara luas di semua browser"evergreen" utama. Jika Anda secara rutin menguji aplikasi web progresif terhadap sejumlah browser, atau jika Anda memiliki sejumlah besar pengguna yang tidak menggunakan Chrome, kemungkinan Anda telah mendeteksi inkonsistensi dan memperbarui kode. Namun, jika Anda belum melihat perilaku ini di browser lain, kami ingin menyampaikan perubahan ini sebelum mengubah perilaku Chrome.