JavaScript Service Worker の紹介

JavaScript Service Worker の紹介

オフラインのときでも、一部の Web サイトが機能し続けているように見えることを疑問に思ったことはありませんか?その秘密は単純です。これらの Web サイトには Service Worker がいます。





サービス ワーカーは、最新の Web アプリケーションの多くのネイティブ アプリのような機能の背後にある主要なテクノロジです。



サービスワーカーとは?

Service worker は特殊なタイプの JavaScript Web ワーカー . Service Worker は、プロキシ サーバーのように機能する JavaScript ファイルです。アプリケーションから送信されるネットワーク リクエストをキャッチし、カスタム レスポンスを作成できるようにします。たとえば、ユーザーがオフラインのときに、キャッシュされたファイルをユーザーに提供できます。





サービス ワーカーを使用すると、バックグラウンド同期などの機能を Web アプリケーションに追加することもできます。

サービスワーカーを選ぶ理由

Web 開発者は長い間、アプリの機能を拡張しようとしてきました。 Service Worker が登場する前は、さまざまなソリューションを使用してこれを可能にすることができました。特に注目すべきは AppCache で、これによりリソースのキャッシュが便利になりました。残念ながら、ほとんどのアプリにとって実用的ではないという問題がありました。



ソーシャルメディアが社会と個人に及ぼす悪影響

AppCache は、キャッシュするアセットを非常に簡単に指定できるため、良いアイデアのように思えました。ただし、何をしようとしているのかについて多くの仮定を作成し、アプリがそれらの仮定に正確に従わなかった場合、恐ろしく壊れました。ジェイク・アーチボルドの本を読む アプリケーションキャッシュはDouchebagです 詳細については。 （ソース： MDN )

サービス ワーカーは、AppCache のような技術の欠点を排除して、Web アプリの制限を緩和しようとする現在の試みです。



Service Worker のユースケース

では、Service Worker は正確に何をさせてくれるのでしょうか?サービス ワーカーを使用すると、ネイティブ アプリの特徴である機能を Web アプリケーションに追加できます。また、Service Worker をサポートしていないデバイスで通常のエクスペリエンスを提供することもできます。このようなアプリは時々呼ばれます プログレッシブ Web アプリ (PWA) .

起動時にラズベリーパイ実行コマンド

Service Worker が可能にする機能の一部を次に示します。



  • ユーザーがインターネットに接続していなくても、アプリ (または少なくともその一部) を使い続けることができるようにします。サービス ワーカーは、リクエストに応じてキャッシュされたアセットを提供することでこれを実現します。
  • Chromium ベースのブラウザーでは、Service Worker は Web アプリをインストール可能にするための要件の 1 つです。
  • Service Worker は、Web アプリケーションがプッシュ通知を実装できるようにするために必要です。

Service Worker のライフサイクル

Service Worker は、サイト全体のリクエストを制御することも、サイトのページの一部のみを制御することもできます。特定の Web ページにはアクティブな Service Worker を 1 つだけ持つことができ、すべての Service Worker にはイベントベースのライフサイクルがあります。 Service Worker のライフサイクルは、一般的に次のようになります。

  1. ワーカーの登録とダウンロード。 Service Worker のライフは、JavaScript ファイルが Service Worker を登録するときに始まります。登録が成功すると、Service Worker がダウンロードされ、特別なスレッド内で実行が開始されます。
  2. サービス ワーカーによって制御されるページが読み込まれると、サービス ワーカーは「インストール」イベントを受け取ります。これは常に Service Worker が受け取る最初のイベントであり、Worker 内でこのイベントのリスナーを設定できます。通常、「インストール」イベントは、Service Worker が必要とするリソースを取得および/またはキャッシュするために使用されます。
  3. Service Worker がインストールを完了すると、'activate' イベントを受け取ります。このイベントにより、ワーカーは以前のサービス ワーカーによって使用された冗長なリソースをクリーンアップできます。 Service Worker を更新している場合、activate イベントは安全に実行できる場合にのみ発生します。これは、以前のバージョンの Service Worker をまだ使用しているページが読み込まれていない場合です。
  4. その後、Service Worker は、正常に登録された後に読み込まれたすべてのページを完全に制御できます。
  5. ライフサイクルの最後のフェーズは冗長性です。これは、Service Worker が削除されるか、新しいバージョンに置き換えられるときに発生します。

JavaScript で Service Worker を使用する方法

サービスワーカー API ( MDN ) は、JavaScript で Service Worker を作成して操作できるようにするインターフェイスを提供します。