🐡

【Task-RPG】サービスワーカーの追加

2024/04/07に公開

JavaScript

Node.js

PWA

tech

はじめに

アプリ開発全体の流れは、こちらの本にまとめています。

サービスワーカーの追加

publicフォルダの作成

プロジェクトのルートディレクトリにpublicという名前のフォルダを作成します。
このフォルダは、静的ファイル（HTML、CSS、JavaScript、画像など）を格納するために使用します。

サービスワーカーのファイルを作成する

publicフォルダ内にservice-worker.jsというファイルを作成します。
このファイルには、キャッシュの管理やオフラインサポートなどのロジックを記述します。

サービスワーカーの基本的なキャッシュロジックの記述

service-worker.js ファイルに以下の基本的なキャッシュロジックを記述します。

service-worker.js

// キャッシュ名を定義
const CACHE_NAME = 'v1';

// キャッシュするリソースを指定
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

// インストール処理
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
      .catch(error => {
        console.error('Failed to cache:', error);
      })
  );
});

// リソースフェッチ時のキャッシュロジック
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // キャッシュがあればキャッシュから返す
        if (response) {
          return response;
        }
        // なければネットワークからフェッチ
        return fetch(event.request);
      })
  );
});

// アクティブになった際の既存のキャッシュをクリーンアップする
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(cacheName => {
          return cacheName !== CACHE_NAME;
        }).map(cacheName => {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

クライアントサイドのJavaScriptファイルを作成する

publicフォルダ内にクライアントサイドのJavaScriptファイルmain.jsを作成します。
このファイルにサービスワーカーを登録するコードを記述します。

main.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('ServiceWorker registration successful: ', registration);
    }).catch(err => {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Expressサーバーで静的ファイルを提供するように設定する

Expressのindex.jsファイルを編集して、public フォルダから静的ファイルを提供するように設定します。

index.js

// public フォルダから静的ファイルを提供する
app.use(express.static('public'));

HTMLファイルを作成する

publicフォルダ内にindex.htmlというファイルを作成します。

このHTMLファイルに <script> タグを追加して、main.js（サービスワーカーを登録するJavaScriptファイル）をリンクします。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task-RPG</title>
</head>
<body>
    <h1>Welcome to Task-RPG!</h1>
    <p>アプリ開発中</p>
    <!-- その他のHTMLコンテンツ -->
    <script src="/main.js"></script>
</body>
</html>

Expressサーバーを起動します

ターミナルを起動して、以下のコマンドを実行してサーバーを起動する。

ターミナル

npm start

http://localhost:3000にアクセスして表示を確認

ブラウザでhttp://localhost:3000にアクセスし、

ページが正しく表示されること
サービスワーカーが登録されていること
の2点を確認します。

ブラウザの開発者ツールの「Application」タブで確認できます。

はじめに

サービスワーカーの追加

Discussion