エンジニアのたまご

エンジニアとして強くなるために北の田舎から上京しました

【3ステップではじめる】PWAによる「ホーム画面に追加」バナーの実装

概要

  • PWAのService Workerを使って、Webサイトに訪れた時に、「ホームに追加する」バナーの表示をする機能を実装をしました
  • 割りと簡単に実装できたので、その方法をご紹介します!

↓こんなバナーが表示されるようになります

f:id:amymd:20171011005901p:plain:w250
Polymer Shop demoのバナー表示例

PWA(Progressive Web Apps)とは

Progressive Web Apps とは、ネイティブアプリに近い操作性や体験を提供することができるWebアプリのことです。

ネイティブアプリはストアからアプリをダウンロードする必要がありますが、PWAではブラウザからアクセスすることで、いつでもすぐにネイティブアプリのように利用することができるという特徴があります(オフラインでもアクセスできたり、プッシュ通知されたり…)

詳しくは下記の記事が参考になります!

developers.google.com

qiita.com

Service Workerについて

PWAの機能であるオフラインキャッシュやプッシュ通知を実装するにあたり必要になるのが、Service Workerです。 Service Workerはブラウザのバックエンドで動作するため、オフラインでも利用することが可能です。

自分もまだ完全には理解できてないですが、Service Workerのライフサイクルなどは下記の記事が参考になりました。

qiita.com

SWの動作環境

最新の動作環境については下記のサイトにアクセスしてご確認ください。 現時点では、Firefox, Opera, Desktop ChromeAndroid Chrome 61以上のみに対応しています。 MS Edge, Safariin Developmentステータスとなっており、将来的には対応されるようになるはずです。

各ブラウザの対応状況 http://caniuse.com/#search=service%20workers

また、HTTPS接続(または localhost)のみで動作します。

【3ステップではじめる】「ホーム画面に追加」バナーの表示

タイトルにもある「ホーム画面に追加」バナーの表示について説明します。

実装方法は、下記のQiitaの記事を参考にしました。 qiita.com

公式ドキュメントは下記となります。 developers.google.com

通知条件

このバナーが表示されるタイミングは、「2回以上のアクセスがあり、そのアクセスに5分以上の間隔がある」ときに、画面下部に表示されます。

また、Service Workerが登録されていることが前提となるため、もしかしたらアプリ内ブラウザなどでは動作しないかもしれません。 詳しい条件については、公式ドキュメントの「条件について」に記載の通りです。 developers.google.com

1. アイコンやアプリ名などの設定を行う:manifest.json

ホームに追加したときのアイコン画像や、表示名などはmanifest.jsonで設定します。 ホームに追加されたアイコンから起動した時の、タブの色をtheme_colorで設定したり、起動時のスプラッシュ画面の背景色をbackground_colorで設定できたりします。

displayではアイコンから起動した時の表示モードをそれぞれ設定することができます。 これにより、スマホアプリのような表示でWebサイトを開くことができます。

表示モード 説明
fullscreen 利用可能な表示エリアがすべて使用され、ユーザーエージェント(chrome)は表示されません。
standalone アプリケーションはスタンドアロンのような外観や操作感になります。これは異なるウィンドウを持つアプリケーションを含めたり、アプリケーションランチャーにアイコンを含めたりすることなどができます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーのようなそのほかの UI を含めることができます。
minimal-ui アプリケーションはスタンドアロンのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザによって異なります。
browser アプリケーションは、ブラウザとプラットフォームに応じて、従来のブラウザタブまたは新しいウィンドウで開きます。これが既定です。

要素の詳細な説明は下記のURLをみてください。

developer.mozilla.org

下記のようなmanifest.jsonファイルを作成し、https://ドメイン名/manifest.jsonでアクセスできるところにアップロードします。

{
    "name": "サイト名",
    "short_name": "ホームに表示されるアイコン名",
    "icons": [
        {
          "src": "//example.jp/images/launcher-icon-2x.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "//example.jp/images/launcher-icon-3x.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "//example.jp/images/launcher-icon-4x.png",
          "sizes": "192x192",
          "type": "image/png"
        }
    ],
    "theme_color": "#7baf27",
    "background_color": "#ffffff",
    "start_url": "/?utm_source=homescreen",
    "display": "standalone"
}

2. serviceWorker.jsを作成する

アプリのドキュメントルート配下(https://ドメイン名/serviceWorker.js)に下記のserviceWorker.jsを作成します。

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

});

「ホーム画面に追加」からはじめる『PWA(Service Worker)』 によると、オフラインキャッシュやプッシュ通知を使わない場合、Service Workerの中身は空でも良い、という記述がありますが、 自分の環境では下記のようなコンソールエラーがずっと出てしまい、ホーム画面通知バナーが表示されませんでした…。

Site cannot be installed: the page does not work offline

空でも良いので、fetchイベントを追加すると正常に動作するようになったため、追加しています。

※参考:https://stackoverflow.com/questions/44886248/add-to-home-screen-web-app-install-banner-not-showing-up-in-my-web-app-and-show

3. 作成したファイルをheaderで読み込む

最後に、1と2で作成したmanifest.jsonserviceWorker.jsを、バナーを表示させたいサイトのトップ(index.htmlなど)のHEADタグで読み込むようにします。

これでバナー表示の準備はすべて完了です!

<link rel="manifest" href="/manifest.json">
<script>
    window.addEventListener('load', function() {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register("/serviceWorker.js");
        }
    });
</script>

デバッグ方法

※あらかじめHTTPS接続可能な環境にアプリがデプロイされてることを前提としています

Android実機からの確認

  1. chrome://flags/#bypass-app-banner-engagement-checks にアクセス
  2. 「有効化」を選択してChrome再起動する

これにより2度目のアクセスでなくてもホーム画面追加バナーが表示されるようになり、デバッグが楽になります。

Desktop Chromeからの確認

PCからもホーム画面追加バナーの表示の動作確認をすることができます。 (実機との表示は異なりますが…)

  1. chrome://flags/#bypass-app-banner-engagement-checks にアクセスし、「有効化」を選択する(これはAndroidと同じ)
  2. chrome://flags/#enable-app-banners にアクセスし、「有効化」を選択する
  3. Chromeを再起動する
  4. ChromeのDev toolからApplicationタブを開き、[Add to Homescreen]をクリックすると、画面上部にバナーが表示される

f:id:amymd:20171011005930p:plain:w500

ちなみにこのChromeの開発者ツールでは、他にもmanifest.jsonの設定やService Workerの動作を確認することができるようです!

気をつけておくこと

公式ドキュメントによると、

注: ウェブアプリのインストール バナーは、最先端のテクノロジーなので、アプリのインストール バナーを表示するための条件は、今後変更される可能性があります。ウェブアプリ インストール バナーの最新の条件については、What, Exactly, Makes Something a Progressive Web App? をご覧ください。

とのことなので、上記のバナー表示条件や、フラグの設定方法等は今後変わる可能性があると思います。 このあたりは臨機応変に対応していく必要がありそうです。