Os aplicativos baseados na Web estão cada vez mais " aprimorados " para dispositivos móveis e os trabalhadores de serviço são a base do aplicativo avançado baseado na Web (PWA). Quando você olha pela primeira vez para essa tecnologia, pode ter a impressão de que a principal tarefa dos service workers é armazenar conteúdo em cache. E assim é. A tarefa dos service workers é garantir o funcionamento de um aplicativo da web em condições de instabilidade ou nenhuma conexão com a rede, o que é obtido usando o cache de dados.

Abaixo, algumas reflexões sobre as consequências para os aplicativos da web, o surgimento da capacidade de armazenar dados em cache por meio de service workers levou.

Arquitetura PWA

Aqui está a arquitetura clássica de três camadas de um aplicativo da web:

Adicionar um service worker e ferramentas de persistência de dados ( API Cache e IndexedDB ) no cliente transforma uma arquitetura de três camadas em uma arquitetura de cinco camadas:

Na verdade, na ausência de uma conexão com a rede, um aplicativo da web progressivo deve funcionar no cliente em um modo clássico de três camadas:

e quando uma conexão com a rede aparecer, vá para o nível de cinco:

1. Apresentação (thread principal) : interface do usuário;
2. Client Logic (Service Worker): - offline & online ;
3. Client Data (Cache API & IndexedDB): ;
4. Server Logic (Server): - ;
5. 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 (.. ).

O que foi dito acima pode parecer um pouco confuso para alguns, mas antes de escrever este artigo, meu entendimento da função dos service workers em aplicativos Web progressivos era ainda mais confuso. Eu ficaria grato por comentários que esclarecem ainda mais as tarefas do prestador de serviço e como usá-las.

Links

• Service Workers Nightly
• Usando Service Worker
• ServiceWorker Cookbook
• Google Developers