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であるプッシュAPI通知APIを使用して、プッシュ通知を有効にすることです。 。

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ファイルに存在するServiceWorkerをインストールする方法を見たばかりですが、そのファイルはまだ調べていません。

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プロパティで識別されるリソースが含まれているかどうかを確認し、含まれていない場合は、 fetchrequestを起動して取得します。


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

サービスワーカーの更新

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

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

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