PWA(A2HS)について調べたメモ

プロジェクトで導入を検討していたので調査したが実装にいたらなそうなのでメモだけ残す

Add To HomeScreen (A2HS)とは、「ホーム画面に追加」のことである。

参考URL

ホーム画面に追加 – アプリセンター | MDN

サポート状況

manidest | Can I use… Support tables for HTML5, CSS3, etc
serviceWorker | Can I use… Support tables for HTML5, CSS3, etc

このへんで動く

• モバイルでのバージョン31以降のChrome/Android の Webview
• バージョン32以降のAndroid用Opera
• バージョン58以降のAndroid用Firefox
• iOS 11.3(iOS11.3ベータ)に搭載されているsafari

必要な要件

導入の際には、以下3つに対応している必要がある
1. web manifest
2. serviceWorker
3. 2の利用に伴いhttpsの通信（localhostであれば稼働可能）

2,3は後述する「ウェブアプリのインストールバナー」を表示する際の必須要件であり
chromeやsafariのメニューから「ホーム画面に追加」を操作して登録する場合は、1のみで実現する。

1. web manifest

https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja

manifest.jsonだったりxx.manifestだったりする模様。
A2HSからのアクセスを判別したければ、start_urlのURLにパラメーターをつけるのがよさそう。

2. serviceWorker

serviceworkerが登録されているだけでよい。
かといって何も書いていないserviceworkerファイルを登録するのは・・・と思ったら、空のfetchイベントリスナーでも登録しておく。

self.addEventListener('fetch', function(event) {});

ウェブアプリのインストールバナー

https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja

AndroidのChrome42以上で次の条件を満たすと、自動的にバナーが表示される。

• 次の情報が記述されたウェブアプリ マニフェスト ファイル(manifest.json)が存在する。
  • short_name（ホーム画面で使用）
  • name（バナーで使用）
  • 192×192 の png アイコン（アイコンの宣言には MIME タイプ image/png の指定が必要）
  • 読み込み先の start_url
• サイトに Service Worker が登録されている。
• HTTPS 経由で配信されている（Service Worker を使用するための要件）。
• 2週間以内に2回そのページに訪問し、そのアクセスに5分以上の間隔がある。
• すでにA2SHされていない（そのページ・サイトのホーム画面アイコンが作られていない）

アイコンが404になっていたりするだけで、ホーム画面追加が動かないので注意する。

bannerinstallpronpt

ウェブアプリのインストールバナーが表示される際に発火されるイベント
このイベントのリスナーを記述することでウェブアプリのインストールバナーの制御ができる

window.addEventListner('beforeinstallprompt', e => {
    console.log('stop banner display');
    e.preventDefault();
    return false;
})

BeforeInstallPromptEvent.prompt()で開くので
一度preventDefaultで表示を抑制し、なんかしらの処理を終えた後にprompt()を呼び出すみたいな形で
ウェブアプリのインストールバナーの表示を後で出すというのもできる。

ユーザーがapp install bannerに対してとったリアクションも判別できるので、効果測定に使えそう。

window.addEventListner('beforeinstallprompt', e => {
  e.userChoise.then(choiceResult => {
    console.log(choiceResult.outcome);
    if(choiceResult.outcome === 'dismissed') {
      console.log('user cancelled')
    } else {
      console.log('user added')
    }
  })
})

Chrome68以降はA2HS bannerからMini-infobarに

google的にはゆくゆくはchromeオムニボックス（アドレスバーのところ）にA2HSインストールアイコンを表示させたいそう。
https://developers.google.com/web/updates/2018/06/a2hs-updates

ページ下部に表示されるバナーの大きさが1/3くらいの大きさになる
ユーザーがmini-infobarを明示的に閉じるとしばらく（デフォルト三ヶ月）出現しなくなる
ユーザーがmini-infobarで追加を選択すると「A2HS dialog」というボックスが出現する。

beforeinstallprompt イベントを呼び出したり、Chrome のメニューからユーザーが「ホーム画面にアイコンを追加」を実行したりしたときも A2HS ダイアログは出現する。

ウェブアプリマニフェストのdisplay typeでA2HSしたアイコンから立ち上げた時の挙動が変わる

displayは現在4タイプ存在し、振る舞いが大きくかわるので検証した。

検証結果を読むにあたっての前提条件

• ウェブサイトがbasic認証下にある状態で検証
• ブラウザからの初回アクセス時にinputから入力したテキストをcookieで保持している（この状態を「ログイン」とする）

検証デバイス

• iPhone6s / iOS 11.3 / Safari
• Nexus 5 / Android 4.4 / Chrome

browser

従来のブックマーク同様、ブラウザが立ち上がる。その際、manifest.jsonのstart_urlに指定したURLにアクセスされている。

standalone

minimal UI

Androidのみ動作

fullscreen

Androidのみ動作

所感

よさそう

• ウェブアプリマニフェストのdisplay設定によってはブラウザの機能が制限されるので、アドレスバーからの流出も減りそう。見た目がネイティブアプリっぽくできる。

きになる

• 手軽にネイティブアプリっぽいものが作れる一方で、一部ブラウザ機能（主にタブ）が使用できなくなるし、iOSに限って言うと「戻る」ナビゲーションも出なければスワイプでページ遷移もできないのでUXが・・・
• 現段階ではブラウザによってウェブアプリマニフェストの解釈が異なる。（iOS/Safariではfullscreen, minumal UI対応してないなど）
• 別ウインドウで開くリンク(target=blank)は別途ブラウザが開く
• macOSだとランチャー画面、winだとスタートメニューにアイコンが追加されるけど、開くのはただのChrome
• ウェブアプリのインストールバナーはChromeだけなので、iOSではどうやってホーム画面追加できることを伝えよう
• ブラウザの実装に挙動が左右されちゃうので、standaloneでアプリっぽくしようとか考えてしまうと普通のwebアプリを作るよりはるかに辛そう