ブロックチェーン・AI・システム開発の株式会社INDETAIL

AMP構築でPWA(A2HS・ServiceWorker)実装する際に少しだけハマった件

2019.01.21
nanba

今回のテーマでは、AMP構築サイトにAdd to Homescreen(PWA)を組み込む場合のちょっとした注意点をまとめたいと思います。

サラリとPWAについて

『Progressive Web Apps』の略で、Webサイトをスマートフォン向けアプリのように使える仕組みです。
ServiceWorker、PushNotification、WebManifestなどをウェブアプリに導入することで、ネイティブアプリに近い操作性(パフォーマンスやユーザーエクスペリエンス)を提供することを可能にします。

また、これら機能に対応していないブラウザに対しては、従来通りのウェブサイトとして提供されるので実装するデメリットは、極めて少ないかと思います。

対応ブラウザ

  • Chrome45以降対応(一部機能は40以降から実装済み)
  • FireFox44以降対応
  • Microsoft IEは未対応・Microsoft Edge17以降対応
  • SAFARI11.1以降対応(iOS SAFARI11.4以降対応)

ServiceWorkerについて

  • ServiceWorker自体httpslocalhost上でしか動作しません
  • ブラウザがWebページとは別にバックグラウンドで実行するスクリプトで、ファイルの指定先読み込みなどが可能になります
  • オフラインのアプリを実現・サポートするために作られたものです
  • ServiceWorkerはブラウザが必要に応じて起動・終了するので、変数の値を保持できません

WebManifestについて

  • 『ホーム画面に追加』用インストールバナーの設定
  • 上記インストールバナーや、ユーザーホームアイコンや、スプラッシュ画面にて使用する画像の設定(最大値である512×512pxのpngファイルが必要)
  • スプラッシュ画面での背景色の設定
  • デバイスの向きの設定
  • ブラウザUIの表示・非表示の設定

WebManifestの各パラメータについて

パラメータ 説明
name ウェブアプリのインストールバナー表示時に表示されるテキスト
short_name ユーザーのホーム画面にボタン追加された際のアイコンキャプション
theme_color ツールバーなどの色を設定
background_color スプラッシュ画面の背景色設定
display 表示タイプをカスタマイズする
standalone / fullscreen / browser / minimal-ui
orientation ページの最初の向きを指定する
landscape(デバイス横向き表示)
Scope ナビゲーションのスコープ(領域)
start_url アプリ開始場所の相対URL
icons ユーザーホームアイコンや、スプラッシュ画面に使用される画像設定

Add to Homescreenが出現する条件(理論値)

  • manifest.json(WebManifest)が適切に設定されていること
  • マニフェスト内のディスプレイモード(display)がstandalonefullscreenに設定されていること
  • サイトにServiceWorkerが登録されていること
  • HTTPS経由で配信されていること
  • 【5分以上の間隔をあけ2度目のアクセス時に出現】という情報が多いようです(微妙な情報です…)

ウェブアプリインストールバナーの最新の条件については、こちらをご覧ください。

Add to Homescreenの実装

  1. manifest.jsonを読み込む
  2. ServiceWorker.jsを読み込む
  3. Android端末でニュルっと出てきて小躍りする

実装内容的には非常に簡単で単純な作業で終わります。
先述の通りブッチャケ上記実装したことによるデメリットは、ほぼほぼないに等しいと思うので、全案件・サイトに施策してもよいのでは?って思う今日この頃です。
ですがAMP構築サイトの場合は、ServiceWorker・AMPどちらの仕組みもある程度理解していないと、簡単にハマります…
AMP…なかなかの曲者です。

AMPだとハマったりする理由

AMPは独自のキャッシュシステムを使用するので、検索サイトからやってきたほとんどの閲覧者は本来のAMPページ(構築して表示されるドメイン)ではなく、AMP CDNのキャッシュからAMPページが配信されます。
(本来のAMPページではなく、GoogleのAMP CDNのドメインからAMPページが返されます)
なのでドメインが異なるためServiceWorkerのJSを読み込めず、Add to Homescreenは発動されないという症状に陥ります。

AMP構築でAdd to Homescreenを実装する対応策

AMP構築したことがある方ならピンとくるかもですが、AMPでは独自jsが使用できない代わりに、様々なAMPコンポーネントが用意されています。
今回登場いただくのはdata-iframe-src属性です。
data-iframe-srcで、ServiceWorkerをインストールさせるページURLを指定しておきます。
すると、たとえGoogleのAMP CDNキャッシュからAMPページが配信されたとしても、そのURLをもとにしてServiceWorkerをインストールしてくれるのです。
data-iframe-src属性を使用可能にするには、いつものごとくAMP独自拡張タグが必要になります。
それがcustom-element="amp-install-serviceworker"です…まんま過ぎて萎えます、センスを疑いますw

実装記述例

AMP用ServiceWorker読み込みタグ

他のAMP拡張タグと同じく、head内に記述します、記述位置は最下部あたりが望ましい

インストールさせるhtmlファイルの指定です、記述位置はbody閉じタグ直前が望ましい(ファイル名や階層などは任意です)

manifest.json

上記のようにhead内にてmanifest.jsonを読み込む(ファイル名や階層などは任意です)

書き方は前述した『WebManifestの各パラメータについて』を参照してください。
まぁ普通のjson的な書き方です。
生成してくれる便利なジェネレータあります→こちら

serviceworker.js

Add to Homescreenの実装のみであれば、未記述でもOKという文献もありますが、念のため空のfetchイベントを記述しておけば無問題です。

インストールさせるhtmlファイル

(ファイル名や階層などは任意です)

AMP構築でA2HS実装例

北海道の白いダイヤと称される柴吉さんが可愛いだけの検証ページ
※ちなみに柴吉さんは我が家の愛犬です…お察しの通り

北海道の白いダイヤと称される柴吉さんが可愛いだけの検証ページ

スクリーンショット撮る際にミスってボリューム調整が表示されてますが…
きちんとニュルっとA2HSできてます( ̄^ ̄)ゞ

まとめ

AMP構築に関しては、初期のころに比べてAMPコンポーネントが続々と追加されて、ニュースサイトのみならず、適用サイト特性範囲が増えていると感じます。
やはり表示速度が爆発的に早くなるメリットと、MFIが正式に実装された検索エンジン対策として、サイト構築する際には、今後も選択肢の一つとしてAMPは外せないと思います。
さらに強調スニペットに引用されるページがAMPだった場合、検索結果から引用された部分にダイレクトに遷移します!さらにさらに引用部分はハイライト表示されるという仕様に!これって何気に便利です!
益々AMP構築のメリットを感じます。(まぁそうなるように仕向けられているのでしょうが…)

そして、やはりPWAもこれから対応ブラウザ・デバイスが増えていき、益々使いやすい環境・仕様が整えば、非常に便利なものだと思います。
個人的には、このあたりの動向を見極めつつ、さらに知見を増やしていきたい技術だと思いますので、周囲に情報発信しつつ、信者を増やしていこうと思います。

nanba

INDETAILには珍しいチカラワザ系コーダー

「いいね」ボタンを押すと、最新情報をすぐに確認できます。