Service Workerを使用したウェブアプリケーションのオフライン対応

Service Workerの登録とインストール: まず、Service Workerを登録し、インストールする必要があります。以下のコードを使用して、service-worker.jsという名前のファイルにService Workerを記述しましょう。

// service-worker.js
// インストール時の処理
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
        // キャッシュするファイルを追加
      ]);
    })
  );
});
// リクエスト時の処理
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

上記のコードでは、インストール時に必要なファイルをキャッシュに追加し、リクエストがあった場合にキャッシュから応答するように設定しています。

オフライン通知の追加: Service Workerを使用すると、オフライン時にユーザーに通知を表示することもできます。以下のコードを使用して、オフライン時に表示される通知を追加しましょう。

// service-worker.js
// インストール時の処理
self.addEventListener('install', event => {
  // ...
});
// リクエスト時の処理
self.addEventListener('fetch', event => {
  // ...
});
// オフライン時の処理
self.addEventListener('offline', event => {
  self.registration.showNotification("オフラインです", {
    body: "このウェブアプリケーションはオフラインでも利用できます。",
    icon: "offline-icon.png"
  });
});

上記のコードでは、self.registration.showNotificationメソッドを使用してオフライン時に通知を表示しています。

オフライン時のページ表示: Service Workerを使用すると、オフライン時に特定のページを表示することもできます。以下のコードを使用して、オフライン時に表示されるページを設定しましょう。

// service-worker.js
// インストール時の処理
self.addEventListener('install', event => {
  // ...
});
// リクエスト時の処理
self.addEventListener('fetch', event => {
  // ...
});
// オフライン時の処理
self.addEventListener('offline', event => {
  event.respondWith(
    caches.match('/offline.html')
  );
});

上記のコードでは、caches.matchメソッドを使用して、オフライン時にoffline.htmlを表示しています。