AMP構築でPWA(A2HS・ServiceWorker)実装する際に少しだけハマった件
今回のテーマでは、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自体
https
かlocalhost
上でしか動作しません - ブラウザが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)が
standalone
かfullscreen
に設定されていること - サイトに
ServiceWorker
が登録されていること HTTPS経由
で配信されていること- 【5分以上の間隔をあけ2度目のアクセス時に出現】という情報が多いようです(微妙な情報です…)
ウェブアプリインストールバナーの最新の条件については、こちらをご覧ください。
Add to Homescreenの実装
manifest.json
を読み込むServiceWorker.js
を読み込む- 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読み込みタグ
1 |
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script> |
他のAMP拡張タグと同じく、head内に記述します、記述位置は最下部あたりが望ましい
1 |
<amp-install-serviceworker src="https://xxxx/ServiceWorker.js" data-iframe-src="https://xxxx/ServiceWorker.html" layout="nodisplay"> |
インストールさせるhtmlファイルの指定です、記述位置はbody閉じタグ直前が望ましい(ファイル名や階層などは任意です)
manifest.json
1 |
<link rel="manifest" href="/manifest.json"> |
上記のようにhead内にてmanifest.json
を読み込む(ファイル名や階層などは任意です)
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 |
{ "name": "Hello AMP@柴吉", "short_name": "AMP@柴吉", "theme_color": "#666666", "background_color": "#666666", "display": "standalone", "Scope": "/", "start_url": "/", "icons": [ { "src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, ・ ・ ・ { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null } |
書き方は前述した『WebManifestの各パラメータについて』を参照してください。
まぁ普通のjson的な書き方です。
生成してくれる便利なジェネレータあります→こちら
serviceworker.js
1 2 |
self.addEventListener('fetch', function(event) { }); |
Add to Homescreenの実装のみであれば、未記述でもOKという文献もありますが、念のため空のfetchイベントを記述しておけば無問題です。
インストールさせるhtmlファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <title>ServiceWoker</title> <script type="text/javascript"> var swsource = "https://xxxx/ServiceWorker.js"; if("serviceWorker" in navigator) { navigator.serviceWorker.register(swsource) .then(function(reg){console.log('SW scope:',reg.scope);}) .catch(function(err){console.log('SW registration failed:',err);}); }; </script> </head> <body> </body> </html> |
(ファイル名や階層などは任意です)
AMP構築でA2HS実装例
『北海道の白いダイヤと称される柴吉さんが可愛いだけの検証ページ』
※ちなみに柴吉さんは我が家の愛犬です…お察しの通り
スクリーンショット撮る際にミスってボリューム調整が表示されてますが…
きちんとニュルっとA2HSできてます( ̄^ ̄)ゞ
まとめ
AMP構築に関しては、初期のころに比べてAMPコンポーネントが続々と追加されて、ニュースサイトのみならず、適用サイト特性範囲が増えていると感じます。
やはり表示速度が爆発的に早くなるメリットと、MFIが正式に実装された検索エンジン対策として、サイト構築する際には、今後も選択肢の一つとしてAMPは外せないと思います。
さらに強調スニペットに引用されるページがAMPだった場合、検索結果から引用された部分にダイレクトに遷移します!さらにさらに引用部分はハイライト表示されるという仕様に!これって何気に便利です!
益々AMP構築のメリットを感じます。(まぁそうなるように仕向けられているのでしょうが…)
そして、やはりPWAもこれから対応ブラウザ・デバイスが増えていき、益々使いやすい環境・仕様が整えば、非常に便利なものだと思います。
個人的には、このあたりの動向を見極めつつ、さらに知見を増やしていきたい技術だと思いますので、周囲に情報発信しつつ、信者を増やしていこうと思います。