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

PWA（プログレッシブウェブアプリ）

2024.07.08

この記事は約8分で読めます。

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

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

コード全文

以下は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イベントが発生します。
- 古いキャッシュを削除し、新しいキャッシュを使用するようにします。