以前PWAを簡単に実装してみましたが、今回はキャッシュを使ってオフラインでも表示できるように実装してみます。
サンプルコード
manifest.jsonは以前と同じものを使用します。
manifest.json
{
"name": "cly7796.net PWA sample",
"short_name": "PWA",
"icons": [{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "./index.html",
"display": "standalone"
}
次に今回のサンプルページですが、画像スライダーのあるページで試してみます。
HTMLは以下のようになります。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PWA Sample1</title> <link rel="stylesheet" href="./css/jquery.bxslider.min.css"> <link rel="stylesheet" href="./css/sample.css"> <link rel="manifest" href="./manifest.json"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="cly7796.net PWA sample"> <link rel="apple-touch-icon" href="./icons/icon-152x152.png"> </head> <body> <div class="contents"> <ul id="slider"> <li><img src="img/img01.jpg" /></li> <li><img src="img/img02.jpg" /></li> <li><img src="img/img03.jpg" /></li> <li><img src="img/img04.jpg" /></li> <li><img src="img/img05.jpg" /></li> </ul> <p>適当にコンテンツの文章<br> 適当にコンテンツの文章<br> 適当にコンテンツの文章<br> 適当にコンテンツの文章<br> 適当にコンテンツの文章</p> </div> <script src="js/jquery-3.4.0.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> <script src="js/script.js"></script> </body> </html>
スライダーはbxSliderを使用するのでjQueryとプラグインのjs/CSSを読み込んでいます。
サンプルページ用のjs/CSSを以下のように記述します。
sample.css
body {
margin: 0;
padding: 0;
}
.contents {
max-width: 800px;
width: 100%;
margin: auto;
}
script.js
$(function() {
$('#slider').bxSlider();
});
Service Workerが登録されるようにHTML内に記述を追加します。
この記述は前回と同じです。
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}
</script>
これでService Workerのファイル以外の準備が完了しました。
ここまでのファイル構成は以下のようになっています。
- css
- images
- bx_loader.gif
- controls.png
- jquery.bxslider.min.css
- sample.css
- images
- icons
- icon-32×32.png
- icon-128×128.png
- icon-144×144.png
- icon-152×152.png
- icon-192×192.png
- icon-256×256.png
- img
- img01.jpg
- img02.jpg
- img03.jpg
- img04.jpg
- img05.jpg
- js
- jquery-3.4.0.min.js
- jquery.bxslider.min.js
- script.js
- index.html
- manifest.json
最後にservice-worker.jsをサンプルページのルート上に設置します。
service-worker.js
var CACHE_NAME = 'PWA-SAMPLE';
var cacheFiles = [
'js/jquery-3.4.0.min.js',
'js/jquery.bxslider.min.js',
'css/jquery.bxslider.min.css',
'css/images/bx_loader.gif',
'css/images/controls.png',
'index.html',
'css/sample.css',
'js/script.js',
'img/img01.jpg',
'img/img02.jpg',
'img/img03.jpg',
'img/img04.jpg',
'img/img05.jpg'
];
self.addEventListener('install', function(e) {
e.waitUntil(
// キャッシュの登録
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(cacheFiles);
})
);
});
self.addEventListener('fetch', function(e) {
console.log('fetch');
});
1行目がキャッシュ名、2〜16行目にキャッシュしたいファイルを指定しています。
18行目がインストールされたときの処理で、19〜25行目でキャッシュの登録を行なっています。
caches.open(キャッシュ名)でキャッシュを開き、cache.addAll(キャッシュファイルのパス)でキャッシュの登録になります。
27行目はページを移動したり更新したときの処理ですが、今回はconsoleの表示のみにしています。
もしページ遷移時に新しくキャッシュするファイルを増やしたい場合、このイベントで設定すると良さそうです。
今回作成したサンプルページのデモページはこちらになります。
【参考サイト】
コメントが承認されるまで時間がかかります。