サービスワーカーのチュートリアル

Service Workerは、モバイルWeb上のプログレッシブWebアプリケーションを強化する重要なテクノロジーです。これらは、リソースのキャッシュとプッシュ通知を可能にします。これは、これまでネイティブアプリを際立たせていた2つの主要な特徴的な機能です。

サービスワーカーの紹介

サービスワーカーは中核ですプログレッシブウェブアプリ、リソースのキャッシュとプッシュ通知を許可するため、これまでネイティブアプリを際立たせていた2つの主な特徴的な機能。

サービスワーカーはプログラム可能なプロキシWebページとネットワークの間で、ネットワーク要求を効果的に傍受してキャッシュする機能を提供しますアプリのオフラインファーストエクスペリエンスを作成する機能を提供します

特別な種類ですWebワーカーJavaScriptメインスレッドとは別に、ワーカーコンテキストで実行されるWebページに関連付けられたファイルで、非ブロッキングであるという利点があります。そのため、UIの応答性を犠牲にすることなく計算を実行できます。

別のスレッド上にあるため、DOMアクセス、およびアクセスなしローカルストレージAPIとXHRAPIも同様であり、メインスレッドに通信できるのはチャネルメッセージングAPI

Service Workerは、他の最近のWebAPIと連携しています。

そして彼らはHTTPSでのみ利用可能簡単なテストのために安全な接続を必要としないローカルリクエストを除いて、プロトコルページ。

バックグラウンド処理

Service Workerは、関連付けられているアプリケーションとは独立して実行され、アクティブでないときにメッセージを受信できます。

たとえば、次のように機能します。

  • モバイルアプリケーションがバックグラウンドで、 非活動中
  • モバイルアプリケーションが閉まっている、バックグラウンドで実行されていない場合でも
  • いつブラウザが閉じている、アプリがブラウザで実行されている場合

ServiceWorkerが非常に役立つ主なシナリオは次のとおりです。

  • それらはとして使用することができますキャッシングレイヤーネットワーク要求を処理し、オフライン時に使用されるコンテンツをキャッシュします
  • 許可するプッシュ通知

Service Workerは必要な場合にのみ実行され、使用されていない場合は停止します。

オフラインサポート

従来、Webアプリのオフラインエクスペリエンスは非常に貧弱でした。ネットワークがないと、多くの場合、Webモバイルアプリは機能しませんが、ネイティブモバイルアプリには、機能するバージョンまたは何らかの素敵なメッセージを提供する機能があります。

これは良いメッセージではありませんが、ネットワーク接続がない場合のChromeでのWebページの外観は次のとおりです。

Offline support missing in service workers

恐竜をクリックするだけで無料ゲームをプレイできるのは、おそらくこれの唯一の良い点ですが、すぐに退屈になります。

Dinosaur game chrome

最近、HTML5 AppCacheは、Webアプリがリソースをキャッシュしてオフラインで動作できるようにすることをすでに約束していましたが、柔軟性の欠如と紛らわしい動作により、仕事に十分ではなく、約束を果たせなかったことが明らかになりました(そして廃止されました)。

Service Workerは、オフラインキャッシュの新しい標準です。

どのような種類のキャッシュが可能ですか?

インストール中にアセットをプリキャッシュする

画像、CSS、JavaScriptファイルなど、アプリケーション全体で再利用されるアセットは、アプリを最初に開いたときにインストールできます。

これは、いわゆるアプリシェルアーキテクチャ

ネットワークリクエストのキャッシュ

を使用してフェッチAPIサーバーからの応答を編集して、サーバーに到達できないかどうかを判断し、代わりにキャッシュからの応答を提供できます。

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

サービスワーカーは、完全に機能するために3つのステップを実行します。

  • 登録
  • インストール
  • アクティベーション

登録

登録は、サーバーワーカーがどこにあるかをブラウザーに通知し、バックグラウンドでインストールを開始します。

に配置されたServiceWorkerを登録するためのサンプルコードworker.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/worker.js')
    .then((registration) => {
      console.log('Service Worker registration completed with scope: ',
        registration.scope)
    }, (err) => {
      console.log('Service Worker registration failed', err)
    })
  })
} else {
  console.log('Service Workers not supported')
}

このコードが複数回呼び出された場合でも、ブラウザは、Service Workerが新しい場合、以前に登録されていない場合、または更新されている場合にのみ登録を実行します。

範囲

ザ・register()callは、スコープパラメータも受け入れます。これは、アプリケーションのどの部分をServiceWorkerが制御できるかを決定するパスです。

デフォルトでは、Service Workerファイルを含むフォルダーに含まれるすべてのファイルとサブフォルダーが使用されるため、ルートフォルダーに配置すると、アプリ全体を制御できます。サブフォルダーでは、そのルートでアクセス可能なページのみを制御します。

