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自体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"です…まんま過ぎて萎えます、センスを疑いますｗ

実装記述例

AMP用ServiceWorker読み込みタグ

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

1	<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

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

<amp-install-serviceworker src="https://xxxx/ServiceWorker.js" data-iframe-src="https://xxxx/ServiceWorker.html" layout="nodisplay">

1	<amp-install-serviceworker src="https://xxxx/ServiceWorker.js" data-iframe-src="https://xxxx/ServiceWorker.html" layout="nodisplay">

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

manifest.json

<link rel="manifest" href="/manifest.json">

1	<link rel="manifest" href="/manifest.json">

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

{
  "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
}

{

"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

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

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

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

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

<!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>

<!doctype html>

<html>

<head>

<title>ServiceWoker</title>

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