Gesaan dan konteks
Selepas pelepasan PWA, sesetengah pengguna masih dikawal oleh Service Worker lama dan memuatkan JavaScript lama dengan HTML baharu, menyebabkan ChunkLoadError. Terangkan kitaran hayat, versi cache, tab terbuka, skipWaiting, clientsClaim, dan pertukaran kompromi (trade-offs) bagi rollback.
Soalan ini sesuai untuk peranan frontend, platform web, dan full-stack. Ia menguji keselamatan pelaksanaan dan pengalaman pengguna tanpa memerlukan rangka kerja tertentu. Kadar ralat dan nisbah cache lapuk ialah data latihan, bukan ambang universal.
Perkara yang diuji oleh penemu duga
Kitaran hayat
Calon perlu menerangkan install, waiting, activate, dan kawalan halaman, terutamanya sebab worker yang dikemas kini menunggu sementara klien lama kekal terbuka.
Ketekalan aset
Asingkan HTML, JavaScript yang dicincang (hashed), data API masa jalan, dan entri precache. Memadamkan cache lama tidak boleh merosakkan halaman yang masih merujuk aset tersebut.
Strategi penerimaan
skipWaiting boleh mempercepatkan penggunaan tetapi boleh menukar kawalan semasa jangka hayat halaman. Jawapan yang mantap menilai keserasian dan kebenaran pengguna.
Rollback dan kebolehmerhatian
ID versi, tetingkap luput, pemantauan ralat, dan no-op worker menyediakan cara untuk menghentikan pelancaran yang bermasalah.
Soalan untuk dijelaskan terlebih dahulu
- Adakah HTML dan aset statik menggunakan cincangan kandungan (content hashes)?
- Adakah URL dan skop Service Worker stabil?
- Bolehkah pengguna membiarkan halaman terbuka selama berjam-jam atau mempunyai keadaan yang belum disimpan?
- Adakah API serasi ke belakang dengan kedua-dua versi klien?
- Bolehkah produk menggesa untuk muat semula pada masa yang selamat?
- Bolehkah platform mengundur balik skrip worker dan manifes aset dengan cepat?
Jawapan 30 saat
“Worker yang dikemas kini biasanya memasang dan memasuki waiting sementara worker lama mengawal halaman terbuka. Saya mula-mula akan menjadikan HTML, aset yang dicincang, dan kontrak API serasi antara versi, kemudian memutuskan sama ada skipWaiting boleh diterima. Saya akan menggunakan entri precache yang disemak dan memadamkan hanya cache lama yang diketahui semasa activate.
Halaman akan memerhatikan updatefound dan controllerchange, menggesa untuk muat semula apabila selamat, dan merekodkan versi worker, ChunkLoadError, dan masa pengaktifan. Untuk pelepasan yang buruk, saya akan menghentikan pelancaran atau menghantar no-op worker sambil mengekalkan aset sebelumnya, kemudian membaiki dan meneruskan secara beransur-ansur.”
Jawapan mendalam langkah demi langkah
Langkah 1: Lukis kitaran hayat
Pendaftaran mencipta worker yang installing. Selepas install ia menjadi waiting; worker lama masih mengawal halaman sedia ada. Sebaik sahaja klien lama ditutup atau dinavigasi, worker baharu activate dan mengambil alih kawalan.
Langkah 2: Jadikan aset serasi
HTML harus merujuk aset yang dicincang, dan API harus bertolak ansur dengan medan lama semasa tetingkap penghijrahan. Menukar hanya nama cache tidak membantu jika halaman lama meminta cebisan (chunks) yang dipadamkan.
Langkah 3: Reka bentuk semakan kemas kini
Pastikan URL worker stabil. Pelayar menyemak perubahan bait pada navigasi dan pendaftaran; sesi yang lama boleh memanggil registration.update secara eksplisit, tetapi tidak sepatutnya melakukan pengundian (poll) secara agresif.
~~~js const registration = await navigator.serviceWorker.ready; await registration.update(); ~~~
Langkah 4: Kendalikan keadaan menunggu dan peringatan
Keadaan waiting adalah paling selamat secara lalai. Jika penerimaan segera diperlukan, semak keadaan yang belum disimpan dan keserasian protokol, tanya pengguna, kemudian hantar skipWaiting melalui mesej terkawal. Kendalikan controllerchange tanpa mencipta gelung muat semula.
Langkah 5: Bersihkan cache dan undur balik
Semasa activate, padamkan hanya cache di luar senarai dibenarkan (allowlist). Simpan tetingkap aset sebelumnya untuk rollback. Jika pelepasan tidak elok, undur balik titik masuk atau hantar no-op worker dan bukannya memadamkan setiap cache.
Langkah 6: Perhati dan sahkan
Rekod versi worker, hit cache, masa pengaktifan, controllerchange, 404 aset, dan ChunkLoadError. Uji tab lama dan baharu, permulaan luar talian, muat semula, pelancaran berperingkat, dan rollback.
Jawapan model
“ChunkLoadError boleh berlaku apabila worker lama mengawal halaman sementara penggunaan telah mengalih keluar cebisan yang dirujuk oleh halaman tersebut. Worker baharu menunggu secara lalai, jadi saya tidak akan memanggil skipWaiting secara global terlebih dahulu.
Saya akan mengekalkan URL worker yang stabil, menggunakan aset yang dicincang, dan mengekalkan tetingkap keserasian API. Semakan precache akan diuruskan secara eksplisit, dan activate hanya akan mengalih keluar cache lama yang tersenarai dalam senarai dibenarkan. Halaman akan mengesan worker yang sedang menunggu dan menawarkan muat semula apabila tiada keadaan yang belum disimpan; peralihan segera memerlukan keserasian dan pengendalian controllerchange yang berhati-hati.
Saya akan melancarkan pelepasan secara berperingkat dan memantau versi worker, 404 aset, dan ChunkLoadError. Jika versi tersebut bermasalah, hentikan pelancaran titik masuk atau laksanakan no-op worker sambil mengekalkan aset lama. Pemulihan mesti meliputi berbilang tab, permulaan luar talian, muat semula, dan rollback penuh.”
Kesilapan biasa
- Menganggap install mengawal setiap halaman dengan serta-merta.
- Menulis ganti JavaScript yang tidak dicincang di lokasi yang sama.
- Memanggil skipWaiting tanpa syarat dan mencampurkan versi di pertengahan halaman.
- Memadamkan setiap cache semasa activate.
- Menamakan semula skrip worker untuk memaksa kemas kini.
- Menguji hanya halaman yang baru dibuka, bukan tab yang telah lama dibuka.
- Merosakkan API semasa mengundur balik hanya entri frontend.
- Tidak mempunyai telemetri versi worker atau rollback no-op.
Soalan susulan
Soalan susulan 1: Mengapakah worker baharu perlu menunggu?
Worker lama masih mengawal klien yang terbuka. Kitaran hayat lalai menunggu klien tersebut ditutup atau dinavigasi supaya kawalan tidak bertukar secara tidak dijangka.
Soalan susulan 2: Bilakah skipWaiting munasabah digunakan?
Apabila aset dan API serasi ke belakang, tiada keadaan penting yang belum disimpan, dan muat semula serta-merta boleh diterima. Jika tidak, tunggu kebenaran pengguna atau navigasi.
Soalan susulan 3: Bagaimanakah anda menghalang pertumbuhan cache tanpa had?
Gunakan senarai dibenarkan versi atau semakan dan padamkan hanya cache yang tidak digunakan semasa activate. Simpan pelepasan sebelumnya untuk tetingkap rollback yang ditetapkan.
Soalan susulan 4: Bagaimanakah anda menghentikan worker yang mengandungi pepijat?
Hentikan pelancaran entri, dan jika perlu gunakan no-op worker atau pulihkan skrip yang diketahui baik. Pastikan aset lama tersedia semasa membetulkan pelepasan.
Soalan susulan 5: Bagaimanakah anda membuktikan kemas kini itu selamat?
Uji berbilang tab, permulaan luar talian, HTML lama dengan aset baharu, muat semula, gesaan kemas kini, keserasian API, pemantauan ralat, dan keseluruhan laluan rollback.