PWA対応 Webサイトのオフライン表示を試します。
以下対応を行うと1度表示した後はネットワークがつながっていなくてもページが表示できます。
PWAの基本的なところは前回の「PWA対応 Webサイトのアイコンをホーム画面に追加」を参照してください。
①前提
前回のmanifest.jsonはそのまま使用します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "idealie PWA test", "short_name": "PWA test", "icons": [ { "src": "/images/icon144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#99d9ea", "gcm_sender_id": "1019041112259", "gcm_user_visible_only": true } |
テスト用に以下２ページを用意します。
・index.html
前回行った「serviceWorker.js」の登録はそのまま使用します。
オフラインで遷移と画像が表示できることを試すためにページ内にリンクと画像表示を追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <link rel="manifest" href="/manifest.json"> <script> window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js') .then(function(registration) { return registration.pushManager.getSubscription().then(function(subscription) { console.log("subscription",subscription) if (subscription) { return subscription } return registration.pushManager.subscribe({ userVisibleOnly: true }) }) }).then(function(subscription) { var endpoint = subscription.endpoint console.log("pushManager endpoint:", endpoint) }).catch(function(error) { console.log("serviceWorker error:", error) }) } })</script> </head> <body> こんにちは オフラインテスト <br> <a href="https://idealive-t-pj2.tk/index2.html">2ページ目</a> <br> <img src="images/icon144.png" alt="画像"> </body> </html> |
・index2.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html> <head> <link rel="manifest" href="/manifest.json"> </head> <body> こんにちは オフラインテストの2ページ目 <br> <a href="https://idealive-t-pj2.tk/index.html">トップへ移動</a> <br> <img src="images/icon144_2.png" alt="画像"> </body> </html> |
②キャッシュに保持設定
・serviceWorker.jsに記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// キャッシュするリソース(css、jsがあれば個別で追加) var resourcesToCache = [ '/', '/images' ]; // キャッシュバージョン var CACHE_VERSION = 'ca-v1'; // キャッシュに追加 self.addEventListener('install', function(event) { console.log('Service Worker Install '); event.waitUntil( caches.open(CACHE_VERSION) .then(function(cache) { console.log('cache.addAll'); cache.addAll(resourcesToCache); }) ); }); |
「resourcesToCache」にキャッシュするリソースを記述します。
「/」配下と「/images」をキャッシュしています
「CACHE_VERSION」でキャッシュのバージョン管理を行います。
③キャッシュされた内容を表示設定
・serviceWorker.jsに記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// キャッシュ表示 var CACHE_DISP_VERSION = 'ca-d-v1'; self.addEventListener('fetch', function(event) { console.log('Service Worker fetch'); event.respondWith( // キャッシュが存在するかチェック caches.match(event.request) .then(function(response) { if (response) { return response; } else { // キャッシュがない場合キャッシュに入れる return fetch(event.request) .then(function(res) { return caches.open(CACHE_DISP_VERSION) .then(function(cache) { console.log('cache put'); cache.put(event.request.url, res.clone()); return res; }) }) .catch(function() { // エラーが発生しても何もしない }); } }) ); }); |
③古いキャッシュを削除
・serviceWorker.jsに記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 古いキャッシュを削除 self.addEventListener('activate', function(event) { console.log('activate Service Worker'); event.waitUntil( caches.keys() .then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key !== CACHE_VERSION && key !== CACHE_DISP_VERSION) { console.log('cache delete'); return caches.delete(key); } })); }) ); return self.clients.claim(); }); |
④オフライン表示
携帯でオンライン状態で表示をいったん行ってから、フライトモードに変更しオフライン状態で表示を行ってみました。
成功です！
オフライン状態でページ遷移も画像ファイルも表示されました。
こんな便利な機能iosも早く対応してほしいもんですね。