PWA（Progressive Web Apps）は、Webサイトをアプリのように使えるようにする仕組みです。対応することによりWebサイトに対してホーム画面にアイコン追加、プッシュ通知やオフライン対応が可能になります。
Webサイトを簡易に携帯アプリ化したように見せるときに有効です。
いくつか注意があります。
※現時点ではAndroidは正しく動きますが、iosはまだ動きません。
※httpsである必要があります。
※マーケットからアプリを取得するわけではなく、Webサイトに訪問してもらってから追加となります。
今回はホーム画面にアイコンを追加の対応について試してみます。
①httpsのページを用意
httpsのページを用意します。
いったんindex.htmlの中身は以下です。
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> こんにちは </body> </html> |
②manifestファイル作成
manifest.jsonを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "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" } |
アイコンはimagesフォルダ配下に配置を想定
name：アプリ名称
short_name：アプリ省略名称（ホーム画面で表示されます）
icons：アイコン（ホーム画面に表示されるアイコン）
start_url：アプリを開いたときのURL
display：表示形式（standaloneの場合アドレスバーが消えます。）
theme_color：テーマカラー
※設定の詳細は以下を参照
https://www.w3.org/TR/appmanifest/
③serviceWorker.jsファイル作成
serviceWorker.js
|
1 2 |
self.addEventListener('fetch', function(event) { }); |
ホーム画面にアイコン表示だけの場合、特に中身に詳細を書く必要はありませんが。
空だと正しく動かないようです。
④index.htmlにmanifestとserviceWorker.jsを読み込む
index.html
|
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 |
<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) { console.log("serviceWorker registed."); }).catch(function(error) { console.warn("serviceWorker error.", error); }); } }); </script> </head> <body> こんにちは </body> </html> |
この時点でchromeの開発者ツール（F12）を表示すると以下のようにみえています。
表示されていなかったりコンソールにエラーが表示されている場合は、どこかのファイルでミスがあります。
⑤androidで表示する
androidで表示すると画面下に「ホーム画面に追加」が表示されます。
追加をクリック
ホーム画面にアプリのようなアイコンが表示されます。
アイコンをクリックすると以下のような画面が表示されます。
簡単にできました。既存のWebサイトをアプリ化するために、WebViewのみのアプリを作成するよりはいいかもしれません。
はやくiosでも対応してほしいものです。
以上です。