ダミーのためのPWAサービスワーカー

問題の事実は、サービスワーカーが今後数年間で果たすべき重要な役割を担っており、この新しいテクノロジーに早く慣れれば、このWebの新しい未来に順応できるようになるということです。

そのため、この新しいテクノロジーをよりよく理解できるように、サービスワーカーについて、それが何であるか、Webに何をもたらすか、この新しいテクノロジーにどのように備えることができるかについて話し合います。ウェブ。

サービスワーカーとは何ですか？

定義

PWAを作成または破壊するテクノロジーと広く見なされているServiceWorkerは、ブラウザーから独立して実行され、ネットワークインターセプトを担当するAPIです。このため、これまでWebでは不可能だった多くのことを実行できます。 サービスワーカーによって制御されるWebサイト（通常はPWA）は、使用中のデバイスとより緊密に統合できるため、より多くのハードウェア機能とアプリのような機能（プッシュ通知、バックグラウンド同期など）をWebにもたらすことができます。

使い方

手短に。 Service Workerは基本的に、ブラウザとサーバー間のイベントベースのレイヤーであり、発信ネットワークリクエストをインターセプト、変更、および処理します。

また、サービスワーカーはイベントベースのワーカーであるため、イベントを介してのみ応答および通信し、promiseを使用して操作が完了したことを通知します。 ただし、イベント（ fetchやpushなど）のすべての受信は、サービスワーカーがアクティブな場合にのみ可能です。これは、ブラウザーがサービスワーカーを認識して登録したとき（およびサービスワーカー自体のインストールが正常に完了したとき）を示します。 簡単に言うと、これはサービスワーカーの典型的なライフサイクルです。

また、ServiceWorkerで利用可能なこれらすべてのイベントに注意してください。

すべての機能イベント（ fetch 、 sync 、およびpush ）は、PWAのほとんどすべてのプログレッシブ機能の特性（オフライン機能、バックグラウンド同期、プッシュ通知）を実現するイベントであるため、自明である必要があります。

 推奨読書：PWAとは何ですか？ プログレッシブウェブアプリについて知っておくべきことすべて

サービスワーカーへの制約

これはブラウザから独立して実行されるスクリプトであるため、いくつかの制約があります。

• HTTPSプロトコル：サービスワーカーはHTTPSベースのWebサイトで実行する必要があります

• localStorage 、DOM、およびウィンドウにアクセスできません。
• 限定されたscope ：サービスワーカーは、 service-worker.jsが配置されている現在のディレクトリ（およびサブディレクトリ）のscopeでのみ操作できます。
• 非同期：サービスワーカーは本質的に非同期であるため、PromiseベースのAPIに依存しています。

PWAにとってサービスワーカーとは

前に述べたように、サービスワーカーはPWAのバックボーンであり、それなしではPWAの革新的な機能の多くは不可能です。 基本的に、Service Workerが行うことは、次の手段を提供することです。

よりよい性能

PWAでは、サービスワーカーがキャッシュプロセスを支援するために多大な労力を費やしているため、繰り返しアクセスした場合のパフォーマンスが大幅に向上します。 大多数のWebサイトで使用されている一般的なWebキャッシュ（HTTPキャッシュ）と比較して、PWAは、好ましくないネットワーク条件でもコンテンツの提供に優れています。

これはすべて、サービスワーカーが開発者に、キャッシュがどのように行われるかを正確に自由にできるようにするという事実のおかげです。 サービスワーカーのキャッシュパフォーマンスがどれだけ優れているかを確認するには、Googleの最近の調査であるサービスワーカーの実際のパフォーマンスへの影響の測定をお勧めします。 この調査には明確な方法論があり、サービスワーカーのパフォーマンスを決定するための指標として、最初にペイントするまでの時間を中心にしています。

平均して、サービスワーカーがページを制御しているときは、新規訪問者とリピーターの両方で、サービスワーカーがいない場合よりも、ページの読み込みがかなり速くなりました。

フィリップウォルトン、サービスワーカーの実際のパフォーマンスへの影響の測定

オフラインアクセス

登録されると、サービスワーカーは、PWAサイトに必要なコンテンツをキャッシュし、後で提供します。 これにより、ユーザーは引き続きサイトを操作してキャッシュされたすべてのコンテンツを表示できるため、PWAを利用したWebサイトをオフラインで使用できるようになります。