以下の例では、を指定してワーカーを登録します。/notifications/フォルダスコープ。

navigator.serviceWorker.register('/worker.js', {
  scope: '/notifications/'
})

ザ・/重要です:この場合、ページ/notificationsスコープがだった場合、ServiceWorkerはトリガーされません

{
  scope: '/notifications'
}

それはうまくいったでしょう。

注:Service Workerは、フォルダから自分自身を「アップ」することはできません。ファイルが下に置かれている場合/notifications、制御できません/パスまたは下にないその他のパス/notifications

インストール

ブラウザがServiceWorkerが古くなっている、または以前に登録されたことがないと判断した場合、ブラウザはインストールに進みます。

self.addEventListener('install', (event) => {
  //...
});

これは、使用するサービスワーカーを準備するための良いイベントです。キャッシュの初期化、およびAppShellをキャッシュするおよび静的資産を使用してキャッシュAPI

アクティベーション

Service Workerが正常に登録およびインストールされたら、アクティベーション段階は3番目のステップです。

この時点で、ServiceWorkerは新しいページの読み込みを処理できるようになります。

すでに読み込まれているページとやり取りすることはできません。つまり、Service Workerは、ユーザーが2回目にアプリを操作したとき、または既に開いているページの1つを再読み込みしたときにのみ役立ちます。

self.addEventListener('activate', (event) => {
  //...
});

このイベントの適切な使用例は、古いキャッシュと、古いバージョンに関連付けられているが、新しいバージョンのServiceWorkerでは使用されていないものをクリーンアップすることです。

サービスワーカーの更新

Service Workerを更新するには、1バイトを変更するだけで、レジスタコードが実行されると更新されます。

Service Workerが更新されると、古いService Workerが添付されて読み込まれたすべてのページが閉じられるまで、利用可能になりません。

これにより、すでに機能しているアプリやページで何も壊れることはありません。

古いワーカーはまだ実行中であり、削除されていないため、ページを更新するだけでは不十分です。

フェッチイベント

Aフェッチイベントネットワーク上でリソースが要求されたときに発生します。

これは私たちにキャッシュを見てくださいネットワーク要求を行う前に。

たとえば、以下のスニペットはキャッシュAPIリクエストURLがキャッシュされた応答にすでに保存されているかどうかを確認し、保存されている場合はキャッシュされた応答を返します。それ以外の場合は、フェッチ要求を実行して返します。

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

バックグラウンド同期

バックグラウンド同期により、ユーザーがネットワーク接続を機能させるまで、発信接続を延期できます。

これは、ユーザーがアプリをオフラインで使用してアクションを実行し、信号を取得しようとする無限の糸車を表示する代わりに、接続が開いているときにサーバー側の更新をキューに入れることができるようにするための鍵です。

navigator.serviceWorker.ready.then((swRegistration) => {
  return swRegistration.sync.register('event1')
});

このコードは、ServiceWorkerでイベントをリッスンします。

self.addEventListener('sync', (event) => {
  if (event.tag == 'event1') {
    event.waitUntil(doSomething())
  }
})

doSomething()約束を返します。失敗した場合は、成功するまで別の同期イベントが自動的に再試行するようにスケジュールされます。

これにより、接続が機能しているとすぐにアプリがサーバーからデータを更新できるようになります。

プッシュイベント

Service Workerは、以下を使用して、Webアプリがネイティブプッシュ通知をユーザーに提供できるようにします。

プッシュと通知は、実際には2つの異なる概念とテクノロジーですが、組み合わせて、私たちが知っているものを提供します。プッシュ通知。プッシュは、サーバーがサービスワーカーに情報を送信できるようにするメカニズムを提供し、通知は、サービスワーカーがユーザーに情報を表示する方法です。

Service Workerはアプリが実行されていないときでも実行されるため、プッシュイベントの発生をリッスンし、ユーザーに通知するか、アプリの状態を更新できます。

プッシュイベントは、によって提供されるようなブラウザプッシュサービスを介して、バックエンドによって開始されますFirebase

サービスワーカーが着信プッシュイベントをリッスンする方法の例を次に示します。

self.addEventListener('push', (event) => {
  console.log('Received a push event', event)

const options = { title: ‘I got a message for you!’, body: ‘Here is the body of the message’, icon: ‘/img/icon-192x192.png’, tag: ‘tag-for-this-notification’, }

event.waitUntil( self.registration.showNotification(title, options) ) })

コンソールログに関する注意

コンソールログステートメントがある場合(console.logおよび友人)サービスワーカーで、必ずオンにしてくださいPreserve logによって提供される機能Chrome DevTools、または同等のもの。

それ以外の場合、Service Workerはページがロードされる前に動作し、コンソールはページをロードする前にクリアされるため、コンソールにログは表示されません。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: