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

フロントエンド テクノロジーはデスクトップ テクノロジーに近づいており、最も重要なものの 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 = 'v1::static';    self.addEventListener('install', e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {          return cache.addAll([            '/',
          ]).then(() => self.skipWaiting());
        })
      );
    });    self.addEventListener('fetch', 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 は、オフライン効果を示すファイルです:

<h1>serviceWorker B</h1>

http サーバーをインストールして現在のパスで実行することもできます:

npm i http-server 
    http-server

にアクセスしてください:

http://localhost:8080/index.html

と

http://localhost:8080/b.html

その後、httpサーバーを閉じて

 http://localhost:8080/b.html

に再度アクセスするとアクセスできるようになりますよ〜、これがオフライン実装の効果です。

まあ、Service Worker の実行ステータスを確認したい場合は、次の URL を使用することもできます:

 chrome://inspect/#service-workers

詳細については、こちらで確認できます:

 chrome://serviceworker-internals/

ここで、登録の開始、キャンセル、その他の操作を行うことができます。

その実装を確認できますが、まだそれほど楽観的ではありません:

http://caniuse.com/#feat=serviceworkers