Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

PWA としてのサンタトラッカー

概要

「サンタを追いかけよう」は、2016 年のホリデーシーズンに向けて、オフラインのプログレッシブウェブアプリに急速にアップグレードされました。既存のシーンデザインのおかげです

結果

サンタは、ホーム画面への追加（ATHS）とオフラインをサポートするプログレッシブウェブアプリ（PWA）です
対象となるセッションの 10% が ATHS アイコンから開始
ユーザーの 75% が、ウェブコンポーネントの 2 つの主要部分であるカスタム要素と Shadow DOM をネイティブにサポート
Lighthouse のスコア 81
オフラインは、Service Worker API による遅延読み込みに関連付けられており、訪問したシーンのみをキャッシュに保存し、新しいリリースで通知なくアップグレードします。

背景

「サンタを追いかけよう」は、Google のホリデーシーズンのお祭りです。毎年 12 月中は、ゲームや学習体験でホリデーシーズンをお祝いできます。サンタが一休みしている間に、妖精たちは「サンタを追いかけよう」をウェブ上と Google Cloud 上でのオープンソースの Android。

ウェブ上にある「サンタを追いかけよう」は、 Polymer - 最新のブラウザのほとんどをサポートします。ユーザーのブラウザが「最新」かどうかの評価特徴検出によって決定されます。サンタに必要なもの Set および Web Performance API などできます。

2016 年、Google は「サンタを追いかけよう」の背後にあるエンジンをアップグレードし、できます。 YouTube 動画に基づくシーンや、サンタの現在地に関するシーンは除外されます。もちろん、北極に直接つながっている場合にのみ利用できます。📶☃️

課題

スマートフォン、タブレット、パソコンで適切に機能するレスポンシブデザインが採用されています。サイトは、スタイリッシュなビジュアルやホリデーをテーマにした音声など、優れたマルチメディアで楽しめます。しかし、通常のビルド「サンタを追いかけよう」は数百メガバイトです。これにはいくつかの理由があります。

サンタは 35 以上の言語に対応しているため、多くのアセットを複製する必要があります。
プラットフォームが異なれば、サポートするメディアも異なります（mp3 と ogg など）。
マルチメディアファイルは、サイズや解像度が異なる場合があります。

サンタの妖精たちも 12 月中も一生懸命働き、新しい重要なアップデートを頻繁にリリースします 1 か月中つまり、ユーザーのブラウザですでにキャッシュされているアセットは、再アクセス時に更新が必要になることがあります。

これらの課題は次のとおりです。

さまざまな「シーン」向けの大規模なマルチメディアリソース
1 か月の間にリリースされた変更

...その結果、単純なオフライン戦略では不向きになっていました。

サンタ（ポリマー製）

その前に、サンタさんの全体的なデザインについて話してみることをおすすめします。オフライン PWA にアップグレードしました

サンタは、もともと Polymer 0.5 で書かれたシングルページのアプリケーションですが、現在は Polymer にアップグレードされました。 1.7. サンタは、ルーターやナビゲーションアセットなど、共通のコードセットで構成されています。また、独自の「シーン」も多数あります。

各シーンには異なる URL（/village.html、/codelab.html、 /boatload.html - 独自のウェブコンポーネントです。ユーザーがシーンを開くと、必要なすべての HTML とアセット（画像、音声、CSS、js）がプリロードされます。これは、サンタを追いかけようリポジトリの /scenes/[[sceneName]] の下にあります。その間、ユーザーには進行状況を示すわかりやすいプリローダーが表示されます。

このアプローチにより、ユーザーに表示されていないシーンに不要なアセットを読み込む必要がなくなります。（大量のデータ）。また、内部の「キャッシュマニフェスト」を保持する必要があることも意味します。すべてのアセットをできます。キャッシュマニフェストは、ファイル名から MD5 ハッシュへのマッピングを格納する JSON ファイルです。できます。

使用した分を読み込む

このモデルは帯域幅を節約し、ユーザーがアクセスするシーンに必要なリソースのみを提供します。サイト全体を一度にプリロードするよりおすすめですサンタを追いかけよう、カスタム要素のアップグレードは Polymer の機能を活用して実行時ではなく、読み込み時間が短縮されます次のコードについて考えてみましょう。

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

サンタを追いかけようは、次の手順でシーンを読み込みます。例:boatload-scene:

すべてのシーン要素（<boatload-scene> を含む）は最初は不明であり、すべて HTMLUnknownElement といくつかの追加属性。
選択したシーンが変更されると、<lazy-pages> 要素に通知されます。
<lazy-pages> 要素がシーンの要素と path 属性を解決し、HTML を読み込む scenes/boatload/boatload-scene_en.html をインポートします。これには、Polymer 要素とそれに依存する要素が含まれます。
わかりやすいプリローダーが表示されます。
HTML インポートが読み込まれて実行されると、<boatload-scene> は透過的に本物の Polymer 要素を使って、ホリデーシーズンを満喫しましょう。🎄🎉

このアプローチには課題があります。たとえば、重複するウェブコンポーネントを含めないようにします。 2 つのシーンで共通の要素（paper-button の場合は、ビルドの一環として削除します。サンタの共有コードに含めます

オフラインデザイン

「サンタを追いかけよう」は、Polymer と lazy-pages のおかげで、すでにシーンに分割されています。プラスごとに独自のディレクトリがあります「サンタを追いかけよう」の Service Worker を設計しました。これは、ユーザーのブラウザで、共有コードと「シーン」とあります。

