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

前回の続きです。オフライン対応したコードを見ていきます。

コード全文
キャッシュ名とキャッシュするリソースのリスト
インストールイベント
フェッチイベント
アクティベートイベント
詳細なフローの説明
まとめ

コード全文

以下はPWAのコードです。

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:

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);
                    }
                })
            );
        })
    );
});

以下、service-worker.jsファイルの詳細です。

キャッシュ名とキャッシュするリソースのリスト

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

CACHE_NAME：キャッシュの名前。バージョン管理するために、名前にバージョン番号を含めることが多いです。
urlsToCache：キャッシュしたいリソースのURLのリスト。これらのリソースはオフライン時に使用されます。

インストールイベント

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

installイベント：サービスワーカーが初めてインストールされるときに発生します。このイベント内でキャッシュを作成し、指定したリソースをキャッシュに保存します。
event.waitUntil：インストールが完了するまで、サービスワーカーのインストールを待つようにします。
caches.open(CACHE_NAME)：指定した名前でキャッシュを開く（または作成する）メソッド。
cache.addAll(urlsToCache)：指定したリソースのリストをキャッシュに追加するメソッド。

フェッチイベント

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

fetchイベント：ブラウザがネットワークリクエストを行うたびに発生します。
event.respondWith：イベントに対応するレスポンスを提供するためのメソッド。
caches.match(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);
                    }
                })
            );
        })
    );
});

activateイベント：サービスワーカーがアクティブ化されたときに発生します。通常、古いキャッシュを削除するために使用されます。
cacheWhitelist：現在のキャッシュ名をホワイトリストとして設定します。
caches.keys()：すべてのキャッシュの名前を取得します。
caches.delete(cacheName)：ホワイトリストにない古いキャッシュを削除します。

詳細なフローの説明

インストールフェーズ：
- サービスワーカーが初めて登録されると、installイベントが発生します。このとき、指定したリソースをキャッシュします。
- キャッシュが正常に作成されると、サービスワーカーのインストールが完了します。
フェッチフェーズ：
- ユーザーがページを訪問したり、ページ内のリソースにアクセスすると、fetchイベントが発生します。
- サービスワーカーはまずキャッシュを確認し、リクエストに一致するリソースがあればそれを返します。なければ、ネットワークからリソースを取得します。
アクティベートフェーズ：
- サービスワーカーが新しいバージョンに更新されると、activateイベントが発生します。
- 古いキャッシュを削除し、新しいキャッシュを使用するようにします。

まとめ

これで、サービスワーカーの各部分とその動作について理解できました。オフライン対応のPWAを作成する際には、これらのイベントとキャッシュ戦略を適切に設定することが重要です。