これは、オフラインアクセスが以前はWebで見られなかった機能であるということではありません。ユーザーにWebでのオフライン体験を提供することは可能でしたが、体験が最適ではなかっただけです（アプリケーションキャッシュはDouchebagですを参照）。ワーカーは、AppCacheの欠点に対処する（または回避する）ために考案されました。

 推奨読書：PWAをオフラインで機能させる方法

ネイティブアプリの機能

オフラインアクセスとパフォーマンスの向上を提供するだけでなく、サービスワーカーは、プッシュ通知やバックグラウンド同期（および近い将来、ジオフェンスと定期的な同期）などのアプリのような機能のベースとしても機能します。 たとえば、PWAのプッシュ通知機能は、通知APIとプッシュAPIの2つのAPIを使用して組み立てられます。どちらも、ServiceWorkerAPIの上に構築されています。

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

サービスの存続期間は、登録、インストール、アクティベーションの3つの部分で構成されます。これらすべてについて、以下で詳しく説明します。

登録

最初に行う必要があるのは、サービスワーカーを登録することです。 この手順がないと、ブラウザはService Workerの場所を認識できないため、ServiceWorkerをバックグラウンドでインストールできなくなります。
次のコードを使用して、ServiceWorkerを登録できます。

 if（'serviceWorker' in navigator）{
    navigator.serviceWorker.register（'./pwa-examples/simicart/sw.js'、{スコープ：'./sw-scope/'}）
.then（（reg）=> {
   //登録が機能しました
       console.log（'登録に成功しました。スコープは'+ reg.scope）;
};

上記のコードは、最初にブラウザーでService Worker APIの検索を開始し、ブラウザーがそのAPIをサポートしている場合、serviceworkerContainer.register（）メソッドを使用して新しいService Workerを登録し、ServiceWorkerのscopeを指定します。 たとえば、上記のコードでは、 scopeは/pwa-examples/simicart/です。これは、サービスワーカーが/pwa-examples/simicart/で始まるページに対してのみ機能することを意味します。 これらのページを「制御されたページ」と呼びます。

インストール

これで、ブラウザはService Workerの場所（およびその範囲）を認識したので、ServiceWorkerのインストールを試みます。 このフェーズでは何もしないことを選択できますが、これはほとんどのキャッシュプロセスが発生するフェーズであることに注意してください。 たとえば、これは通常、アセットをキャッシュするプロセスが実行される方法です。

 const cacheName ='site-cache-v1'
const AssetsToCache = [
    '/ pwa-examples /'、
    '/pwa-examples/index.html'、
    '/pwa-examples/css/styles.css'、
    '/pwa-examples/js/app.js'、
]

self.addEventListener（'install'、（event）=> {
    event.waitUntil（  
        caches.open（cacheName）.then（（cache）=> {
              cache.addAll（assetsToCache）;を返します。
        }）
      ）;
}）;

上記の例でわかるように、Cache APIを使用してアセットをキャッシュし、後でPWAをオフライン対応にするために使用します。 このキャッシュプロセスは、インストールイベント中に発生します。

アクティベーション

インストール段階の後、ServiceWorkerをアクティブ化できます。 ただし、このアクティブ化段階は通常自動的には発生しません。サービスワーカーをアクティブ化するには、現在ページを制御しているサービスワーカーがいないことを確認する必要があります。

または、 skipWaiting()メソッドを使用して、ServiceWorkerのアクティブ化プロセスを自動化することもできます。

 const cacheName ='site-cache-v1'
const AssetsToCache = [
    '/ pwa-examples /'、
    '/pwa-examples/index.html'、
    '/pwa-examples/css/styles.css'、
    '//pwa-examples/js/app.js'、
]
self.addEventListener（'install'、（event）=> {
    self.skipWaiting（）; //待機をスキップします
    event.waitUntil（  
        caches.open（cacheName）.then（（cache）=> {
              cache.addAll（assetsToCache）;を返します。
        }）
      ）;
}）;

Webにはサービスワーカーが必要です

この時点で、ServiceWorkerはWebが実行しなければならないほぼ最終的なステップであることに同意できます。 ユーザーはアプリのような機能をますます要求するようになり、PWAがソフトウェア配信の未来になりつつあるという事実を組み合わせると、Webには今後数年間で多くの可能性があるように見えます。

ストアフロントの変革を検討しているMagentoの加盟店向けに、費用対効果の高い完全なヘッドレスPWAソリューションをビジネスに提供します。