JavaScript の新しい知識: サービスワーカー-jsチュートリアル-php.cn

JavaScript の新しい知識: サービスワーカー

阿神

リリース： 2017-01-24 14:30:41

オリジナル

1399 人が閲覧しました

フロントエンドテクノロジーはデスクトップテクノロジーに近づいており、最も重要なものの 1 つはサービスワーカーであり、これにより HTML アプリのオフラインでの動作が可能になります。この記事では、簡単なケースコードを使用してこのテクノロジを説明します。使用するツール:

1. ブラウザのバージョンは chrome 55

2. サーバーシステム: Node 5.0

3 つのファイルを準備する必要があります:

touch  index.html b.html sw.js

ログイン後にコピー

ファイルの内容は次のとおりです:

  <script>
    if (&#39;serviceWorker&#39; in navigator) {
      navigator.serviceWorker.register(&#39;/sw.js&#39;);
    }    </script>

ログイン後にコピー

1 つの Service Worker を登録します。ファイル名は sw.js (JavaScript コードファイル) です。実際のキーファイルは sw.js で、その内容は次のとおりです。

   const cacheName = &#39;v1::static&#39;;    self.addEventListener(&#39;install&#39;, e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            &#39;/&#39;,
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener(&#39;fetch&#39;, event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {          return cache.match(event.request).then(res => {            return res || fetch(event.request)
          });
        })
      );
    });

ログイン後にコピー

ServiceWorker が初めてロードされるときに、install が呼び出されます。ここで、いくつかの初期化作業を実行できます。オフライン時に必要なファイルはキャッシュに保存されます。ここでは「/」を指定して、すべてのコンテンツがキャッシュされるようにします。

2 番目のイベントは fetch で、リモートリソースにアクセスするときに呼び出されます。ここで一致を確認できます。キャッシュにリソースがある場合は、キャッシュ内のリソースが返されます。そうでない場合は、リモートで取得されます。

3 番目のファイル b.html は、オフライン効果を示すファイルです: