Webベースのアプリケーションはモバイルデバイス向けにますます「シャープ化」されており、サービスワーカーは高度なWebベースのアプリケーション（PWA）の基盤となっています。このテクノロジーを最初に見ると、サービスワーカーの主な仕事はコンテンツをキャッシュすることであるという印象を受けるかもしれません。そしてそうです。サービスワーカーのタスクは、ネットワークへの接続が不安定または完全に存在しない状態でWebアプリケーションが機能することを確認することです。これは、データキャッシングを使用して実現されます。
カットの下で、Webアプリケーションへの影響についてのいくつかの考えが、サービスワーカーを介してデータをキャッシュする機能の出現につながりました。
PWAアーキテクチャ
Webアプリケーションの従来の3層アーキテクチャは次のとおりです。
追加サービスワーカーツール永続性とデータ（キャッシュAPIとのIndexedDB）クライアント上では、5層アーキテクチャに3層アーキテクチャを変換します。
実際、ネットワークへの接続がない場合、プログレッシブWebアプリケーションは、従来の3層モードでクライアント上で実行する必要があります。
ネットワークへの接続が表示されたら、次の5つのレベルに進みます。
- プレゼンテーション（メインスレッド）：ユーザーインターフェイス;
- クライアントロジック（サービスワーカー）：オフラインモードとオンラインモードでの作業を考慮して、特定のユーザーのデータを処理するためのビジネスロジック。
- クライアントデータ（Cache APIおよびIndexedDB）：ユーザー固有のデータストア。
- Server Logic (Server): - ;
- Server Data (DB): ;
Offline first
web- mobile first. PWA — offline first. , ( ), .
, service worker' , . — . — (online/offline) .
, offline- — , ( - ) - , .
:
- : , (HTML/CSS/JS/images/...);
- (API): ( , JSON), ( ), ( );
() Cache API — "" — ""
(API) — IndexedDB (NoSQL JSON).
Cache
Chrome' Application / Cache / Cache Storage / < >, :
, , CDN , .
IndexedDB
Chrome' Application / Storage / IndexedDB / < > / < >, :
CRUD-, , . IndexedDB . , .
, .
service worker'
- service worker' . ( webpack') . service worker' WorkerGlobalScope.importScripts(). , . service worker' :
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});, service worker', . — service worker web- offline-, .
service worker' ( IndexedDB) (PWA offline) ( — — ). Online- PWA "" : Client Logic/Data — Server Logic/Data. - web- : , , (, ACL ).
service worker' - service worker' (, ES6 import), service worker' , - Main Thread ( ).
web-, , :
Service worker . , online offline (.. ).
上記は少し混乱しているように見えるかもしれませんが、この記事を書く前に、プログレッシブWebアプリケーションにおけるサービスワーカーの役割についての私の理解はさらに混乱していました。サービスワーカーのタスクとその使用方法をさらに明確にするコメントをいただければ幸いです。