Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Offline fallback page with service worker

Paul Kinlan

何年も前に、ネイティブアプリケーションがネットワーク接続の欠如にどのように対応したかについて調査しました。私は分析へのリンクを失いましたが(Google+にあると誓うことができます)、多くのネイティブアプリケーションはインターネットに密接に結び付けられているため、機能を拒否することができます。多くのWebアプリのように思えますが、それらはWebとは一線を画したものですが、経験はまだ「オンブランド」であったということです。大部分のWebエクスペリエンスでは、「Dino」が表示されます(chrome:// dinoを参照)。 Service Workerには長い間取り組んできましたが、Service Workerによってページが制御されるサイトがますます増えている一方で、ネットワークが機能していないときには、ほとんどのサイトで基本的なフォールバックの経験がありません利用可能です。 私は私たちの良い友達Jakeに、あなたが完全にオフラインで最初のエクスペリエンスを作りたくないという仮定の下で一般的なフォールバックページをどのように作り上げるかについてのガイダンスがあるかと尋ねました。 Check it out 。 説明を簡潔にするために、コードの長さは約20行にすぎないので、以下に貼り付けました。オフラインアセットをキャッシュし、「ナビゲーション」フェッチであるすべてのフェッチについて、エラーが発生したかどうか(ネットワークが原因で)を確認し、元のコンテンツの代わりにオフラインページをレンダリングします。 addEventListener('install', (event) => { event.waitUntil(async function() { const cache = await caches.open('static-v1'); await cache.addAll(['offline.html', 'styles.css']); }()); }); // See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload addEventListener('activate', event => { event.waitUntil(async function() { // Feature-detect if (self.registration.navigationPreload) { // Enable navigation preloads! await self.registration.navigationPreload.enable(); } }()); }); addEventListener('fetch', (event) => { const { request } = event; // Always bypass for range requests, due to browser bugs if (request.

Read More