スターターコードのダウンロードと実行
ウェブアプリマニフェストの作成
AMP サービスワーカーの追加
- サービスワーカーファイルの作成
- AMP ページへのサービスワーカーの自動インストール
キャッシュされる項目のカスタマイズ
- アセットのキャッシュ
- リンクのプリフェッチ
オフラインページの表示
PWA のテスト
お疲れ様でした！

AMP サイトから PWA への変換

プログレッシブウェブアプリはサービスワーカーの力を借りて、様々なネットワーク強度で、リッチなオフライン機能と一貫したユーザーエクスペリエンスを実現しています。ブラウザ内にリソースをキャッシュすることで、PWA は、データ、アセット、およびオフラインページをユーザーに提供し、ユーザーの関心を維持して情報を提供し続けることができます。

このチュートリアルでは、AMP サービスワーカーが提供するウェブマニフェストとサービスワーカーを追加することで、AMP サイトをオフライン機能付きのインストール可能な PWA に変換する方法を学習します。

スターターコードのダウンロードと実行

スターターコードをダウンロードします。

ローカルウェブサーバーを使用して、ウェブサイトをプレビューします。

ヒント – 簡易ウェブサーバーの場合は、python -m SimpleHTTPServer を実行します。

Lyrical Lightning という Mobile Music Magic フェスティバルのランディングページが表示されます。ホームページには、バンドの演奏スケジュールとステージが表示されたリンクがあります。

スケジュールへのアクセスが発生する可能性の高いイベント会場では、サイトのユーザーのネットワーク接続にはむらがあります。このため、ユーザーのホーム画面にインストールして、オフラインでもすべての重要な機能を提供できるように、このサイトを PWA に変換するのが最適と言えます。

ウェブアプリマニフェストの作成

ウェブアプリマニフェストは、ウェブアプリケーションに関する情報とユーザーのモバイルデバイスやデスクトップに「インストール」される場合にどのように動作するのかをブラウザに示す単純な JSON ファイルです。「ホーム画面に追加」プロンプトを示す場合、多くのブラウザでは、マニフェストが必要となります。

以下のコードを使用して、manifest.json というファイルをリポジトリに追加します。

{
"short_name": "LyLy",
"name": "Lyrical Lyghtning",
"icons": [
{
"src": "./images/amplogo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/amplogo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#222325",
"display": "standalone",
"scope": "/",
"theme_color": "#222325"
}

AMP サービスワーカーの追加

サービスワーカーは、ウェブページとは別にバックグラウンドでブラウザが実行するスクリプトで、リクエストをキャッシュしてパフォーマンスを改善し、オフライン機能を提供するすることによって、ブラウザの機能を拡張します。始めからサービスワーカーを構築することもできますが、AMP は AMP サービスワーカーを提供しており、AMP スクリプト、アセット、およびドキュメントのキャッシュだけでなく、ナビゲーションのプレロードといった一般的なベストプラクティスの実装など、多数のステップを直接自動化することができます。

AMP サービスワーカーは、インストールされると、ユーザーがリクエストするたびに、自動的に AMP スクリプトとドキュメントをキャッシュするようになります。基本的な AMP サービスワーカーの追加から始めてみましょう。

サービスワーカーファイルの作成

sw.js というファイルを作成して、以下のコードを追加します。

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init();

たった 2 行のコードで、AMP サービスワーカーをユーザーのサービスワーカーにインポートして初期化することができます。

AMP ページへのサービスワーカーの自動インストール

AMP ウェブサイトは、<amp-install-serviceworker> コンポーネントを使用して、ユーザーがコンテンツを楽しむ間にブラウザのバックグラウンドにサービスワーカーをインストールします。

index.html の head に必要なスクリプトタグを配置し、<body> に <amp-install-serviceworker> を配置します。

…

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

…
...
<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

</body>

Important – The service worker should be served from the root directory (/sw.js) to be able to cache all the content of your site.

The <amp-install-serviceworker> installs the service worker by creating an iframe and running the data-iframe-src file. Create the install-sw.html file and add the following code:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
 if('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw.js');
 };
</script>

iframe は、AMP サービスワーカーファイルをブラウザに登録します。

キャッシュされる項目のカスタマイズ

AMP サービスワーカーには、ユーザーが構成可能なオプションのフィールドを提供し、アプリのニーズに合わせて最適化できるメリットがあります。

音楽祭アプリは、画像アセットをキャッシュし、ラインアップのリンクを事前にフェッチし、オフラインページを指定することができます。

アセットのキャッシュ

画像、動画、およびフォントなどのアセットをキャッシュするように、AMP サービスワーカーを構成することができます。これを使用して、背景画像と AMP ロゴをキャッシュすることにします。sw.js ファイルを開いて、以下のコードで更新します。

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}]
});

キャッシュストラテジーを cache first に指定しました。これは、アプリがネットワークにリクエストする前に、先にキャッシュから配信しようとすることを意味します。背景画像や AMP ロゴを更新することはないため、特にこのアプリではこれが役立ちます。

リンクのプリフェッチ

AMP サービスワーカーは、data-rel=prefetch 属性のあるリンクをプリフェッチします。このため、以前に訪問したことのないページでもオフラインで表示することができるようになります。この属性を lineup.html のリンクタグに追加することにします。

...
<a href="/lineup.html" data-rel="prefetch">See Full Lineup</a>
...

オフラインページの表示

プリフェッチしなかったページへのリンクで予期しなかったケースやクリックに対応するために、汎用的なブラウザのオフラインページを表示する代わりに、一貫した「オンブランド」のユーザーエクスペリエンスを提供するオフラインページを追加します。offline.html をここからダウンロードして、sw.js を以下のコードに更新します。

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
offlinePageOptions: {
url: '/offline.html',
assets: []
}
});

PWA のテスト

Chrome DevTools を使って、AMP サービスワーカーが必要なアセットをキャッシュし、理想とするオフラインソリューションを提供していることをテストすることができます。

Windows では Ctrl + Shift + I キー、Mac では Cmd + Opt + I キーを押して、DevTools パネルを開き、Lyrical Lyghtning をテストしてみましょう。また、ページを右クリックして、メニューから inspect を選択することもできます。Application を選択すると、サービスワーカーの登録が表示されます。

offline ボックスをクリックして、オフラインモードに切り替えます。see full lineup リンクをクリックして offline.html に移動し、適切にキャッシュされ、プリフェッチされているかどうかを確認します。

ヒント – プログレッシブウェブアプリの機能の完全分析を行うには、Google の Lighhouse tool を使ってレポートを生成することができます。

お疲れ様でした！

AMP で PWA を作成しました。このチュートリアルでは、以下の内容について学習しました。

ウェブアプリマニフェストの作成
amp-install-serviceworker による AMP へのサービスワーカーのインストール
AMP サービスワーカーのカスタマイズ
リンクのプリフェッチ
オフラインページの作成

さらに、サービスワーカーとオフライン UX に関する考慮事項をお読みください。分析によるエンゲージメントの追跡方法を学習し、AMP ページ用の基本分析の構成方法を説明したチュートリアルを実行してください。

Written by @crystalonscript