Service Worker の背景にある理論は何ですか？サポートされているブラウザのユーザーがサイトを読み込むと、フロントエンド HTML は、Service Worker のインストールをリクエストできます。「サンタを追いかけよう」の場合、Service Worker は /sw.js にあります。これにより install イベントが発生し、サンタの共有コードはすべて事前キャッシュされるため、何もする必要はありません。実行時に取得されます

Service Worker をインストールすると、すべての HTTP リクエストをインターセプトできるようになります。「サンタを追いかけよう」の判断フローを簡略化すると、次のようになります。

リクエストはすでにキャッシュに保存されていますか？
- これでキャッシュに保存されているレスポンスを返します。
リクエストは「scenes/boatload/boatload-scene_en.html」などのシーン・ディレクトリーと一致しますか？」
- ネットワークリクエストを実行し、結果をキャッシュに保存してからユーザーに返す。
それ以外の場合は、通常のネットワークリクエストを実行します。

このフローと install イベントにより、ユーザーがオフラインの場合でもサンタ追跡をロードできます。ただし、選択できるのはユーザーが以前に読み込んだシーンのみです。試合をリプレイしてハイスコアを制するのに最適です。

Google のキャッシュ戦略では、コンテンツの変更が許されないことに注意が必要です。一度ユーザーのブラウザにキャッシュされたファイルは変更されません。詳しくは後で説明します。

対面で実施

先に述べたように、サンタの妖精たちは 12 月中ずっと一生懸命働いていて、しばしば解放を余儀なくされます 1 か月の間に新しいアップデートが提供されます「サンタを追いかけよう」のリリースをビルドすると、固有のラベル（例:v20161204112055、リリースのタイムスタンプ（2016 年 12 月 4 日の 11:20:55）

このラベル付けされたリリースでは、すべてのファイルの MD5 ハッシュを生成し、これを「キャッシュ」に保存します確認します。最新のソリッドステートディスクでは、ビルドプロセスにかかる時間が数秒で完了します。

各リリースは、Google の静的キャッシュサーバー上の一意のパスにデプロイされます。つまり、古いリリースは削除されません。つまり、新しいリリース後は、すべてのアセットに異なる URL が割り振られます（たとえそうでないものも含む）ブラウザや Service Worker によってキャッシュされたものは、手間がかかります。

「prod」と呼ばれる新しいバージョンのデプロイも行います。リソース - サンタのインデックス HTML とサービス Worker は https://santatracker.google.com/ から入手できます。これにより、古いバージョンが上書きされます。

「サンタを追いかけよう」が読み込まれるたびに、ブラウザは Service Worker が更新されているかどうかを確認し、できます。この例では、リリースごとにバイトが異なるコードが生成されます。ブラウザではこれをアップグレードとみなし、新しい install イベントを実行します。

この時点で、ユーザーのブラウザでは新しい「キャッシュマニフェスト」が確認されます。これはユーザーの既存のキャッシュと比較され、アセットの MD5 ハッシュが異なる場合は、キャッシュから削除してブラウザに再取得するよう要求します。ただし、ほとんどの場合、キャッシュに保存されたコンテンツはほぼ同じであるか、わずかな違いしかない場合があります。

「サンタを追いかけよう」では、Service Worker をアップグレードすると、ユーザーのブラウザがすぐに再読み込みされます。

オフラインブラウジングエクスペリエンス

もちろん、オフラインエクスペリエンスをサポートするために UI もいくつか変更し、ウェブサイトがオフラインで動作することを予期していなかったユーザーでも簡単に理解できます。

オフラインでブラウジング中であることを示す小さなバナーが表示されます。キャッシュに保存されていないシーンはすべて「フリーズ」するクリック不可にしますこれにより、ユーザーは利用できないコンテンツにアクセスできなくなります。

サンタを追いかけようは、定期的にサンタの API にリクエストを送信します。これらのリクエストが失敗した場合、またはタイムアウトした場合、ユーザーはオフラインであるとみなされます。 Google では、ブラウザの組み込みの navigator.onLine ではなく、この API を使用します。プロパティ: これはユーザーがオンラインかどうかを知ることができます。（これは Lie-Fi とも呼ばれます）。

国際的なつながり

ユーザーの大部分は英語を話します（その次が日本語、ポルトガル語、スペイン語、フランス語）です。Santa は 35 以上の言語で構築、リリースされています。

ユーザーがサンタを追いかけようを読み込むと、ブラウザの言語その他の手がかりに基づいて翻訳する言語を選択できます大部分のユーザーがこの言語を上書きすることはありません。ただし、ユーザーが選択ツールで新しい言語を選択した場合、アップグレードは上の例と同じように、新バージョンの「サンタを追いかけよう」が利用できるようになりました。

つまり、現行バージョンの「サンタを追いかけよう」は、Service Worker での使用を目的としています。実際には (build,language) のタプルです。

ホーム画面に追加

サンタはオフラインで動作し、Service Worker を提供するため、対象ユーザーはホーム画面に表示されます。 2016 年には、対象となる負荷の約 10% がホーム画面のアイコンによるものでした。

まとめ

「サンタを追いかけよう」をオフライン PWA に迅速に変換し、信頼性の高い魅力的なアプリを開発できました。既存のシーンデザインのおかげで、Polymer と説明します。また、Google のビルドシステムを活用して効率的なアップグレードを行い、変更されたアセットのみを無効にします。

サンタは大部分がカスタム開発されたソリューションですが、その原則の多くは Polymer に説明されています。プロジェクトのアプリツールボックス。新しい PWA をゼロから構築する場合は、場合は、ワークボックスライブラリ。