このページは Cloud Translation API によって翻訳されました。

プログレッシブウェブアプリ: オフライン

1. ようこそ

このラボでは、既存のウェブアプリケーションをオフラインで使用できるようにします。これは、プログレッシブウェブアプリワークショップの一連のコンパニオン Codelab の最初です。このシリーズにはさらに 7 つの Codelab があります。

学習内容

Service Worker を手動で作成する
既存のウェブアプリケーションに Service Worker を追加する
Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする

必要な予備知識

簡易 HTML と JavaScript

必要なもの

Service Worker をサポートするブラウザ

2. 準備

まず、この Codelab に必要なスターターコードのクローンを作成するか、ダウンロードします。

リポジトリのクローンを作成する場合は、starter ブランチにいることを確認してください。zip ファイルには、そのブランチのコードも含まれています。

このコードベースには Node.js 14 以降が必要です。コードが使用可能になったら、コードのフォルダにあるコマンドラインから npm ci を実行して、必要な依存関係をすべてインストールします。次に、npm start を実行して Codelab の開発サーバーを起動します。

すべての分散ファイルの説明はソースコードの README.md ファイルで確認できます。また、この Codelab で扱う既存の重要なファイルは次のとおりです。

キーファイル

js/main.js - メインアプリケーションの JavaScript ファイル
service-worker.js - アプリケーションの Service Worker ファイル

3. オフラインでテストする

変更を加える前に、ウェブアプリが現在オフラインではないことをテストして確認します。パソコンをオフラインにしてウェブアプリを再読み込みするか、Chrome を使用している場合は次の手順で再起動します。

Chrome DevTools を開く
[Application] タブに切り替える
[Service Workers] セクションに切り替えます。
[オフライン] チェックボックスをオンにする
Chrome DevTools を閉じずにページを更新する

[オフライン] チェックボックスがオンの状態で、Chrome DevTools の [Application] タブが Service Worker に対して開かれています

サイトをテストしても読み込みに失敗した場合は、次にオンライン機能を追加します。オフラインのチェックボックスをオフにして、次の手順に進みます。

4. オフラインでの利用

基本的な Service Worker を追加しましょう。これは、Service Worker の登録とリソースのキャッシュという 2 つのステップで行われます。

Service Worker の登録

すでに空の Service Worker ファイルがあるので、変更を反映させるには、それをアプリケーションに登録します。これを行うには、js/main.js の先頭に次のコードを追加します。

import swURL from 'sw:../service-worker.js';

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      const reg = await navigator.serviceWorker.register(swURL);
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

説明

このコードは、ページが Service Worker をサポートしている場合にのみ、ページが読み込まれると空の service-worker.js Service Worker ファイルを登録します。

リソースを事前キャッシュする

ウェブアプリをオフラインで動作させるには、ブラウザがネットワークリクエストに応答し、リクエストのルーティング先を選択できる必要があります。これを行うには、次の行を service-worker.js に追加します。

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

ブラウザに戻り、プレビュータブを閉じて、もう一度開きます。Service Worker のさまざまなイベントに対応する console.log が表示されます。

次に、もう一度オフラインになってサイトを更新します。オフラインになっているにもかかわらず、ファイルが読み込まれていることを確認できます。

説明

Service Worker のインストールイベント中に、Cache Storage API を使用して名前付きキャッシュが開かれます。次に、precacheResources で指定されたファイルとルートが、cache.addAll メソッドを使用してキャッシュに読み込まれます。これはキャッシュと呼ばれます。これは、ファイルが必要になったときやリクエストされたときにキャッシュされるのではなく、インストール時にファイルセットをプリエンプティブにキャッシュするためです。

Service Worker がサイトを制御すると、リクエストされたリソースはプロキシのように Service Worker を通過します。各リクエストによって取得イベントがトリガーされます。この Service Worker でキャッシュが一致するかどうかが検索され、一致する場合はキャッシュされたリソースが返されます。一致しない場合、リソースは通常どおりリクエストされます。

リソースをキャッシュに保存することで、ネットワークリクエストを回避してアプリをオフラインで利用できるようになります。これで、アプリはオフライン時にステータスコード 200 を返すようになりました。

5. 完了

Service Worker と Cache Storage API を使用してウェブアプリをオフラインにする方法を学びました。

このシリーズの次の Codelab は、Workbox の操作です。