Service Workerの実装方法

Service Workerの登録: Service Workerを利用するには、まずウェブページからService Workerを登録する必要があります。以下のコードをHTMLファイルに追加して、Service Workerを登録します。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

Service Workerのインストールとアクティベート: Service Workerを実際に動作させるためには、Service Workerファイル（例: service-worker.js）を作成し、以下のようなコードを記述します。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache')
      .then(function(cache) {
        return cache.addAll([
          '/',
          '/styles.css',
          '/script.js',
          '/image.jpg'
        ]);
      })
  );
});
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
      .then(function(cacheNames) {
        return Promise.all(
          cacheNames.filter(function(cacheName) {
            // 古いキャッシュを削除する処理
          }).map(function(cacheName) {
            return caches.delete(cacheName);
          })
        );
      })
  );
});

上記の例では、Service Workerのインストール時に必要なリソースをキャッシュに追加し、アクティベート時に古いキャッシュを削除しています。

オフライン対応: Service Workerを使用すると、オフライン時に事前にキャッシュされたリソースを利用することができます。以下のコードは、オフライン時にキャッシュされたリソースを返す例です。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

プッシュ通知: Service Workerは、プッシュ通知を受け取るためのイベントもサポートしています。以下のコードは、プッシュ通知を受け取った時に通知を表示する例です。

上記の例では、プッシュ通知を受け取った時にタイトルと本文を設定し、通知を表示しています。

以上が基本的なService Workerの実装方法とコード例です。これらの例を参考に、Service Workerを活用したウェブアプリケーションの開発を進めることができます。