Web-based applications are increasingly " sharpened " for mobile devices and service worker'y are the foundation of advanced web-based application (PWA). When you first look at this technology, you might get the impression that the main job of service workers is to cache content. And so it is. The task of service workers is to ensure the functioning of a web application in the conditions of an unstable or completely absent connection to the Network, which is achieved using data caching.
Under the cut, a couple of thoughts about the consequences for web applications the emergence of the ability to cache data through service workers has led.
PWA architecture
Here is the classic three-tier architecture of a web application:
Adding a service worker and data persistence tools ( Cache API and IndexedDB ) on the client transforms a three-tier architecture into a five-tier architecture:
In fact, in the absence of a connection to the Network, a progressive web application should work on the client in a classic three-tier mode:
and when a connection to the Network appears, go to the five-level:
- Presentation (Main Thread) : user interface;
- Client Logic (Service Worker) : business logic for processing data of a specific user, taking into account work in offline & online modes;
- Client Data (Cache API & IndexedDB) : user-specific data stores;
- 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 (.. ).
The above may seem a little confusing to some, but before writing this article, my understanding of the role of service workers in progressive web applications was even more confusing. I would be grateful for comments that further clarify service worker tasks and how to use them.