サービスワーカー入門

投稿日: 2022-04-20 2022-10-23
タグ: javascript

Service Workerは、最新のWebブラウザーで過去数年間に導入された比較的新しいAPIです。それは本当に重要な技術です。これは特別な種類のWebワーカーであり、ブラウザにインストールして、Webサイトコンテンツへのオフラインアクセスを許可するなど、以前は通常のWebページでは利用できなかった特別な機能を提供できます。

Service Workerは、プログレッシブウェブアプリの中核を成しています。これは、リソースのキャッシュとプッシュ通知を可能にするためです。これは、これまでネイティブアプリを際立たせていた2つの主要な機能です。

プログレッシブウェブアプリの傘下にある機能は、ほとんどの場合、ウェブテクノロジーを使用してフル機能のモバイルアプリを構築する機能を備えていることを目的としています。ネイティブスタック。

ServiceWorkerは別のスレッドで実行されます。これは、DOMやXHRやCookieなどのいくつかのAPIへのアクセスなど、メインのJavaScriptスレッドで使用可能な多くのオブジェクトにアクセスできないことを意味します。プラス面として、Service Workerの操作は完全に分離されているため、UIスレッドをブロックすることはできません。

サービスワーカーはHTTPS経由でサービスを提供する必要があることに注意してください。そうしないと、ブラウザーはサービスワーカーを登録しません。

サービスワーカーの主な機能

プログレッシブウェブアプリ（PWA）の最終目標は、モバイルで優れていることです。モバイルでWebが常に失敗したことの1つは、オフライン状態の処理です。

サービスワーカーは、ネットワークリクエストをインターセプトし、 Cache API を使用してブラウザキャッシュに追加できます。また、ブラウザがオフラインでネットワークが利用できないことを検出した場合、キャッシュされたリソースを提供できます。。

もう1つの大きな機能は、開発者がサービスワーカーで使用できる2つの別個のWebプラットフォームAPIである PushAPIとNotificationsAPI を使用して、プッシュ通知を有効にすることです。。

ServiceWorkerをインストールする方法

サービスワーカーは、使用する前にブラウザーにインストールする必要があります。

まず、ブラウザがサービスワーカーを実装しているかどうかを確認する必要があります。

最良の方法は、の存在を確認することです serviceWorker ナビゲーターオブジェクト：

if (!('serviceWorker' in navigator)) {
  // service workers not supported 😣
  return
}

サービスワーカーが利用可能な場合は、サービスワーカーを見つけることができるファイルを指定することにより、サービスワーカーを登録できます。ブラウザからアクセスできる別のファイルが常にあります。たとえば、あなたはそれを worker.js ルートディレクトリに配置されたファイル。

ページが読み込まれるまで待ってから、ServiceWorkerを navigator.serviceWorker.register() 方法：

window.addEventListener('load', () => {
  if (!('serviceWorker' in navigator)) {
    // service workers not supported 😣
    return
  }

  navigator.serviceWorker.register('/worker.js').then(
    () => {
      // registered! 👍🏼
    },
    err => {
      console.error('SW registration failed! 😱', err)
    }
  )
})

サービスワーカーのライフサイクル

Service Workerを使用するには、ブラウザにインストールする必要があると述べました。

ユーザーが最初にWebサイトにアクセスしたとき、サービスワーカーが実行できるのはインストールだけです。

Service Worker内にあるもの、それに付属する機能は、ユーザーがサイトの2番目のページにアクセスするか、現在のページを更新するまで有効になりません。これは仕様によるものです。

サービスワーカーの内容

に住んでいるサービスワーカーをインストールする方法を見たばかりです worker.js ファイルですが、まだそのファイルを調べていません。

Service Workerでは、ブラウザから発行されるいくつかのイベントをリッスンできます。

fetch サイトのページにネットワークリソースが必要な場合は常に送信されます。新しいページ、JSON API、画像、CSSファイルなど、何でもかまいません。
install ServiceWorkerのインストール時に送信されます。
activate ServiceWorkerが登録およびインストールされたときに送信されます。この場所は、古いバージョンのService Workerが更新されている場合に、それに関連するすべてのものをクリーンアップできる場所です。
sync ブラウザが以前に接続が利用できなかったことを検出した場合に送信され、インターネット接続が機能していることをサービスワーカーに通知します。
push 新しいプッシュイベントが受信されると、PushAPIによって呼び出されます。

キャッシュされたリソースの提供

Service Workerがインストールされると、後でオフラインでページを提供するために必要な特定のリソースをキャッシュするようにブラウザーに指示できます。

self.addEventListener('install', event => {
  event.waitUntil(
    caches
      .open('my-site-name')
      .then(cache =>
        cache.addAll([
          'favicon.ico',
          'style.css',
          'script.js',
          'https://fonts.googleapis.com/css?family=Inconsolata:400,700'
        ])
      )
  )
})

このコードは、 Cache API を使用して、ブラウザが指定されたキャッシュ内のすべてのリソースをキャッシュするようにします。 my-site-name.

聞く方法を見てみましょう fetch 次回当サイトのページにアクセスしたときに、キャッシュされたリソースをユーザーに提供するイベント：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        //we found an entry in the cache!
        return response
      }
      return fetch(event.request)
    })
  )
})

キャッシュに、によって識別されるリソースが含まれているかどうかを確認します request プロパティであり、そうでない場合は、フェッチリクエストを起動して取得します。

の使用にも注意してください self 上記の例では。労働者はグローバルになります self 自分自身へのアクセスを許可する読み取り専用プロパティ。

サービスワーカーの更新

Service Workerがインストールされると、ユーザーが削除するか、更新するまで実行を継続します。

Service Workerを更新するには、サーバーに新しいバージョンをプッシュするだけで（1バイトを変更するだけで十分です）、ブラウザーは新しいバージョンであることを検出し、ダウンロードしてインストールします。

最初にインストールしたときと同じように、新しいServiceWorkerは次のページが読み込まれるまで利用できません。

getdocs

13036