#はじめに
PWAとは何ぞや？というのは「はじめてのプログレッシブ ウェブアプリ」などを見て頂くとして、この中でインストールについて試してみた。
インストールバナーについては「ウェブアプリのインストール バナー」など。
#やってみる
注意点として、一度インストールを保留またはキャンセルすると、ページを更新してもバナーは表示されなくなります。
もしも再インストールしたければ「ウェブアプリのインストール バナー：アプリのインストール バナーのテスト」の手順を行う必要があります。
インストール方法は、以下のページの「PWA（インストール）」リンクを開くとインストールバナーが表示されるはず。
（AndroidのChromeのみ？）
#やりかた
とりあえずmanifest.jsonとserviceWorker.jsを作成してサイトルートに設置。
manifest.json
{
"name" : "パンジャン",
"short_name" : "パンじゃん",
"description" : "パンジャンじゃん",
"start_url" : "/",
"display" : "standalone",
"orientation" : "any",
"background_color" : "#00FF00",
"theme_color" : "#FF0000",
"icons": [
{
"src" : "/icon.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}
serviceWorker.js
self.addEventListener('fetch', function(event) {
});
今回はAzureに設置してみるのでjsonのMIMEを追加する。
web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
あとはサイトトップのデフォルトページにmanifestへのリンクと少しのJavascriptを記述すればおｋ。
index.html
<html>
<head>
<title>いろいろテスト</title>
<link rel="shortcut icon" href="/icon.ico">
<link rel="manifest" href="/manifest.json">
<style type="text/css">
<!-- body {background-color: #ffffff; -->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<a href="/page01.html">ページ01</a><br /><br />
<a href="/page02.html">ページ02</a><br /><br />
<a href="https://www.google.co.jp">ぐぐる</a>
<script>
window.addEventListener('load', function() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("/serviceWorker.js")
.then(function(registration) {
console.log("serviceWorker registed.");
}).catch(function(error) {
console.warn("serviceWorker error.", error);
});
}
});
</script> </body>
</html>
#所感
- ちょっとした変更で既存サイトにも適用出来てお手軽。
- 表示するタイミングを考えないと概ねキャンセルされそう。
- キャンセルされた際のリカバリ方法が欲しい。
- サイトのトップページに設置しないと反応しないっぽい？インスペクタから強制インストールはいけた。
- "display" : "standalone" だと戻るボタンが表示されない（Androidなら戻るボタンあるからいいけど戻るリンクとか考えた方が良い気がする）
- 別ドメインはアプリ内ブラウザっぽく表示される
といったところ
iOSは現在開発中でそのうち出来るようになるらしいので期待