PWA（プログレッシブ・ウェブ・アプリ）をオフラインで表示する(Part1)

PWA（プログレッシブ・ウェブ・アプリ）をオフラインでも表示できるようにするためには、サービスワーカーを利用してアプリのリソースをキャッシュし、ネットワークに接続できない場合でもそのキャッシュを利用してアプリを表示するようにします。

プロジェクトのセットアップ
サービスワーカーの作成
ローカルサーバーの起動
ブラウザで確認
追加のリソースとヒント
まとめ

プロジェクトのセットアップ

まず、基本的なHTML、CSS、JavaScriptファイルを用意します。

index.html:

    <h1>Hello, PWA!</h1>
    <p>This is my first Progressive Web App.</p>
    <script src="script/main.js"></script>

styles/main.css:

body {
    font-family: Arial, sans-serif;
}

script/main.js:

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

サービスワーカーの作成

次に、service-worker.jsファイルを作成します。このファイルはアプリケーションのルートディレクトリに配置します。

service-worker.js:

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
    '/',
    '/styles/main.css',
    '/script/main.js',
    '/images/logo.png'  // 必要に応じて他のリソースも追加
];

// インストールイベント
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

// フェッチイベント
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});

// アクティベートイベント
self.addEventListener('activate', event => {
    const cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

ローカルサーバーの起動

PWAはHTTPSで動作する必要があるため、ローカル環境でもHTTPSが必要です。ローカルで簡単にHTTPSサーバーを立ち上げるには、http-serverなどのパッケージを使用することができます。

npm install -g http-server
http-server -S -C path/to/your/cert.pem -K path/to/your/key.pem

または、lite-serverなどのパッケージを使ってサーバーを起動できます。

npm install -g lite-server
lite-server

ブラウザで確認

サーバーを起動したら、ブラウザでhttp://localhost:8080（ポート番号は使用するサーバーにより異なります）にアクセスします。開発者ツールを開き、Applicationタブでサービスワーカーが正しく登録されていることを確認します。

これで、オフライン対応のPWAが実装されました。オフライン時にアプリケーションが正しく動作することを確認するため、ネットワークを切断し、キャッシュされたリソースが表示されるかどうかをテストします。

追加のリソースとヒント

キャッシュ戦略：異なるキャッシュ戦略を採用することもできます。例えば、キャッシュファースト、ネットワークファーストなどがあります。
PWAマニフェスト：PWAを完全なアプリとしてインストール可能にするためには、Web App Manifest（manifest.json）も作成し、リンクする必要があります。
デバッグ：Chrome DevToolsのApplicationタブを使用して、サービスワーカーとキャッシュの状態を確認し、デバッグします。

まとめ

これで、PWAがオフラインでも動作するようになります。