Usando Angular para criar aplicativos da Web progressivos (PWA)
Angular é uma ótima opção para o desenvolvimento de PWA. O suporte para trabalhadores em serviço foi incluído na CLI Angular desde a versão 1.7.0,
para iniciar rapidamente o desenvolvimento de aplicativos PWA . O Service Worker pode ser configurado em um aplicativo Angular usando um arquivo de configuração json que fornece muitas opções e funções. Embora isso pareça ótimo, há uma grande desvantagem no uso do Angular Service Worker - sua lógica não pode ser estendida de maneira padrão.
Por que você pode precisar expandir os recursos do NGSW?
No meu caso, eu precisava registrar um ouvinte de evento de notificação de clique personalizado que tratasse da ação de clique de uma notificação por push. Devo admitir que o Angular Service Worker faz um ótimo trabalho ao receber e exibir notificações por push - essa parte é tratada pelo arquivo ngsw-worker.js sem nenhum esforço por parte do desenvolvedor. E, a princípio, parecia que a única maneira de fornecer a lógica necessária era fazer alterações no código do arquivo ngsw-worker.js gerado ao criar o aplicativo. Mas entendi que esse método é ruim - ele precisa ser suportado e verificado toda vez que você faz alterações no arquivo de configuração ngsw. Felizmente, descobriu-se que o problema era facilmente resolvido inserindo dois arquivos adicionais.
Solução
Vamos começar criando dois arquivos js adicionais na pasta
/ src .
sw-custom.js - arquivo que contém o ouvinte de evento:(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }());
sw-master.js é um arquivo que combina NGSW com nossa própria lógica: importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js');
Registro de ativos
Ao criar novos arquivos de script, precisamos garantir que o Angular os leve em consideração durante a compilação. Do ponto de vista técnico, esses são ativos semelhantes ao arquivo favicon.ico criado pela CLI Angular ao criar um projeto. Podemos registrar nossos recursos adicionais no arquivo angular.json (.angular-cli.json para versões mais antigas do Angular):
{ ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... }
Registrar novamente o script do Service Worker
A etapa final é alterar o ponto de entrada no Service Worker registrado pela Angular durante a inicialização do aplicativo. Para fazer isso, precisamos alterar a entrada ServiceWorkerModule.register em app.module.ts da seguinte maneira:
ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
Resumir
Isso é tudo, após a montagem de produção do aplicativo, nossos novos arquivos de script serão copiados para a pasta
/ dist e usados pelo aplicativo ao registrar o ServiceWorker. Se você quiser ver mais, também pode consultar meu perfil do GitHub, onde publiquei
um exemplo de aplicativo Angular com ServiceWorker complementado por lógica personalizada.