簡単な PWA のサイトを作成
PWA を実装してみました！
https通信できることが必須で、glitchというサービスがhttps標準であったため、glitchで試しに作ってみました。
⇒https://test-pwa.glitch.me/
スマホでは、ブラウザアプリの設定メニューにある「ホーム画面に追加」をタップすると、アイコンが追加されます！
ノートPC等では、ブラウザの設定メニューにある「...にインストール」(「検索」と「その他のツール」の間にあるかもしれません)をクリックすると、デスクトップに追加されます。
以下、詳細な設定方法です。
■index.html
headにマニフェストファイルへのリンク設定を、bodyのscriptタグでサービスウォーカーの設定を記述します。
===============================================
<!DOCTYPE html>
<html lang="en">
<head>
：※省略
<link rel="manifest" href="/manifest.json">
</head>
<body>
：※省略
<script>
//ここにJavaScriptを記述していく
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function() {
console.log('サービスワーカーの登録成功');
}).catch(function(err) {
console.log('サービスワーカーの登録ができませんでした：', err);
});
}
</script>
</body>
</html>
===============================================
■manifest.json
このファイルを設定すると、スマホのアプリのように、アイコンをタップして起動できるようになります。
具体的には、下記設定を行います。
===============================================
{
"short_name": "PWAサイト",
"name": "サンプルのPWAサイト",
"start_url": "https://test-pwa.glitch.me/",
"display": "standalone",
"icons": [
{
"src": "<画像ファイルパス>",
"type": "image/png",
"sizes": "192x192"
}
]
}
===============================================
ページ右クリック->「検証」->「Application」タブ->「Manifest」で、設定した情報が表示されていれば、正常にマニフェストファイルが読み込まれています。
■sw.js
サービスウォーカーの設定で、ページの読み込みに関する設定を行います。
===============================================
//キャッシュ名
var CACHE_NAME = 'cache-v1';
//キャッシュに入れるリソースのパス
var urlsToCache = [
'/',
'<画像ファイル>'
];
//インストール状態のイベント処理
self.addEventListener('install', function(event) {
event.waitUntil(
//キャッシュの中に必要なリソースを格納する
caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
//有効化状態のイベント処理
self.addEventListener('activate', function(event) {
event.waitUntil(
//現在のキャッシュをすべて取得する
caches.keys().then(function(cache) {
//新しいキャッシュ以外は削除する
cache.map(function(name) {
if(CACHE_NAME !== name) caches.delete(name);
})
})
);
});
//リクエスト取得状態のイベント処理
self.addEventListener('fetch', function(event) {
event.respondWith(
//リクエストに応じたリソースがキャッシュにあればそれを使う
caches.match(event.request).then(function(res) {
if(res) return res;
return fetch(event.request);
})
);
});
===============================================
最後ですが、参考にしたWebサイトを記載します。
▼paiza開発日誌(PWA入門！JavaScriptで簡単に高速化＆オフライン対応のWebサイト制作チュートリアル！)
PWA の基本的な実装方法を参考にさせていただきました。
▼デスクトップPWAを使ってみた
スマホ以外でネイティブアプリのように動作させる方法が記載されていましたので、参考にさせていただきました。
glitchというサービスがhttps標準であったため、試しに作ってみました。
⇒https://test-pwa.glitch.me/
★ノート新規作成時の残課題について
このノート新規作成時に記載した以下の内容についてですが、「Enable PWA full code cache」がないことが原因ではありませんでした。
===============================================
しかし、ノート PC の Chrome では、「デスクトップPWAを使ってみた」に
記載された、有効にする必要がある 4 つの flag のうち「Enable PWA full code cache」という flag 自体が一覧の中にありませんでした。
そのため、ノート PC で PWA を体感できずでした。
OS は Windows 8 で、Chrome のバージョンは 73 なのに、何故存在しないのだろうか。。
調べてみましたが、現時点では情報がありませんでした。
===============================================
マニフェストファイルに入れていた「//」から始まるコメント行(？)が原因で、マニフェストファイルが正常に読み込まれていないことが原因でした。
「//」から始まるコメント行(？)を削除したら、デスクトップ版Chromeでもデスクトップにアイコンが表示されました。
この記事が気に入ったらサポートをしてみませんか？