Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

AMP サイトから PWA への変換

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

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

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

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

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

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

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

Image of PWA

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

… ...




**重要 –** サイトのすべてのコンテンツをキャッシュできるようにするには、サービスワーカーをルートディレクトリ(`/sw.js`)から提供する必要があります。
`<amp-install-serviceworker>` は、iframe を作成して、`data-iframe-src` ファイルを実行することで、サービスワーカーをインストールします。`install-sw.html` ファイルを作成して、以下のコードを追加します。 [sourcecode:html] <!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 を作成しました。このチュートリアルでは、以下の内容について学習しました。

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