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

Service Worker の登録

Service Worker の登録のタイミングに関するベストプラクティス

Jeff Posnick

サービスワーカーウェブアプリへの再訪問を大幅にスピードアップできますが、 Service Worker の初期インストールによってユーザーの初回訪問時のエクスペリエンスを向上させることができます

通常、Service Worker は登録最初のページの読み込みが終わるまではそのコンテンツを最適化すると特にネットワーク接続の遅いモバイルデバイスを使用しているユーザーに対しては、かなりの負荷がかかります。

一般的な登録ボイラープレート

Service Worker の説明を読んだことがある方は、次のようなボイラープレートになります。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

これには、いくつかの console.log() ステートメントが伴うことがあります。または、コード以前の Service Worker 登録への更新を検出し、ユーザーにページの更新を通知しますこれらはわずかな違いで見てみましょう。

では、「navigator.serviceWorker.register」に何か違いはないでしょうか。何かありますか？従うべきベストプラクティスは何か。驚くことではないでしょう（この記事がどちらの場合も、どちらの場合も「はい」と回答します。

ユーザーの初回訪問

ユーザーが初めてウェブアプリにアクセスする場合を考えてみましょう。Service Worker はまだありませんがブラウザには、サービスが提供されるかどうかを事前に知る手段がありません。インストールされます。

デベロッパーは、ブラウザを高速かつ高速にインタラクティブな表示に必要な最小限の重要なリソースのセットをできます。回答の取得を遅らせるものは攻撃者にとって体験までの時間を短縮できます。

ダウンロードした JavaScript や画像をダウンロードしているリクエストが行われると、ブラウザがバックグラウンドスレッドを開始するか、（簡潔にするためにスレッドであると仮定します）。仮定大型のデスクトップマシンではなく携帯電話、スマートフォンです。スピンアップこの追加のスレッドにより、ブラウザの CPU 時間とメモリの競合をインタラクティブなウェブページのレンダリングに消費する可能性があります。

アイドル状態のバックグラウンドスレッドによって大きな違いが生じる可能性は低くなります。では、そのスレッドがアイドル状態ではないものの、ダウンロードするかなどです。CPU やメモリに関する懸念帯域幅不足の心配がなくなり、多くのモバイルデバイスで利用できます。帯域幅は貴重なので、無駄にしないセカンダリリソースを同時にダウンロードすることで、重要なリソースを保護できます。

つまり、新しい Service Worker スレッドをスピンアップしてキャッシュリソースをバックグラウンドで実行すると、ユーザーが初めてサイトにアクセスしたときのやり取りまでの時間が最も短くなりますサイトをご覧ください。

ボイラープレートの改善

これを解決するには、Service Worker を起動するタイミングを navigator.serviceWorker.register()。単純な経験則として、 load eventまで登録可能以下のように、window で起動します。

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}

ただし、Service Worker の登録を開始する適切なタイミングは、ウェブアプリが読み込まれた直後の動作を確認できます。たとえば、Google I/O 2016 年のウェブアプリ: 短いアニメーション確認することもできます。Google のチーム見つけましたアニメーション中に Service Worker の登録から外れると、ジャンクが発生する可能性があるローエンドのモバイルデバイスで使えますユーザーに不快感を与えるのではなく遅延アニメーションが終わるまで、Service Worker の登録にアイドル状態である可能性が高いため

同様に、ウェブアプリで追加のセットアップを行うフレームワークをページが読み込まれた時点で、そのことを示すフレームワーク固有のイベントを探します。終わりです。

再訪問

これまでは初回訪問時に重点を置いてきましたが Service Worker の登録が遅いと、サイトへの再アクセスが増えますか？驚く人もいるかもしれませんが、まったく影響はないはずです。

Service Worker が登録されると、install を介して activate のライフサイクルできます。アクティベートされた Service Worker は、任意のイベントに対して fetch イベントをウェブアプリへのその後の訪問Service Worker は、Cloud Storage バケットの作成そのスコープ内のページに対するリクエストが行われると、説明します。以前の Service Worker で既存の Service Worker がユーザーがページにアクセスした場合、そのページの fetch イベントをリクエストできます。

アクティブな Service Worker があれば、呼び出しのタイミングは navigator.serviceWorker.register()、あるいは実際の呼び出しでも同様です。 Service Worker スクリプトの URL を変更しない限り、 navigator.serviceWorker.register() は、実質的には以降のアクセスは no-op にします。次の場合という意味ではありません。

早期登録のメリット

Service Worker を早期に Service Worker でどうすればよいでしょうか。思い浮かぶのは Service Worker で clients.claim() 最初のアクセス時にページをコントロールし、Service Worker はランタイムに積極的にキャッシュ保存その fetch ハンドラ内で指定する必要があります。そのような状況では Service Worker をできるだけ早くアクティブにすることで、後で役立つ可能性のあるリソースをランタイムキャッシュに挿入する。条件自分のウェブアプリがこのカテゴリにあてはまる場合は、一歩引いて Service Worker の install ハンドラがメインページのリクエストに応じて帯域幅を奪い合うリソースを検出できます。

テスト

初めてアクセスする場合をシミュレートするには、ウェブアプリケーションを Chrome シークレットモードウィンドウネットワークトラフィックをChrome の DevTools。ウェブウェブアプリのローカルインスタンスを数十回再読み込みし 1 日に数十回の頻度で導入しますしかし、まだ見つかっていない時間帯にサイトに再度アクセスすれば完全に入力されたキャッシュではユーザーエクスペリエンスは変わりません発生しがちな問題も無視しやすくなります。

次の例は、登録のタイミングによって結果が変わります。できます。どちらのスクリーンショットも、サンプルにアクセス中に撮影されます。アプリネットワークスロットリングを使用して低速な接続をシミュレートするシークレットモード。

上のスクリーンショットは、サンプルが変更されたときのネットワークトラフィックを示しています。 Service Worker を登録する必要があります。ご覧のとおり、リクエスト（gear の付いたエントリアイコンその隣にある、Service Worker の install ハンドラから開始）。ページの表示に必要な他のリソースのリクエストが混在しています。

上のスクリーンショットでは、Service Worker の登録がページが読み込まれました。ご覧のとおり、プリキャッシュリクエストは、リソースがネットワークから取得され、ネットワーク間の競合があります。さらに、事前キャッシュする項目の一部は、すでにブラウザの HTTP キャッシュ（Size に (from disk cache) が含まれるアイテム）その列に移動しなくても、Service Worker のキャッシュにデータを入力できます。接続し直します

この種のテストを実際のローエンドのデバイスで接続します。Chrome のリモートデバッグを機能 USB 経由でデスクトップマシンに Android スマートフォンを接続して、実施しているテストには組織の実際の経験ができます。

まとめ

まとめると、初回訪問時のユーザーエクスペリエンスが最適になるようにする最優先事項である必要がありますService Worker の登録を初回訪問時にページの読み込みが遅らないようにしましょう引き続き再訪問時に Service Worker を使用するとすべてのメリットが得られます

Service Worker の初期状態を最初のページが読み込まれるまでは、次のように登録する必要があります。

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js');
    });
}