Neste artigo, veremos como "amarrar" e configurar o PWA no aplicativo Angular.
O que é um PWA?
PWA (Progressive Web App) é uma tecnologia da web que transforma um site em um aplicativo. Quando aberto, o aplicativo é executado em um wrapper de navegador, o que permite que o PWA execute o aplicativo em qualquer plataforma que use um navegador compatível com os padrões.
Internamente, o PWA usa um service worker que interage com o navegador para fornecer acesso a algumas funcionalidades internas. O service worker tem acesso a Cache Storage para recursos da web e IndexDB para dados. Graças ao Service worker, é possível implementar o cache, o que permite que o aplicativo PWA funcione offline.
Configuração inicial
, , Angular CLI, ng new app
.
ng serve
, Angular 4200 .
Angular CLI. ng add @angular/pwa
. , .
:
ngsw-config.json
- ngsw-worker.js (serviceworker.js). Service worker'.
manifest.webmanifest
- , PWA . , , ..
src/index.html
, head', html :
angular.json
:
src/assets/icons/
, .
app.module.ts
Service worker ngsw-worker.js
( ) .
PWA
. PWA https localhost ng serve
Service worker', HTTP- . , http-. npm http-server
npm i -g http-server
.
, ng build --prod
.
dist . Service worker' ngsw-worker.js
.
dist/app
8080 , http-server -p 8080
.
Nosso aplicativo foi iniciado com sucesso na porta 8080 e quando aberto, um botão aparece na barra de endereço do navegador para instalar a versão PWA de nosso aplicativo.
Também nas ferramentas de desenvolvimento, na seção Aplicativo, podemos rastrear o status do nosso Service worker
Conclusão
Neste artigo, examinamos a configuração básica e o lançamento de um aplicativo com tecnologia PWA, a tela é deixada com uma descrição das possibilidades de trabalho dos Service workers no modo "offline" e caching, bem como configuração de um arquivo ngsw-config.json
, que você pode ler sobre na documentação oficial do Angular .