PWA(Progressive Web Apps)とはWebページがアプリのようにインストールできてオフラインでも動作する機能です。
Androidはかなり対応している機能が多いですが、iPhone(iOS)は対応している機能が少ないです。
メインとなるHTMLファイル
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- マニフェストファイルを指定する --> <link rel="manifest" href="manifest.json"> <!-- アドレスバー等のブラウザのUIを非表示 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- ホーム画面に表示されるアプリアイコン --> <link rel="apple-touch-icon" href="icon144x144.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script> //サービスワーカーの登録 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js',{scope: '/javascript/pwa/'}) .then(function(reg){ console.log('ServiceWorkerの登録成功 スコープ: ', reg.scope); }).catch(function(err){ console.log('ServiceWorkerの登録失敗: ', err); }); } </script> </head> <body> PWAアプリのコンテンツ </body> </html>
manifest.json ファイルについて
- start_urlはホーム画面を追加する際の URL
- short_name の設定は必須らしい
- 144x144 のサイズのアイコン設定が必須らしい
- display は Webアプリをどのように扱うかを指定するもので
fullscreen, standalone, minimal-ui, browser のいずれかを指定する
{
"lang":"ja",
"name" : "Webアプリケーションの名前を入れる",
"short_name" : "Webアプリ名",
"display" : "standalone",
"start_url" : "https://mam-mam.net/javascript/pwa/",
"background_color": "#FFFFFF",
"theme_color" : "#FFFFFF",
"icons": [
{
"src" : "icon192x192.png",
"sizes": "192x192",
"type" : "image/png"
},
{
"src" : "icon144x144.png",
"sizes": "144x144",
"type" : "image/png"
}
]
}
service-worker.js ファイル
//キャッシュの名前
var CACHE_NAME='pwa-cache-name';
//キャッシュ対象URL一覧配列
var cacheURLs = [
'/javascript/pwa/',
];
//インストール処理
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(cacheURLs);
})
);
});
//リソースフェッチ時のキャッシュロード
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response){
return response || fetch(event.request);
})
);
});