はじめに

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は現在開発中でそのうち出来るようになるらしいので期待

PWAでインストールを試してみる

はじめに

やってみる

やりかた

所感