[GUIA PWA 02] Comece com os PWAs

Os Progressive Web Apps – PWAs – são simplesmente aplicativos da web que são progressivamente aprimorados com recursos nativos semelhantes a aplicativos em plataformas de suporte e mecanismos de navegador, como instalação de início a tela inicial, suporte offline e notificações push. No Windows 10 com o mecanismo Microsoft Edge (EdgeHTML), os PWAs aproveitam a vantagem adicional de serem executados independentemente da janela do navegador, como aplicativos da Plataforma Universal do Windows – UWP.

Este guia fornecerá uma visão geral dos conceitos básicos do PWA, criando um aplicativo da Web localhost simples como um PWA usando o Microsoft Visual Studio e alguns utilitários do PWA Builder. O produto “acabado” funcionará de forma semelhante em qualquer navegador que suporte PWAs.

Dica:

Para obter uma maneira rápida de converter um site existente em um PWA e empacotá-lo para o Windows 10 e outras plataformas de aplicativos, acesse a ferramenta da Microsoft: PWABuilder.com.

Pré-requisitos

Você pode construir PWAs com qualquer IDE de desenvolvimento da web. Os seguintes são apenas pré-requisitos para este guia, que orientarão você pelo suporte ao conjunto de ferramentas do PWA no ecossistema de desenvolvedores do Windows.

• Baixe gratuitamente o Visual Studio Community 2017. Você também pode usar as edições Professional, Enterprise ou Preview ). No Visual Studio Installer , escolha as seguintes cargas de trabalho:
  • Desenvolvimento da Plataforma Universal do Windows (UWP)
  • Desenvolvimento do Node.js

Configurar um aplicativo da web básico

Para simplificar, usaremos o modelo de aplicativo Node.js e Express do Visual Studio para criar um aplicativo da Web localhost básico que exiba uma página index.html. Imagine isso como um espaço reservado para o aplicativo da web completo e atraente que você desenvolverá como um PWA.

1. Inicie o Visual Studio e inicie um novo projeto ( Arquivo> Novo > Projeto … ou Ctrl + Shift + N).
2. Em JavaScript, selecione Basic Node.js Express 4 Application . Defina o nome e a localização e clique em OK .

3. Depois que o novo projeto for carregado, crie(Ctrl + Shift + B) e inicie a depuração (F5). Verifique se o arquivo html está carregando em http://localhost:1337.

Transforme seu aplicativo em um PWA

Agora é hora de conectar os requisitos básicos do PWA para seu aplicativo da web: um manifesto de aplicativo Web, HTTPS e services workers.

Manifesto do aplicativo Web

Um manifesto do aplicativo Web é um arquivo de metadados JSON que descreve seu aplicativo, incluindo seu nome, autor, URL da página de entrada e ícone (s). Como ele segue um esquema baseado em padrões, você só precisa fornecer um único manifesto de aplicativo da web para que o seu PWA possa ser instalado em qualquer plataforma / sistema operacional / dispositivo que ofereça suporte a PWAs. No ecossistema do Windows, o manifesto do seu aplicativo da Web sinaliza para o indexador da Web do Bing que seu PWA é um candidato para inclusão automática na Microsoft Store, onde pode atingir quase 700 milhões de usuários mensais ativos como um aplicativo do Windows 10.

Se este fosse um site ativo existente, você poderia gerar rapidamente um manifesto de aplicativo da Web usando o PWA Builder. Como ainda é um projeto não publicado, copiaremos em um manifesto de amostra.

1. No Visual Studio Solution Explorer, clique com o botão direito do mouse na pasta públicae selecione Incluir > Novo Arquivo… , especificando json como o nome do item.
2. No arquivo json, copie no seguinte clichê:

JSON

{
“dir”: “ltr”,
“lang”: “en-us”,
“name”: “My Sample PWA”,
“scope”: “/”,
“display”: “browser”,
“start_url”: “https://PLACEHOLDER-FOR-PWA-URL”,
“short_name”: “SamplePWA”,
“theme_color”: “transparent”,
“description”: “A sample PWA for testing purposes”,
“orientation”: “any”,
“background_color”: “transparent”,
“related_applications”: [],
“prefer_related_applications”: false,
“icons”: [] }

Se este fosse um PWA real, você obviamente gostaria de personalizar pelo menos o nome , start_url , short_name e description , bem como os ícones (chegaremos aos próximos …).

Consulte a referência do Manifesto do Web App em documentos da Web do MDN para saber mais sobre os diferentes valores de membros e sua finalidade.

3. Em seguida, vamos preencher a icons matriz vazia com os caminhos da imagem real. Para isso, usaremos o App Image Generator do PWA Builder.
   • Salve esse exemplo de imagem 512×512 do PWA do seu navegador da Web.
   • Vá para o PWA Builder App Image Generator e selecione a imagem png que acabou de salvar como Imagem de Entrada e clique no botão Download .
   • Abrae extraia o arquivo zip.
   • No Visual Studio Solution Explorer, clique com o botão direito do mouse na pasta públicae abra a pasta no Gerenciador de arquivos. Crie uma nova pasta chamada imagens.
   • Copie todas as pastas da plataforma (android, chrome , … windows10 ) do seu zip extraído para a pasta imagens e feche a janela do explorador de arquivos. Adicione essas pastas ao seu projeto Visual Studio (no Solution Explorer , clique com o botão direito do mouse na pasta images e selecione Add > Existing folder … para cada uma das pastas.)
   • Abra (com o Visual Studio ou qualquer editor) o arquivo jsondo zip extraído e copie a “icons”: […] matriz no arquivo manifest.json do seu projeto .
4. Agora só precisamos associar nosso manifesto do aplicativo da web ao próprio aplicativo. Abra o arquivo pug(na pasta views ) para edição e adicione essa linha logo após o link da folha de estilo. (É simplesmente uma abreviação para o pug template do Node <link rel=’manifest’ href=’/manifest.json’>).

link(rel=’manifest’, href=’/manifest.json’)

Com tudo isso no lugar, seu aplicativo da web agora está exibindo um manifesto e ícones prontos para o uso na tela inicial! Tente executar seu aplicativo (F5) e carregar o manifesto:

E um dos seus ícones:

Se o seu aplicativo fosse publicado ao vivo (com um real start_url), o mecanismo de pesquisa do Bing agora poderia identificá-lo como um candidato para empacotamento automático e envio para a Microsoft Store como um aplicativo instalável do Windows 10. Apenas certifique-se de que o seu manifesto inclua os sinais de qualidade para aplicativos da Web progressivos que o Bing pesquisará:

• name
• description
• Pelo menos um ícone de 512 pixels quadrados ou maior (para garantir uma fonte de imagem com resolução suficiente para gerar automaticamente a tela inicial do aplicativo, a listagem do armazenamento, a imagem do bloco, etc.)

… além de ser HTTPS , usando services workers, em conformidade com as Políticas da Microsoft Store.

HTTPS

Os Service Workers e outras tecnologias PWA essenciais que trabalham com os services workers (como as APIs de Cache , Push e Background Sync ) funcionam apenas em conexões seguras, o que significa HTTPS para sites ativos ou localhost para fins de depuração.

Se você publicar este aplicativo da Web como um site ativo (por exemplo, configurando uma conta gratuita do Azure), será necessário garantir que seu servidor esteja configurado para HTTPS. Se você estiver usando o Microsoft Azure App Service do Microsoft Azure para hospedar seu site, ele será exibido por HTTPS por padrão.

Para este guia, continuaremos usando http://localhost como um espaço reservado para um site ativo veiculado por https://.

Service Workers

Os Service Workers é a principal tecnologia por trás dos PWAs. Eles atuam como um proxy entre o seu PWA e a rede, permitindo que seu site funcione como um aplicativo nativo instalado: apresentando cenários offline, respondendo a notificações push do servidor e executando tarefas em segundo plano. Os service workers também abrem todos os tipos de novas estratégias de desempenho; e o site não precisa nem mesmo ser um aplicativo da Web completo para aproveitar o cache do service worker para obter um desempenho de carregamento de página bem ajustado.

Os service workers são threads em segundo plano acionados por eventos que são executados a partir de arquivos JavaScript exibidos junto com os scripts regulares que acionam seu aplicativo da web. Como eles não são executados no thread principal da interface do usuário (UI), os service workers não têm acesso ao DOM, embora o thread da interface do usuário e um thread de trabalho possam se comunicar usando postMessage() e onmessage manipuladores de eventos.

Você associa um service worker ao seu aplicativo registrando-o na origem da URL do seu site (ou em um caminho especificado dentro dela). Uma vez registrado, o arquivo do service worker é baixado, instalado e ativado na máquina do cliente. Para obter mais informações, os documentos da Web do MDN têm um guia abrangente sobre como usar os Service Workers e uma referência detalhada da Service Worker API.

Para este tutorial, usaremos um script pronto de service worker “Página off-line”, cortesia do PWA Builder. A partir disso, você pode personalizá-lo com funcionalidades mais elaboradas de acordo com suas necessidades de desempenho, largura de banda de rede, etc. Consulte o Cookbook de Service Worker da Mozilla para obter várias ideias úteis de “receita” de armazenamento em cache.

1. Abra https://www.pwabuilder.com/serviceworkere selecione o service worker de página offline (default ou padrão) e clique no botão Download service worker.
2. Abra a pasta de download e copie esses dois arquivos:
   • ServiceWorker1\pwabuilder-sw-register.js
   • ServiceWorker1\pwabuilder-sw.js

… para a pasta pública do seu projeto de aplicativo da web do Visual Studio. (No Visual Studio, use Ctrl + O para abrir o explorador de arquivos em seu projeto e navegue até a pasta pública).

Vale a pena rever o código em ambos os arquivos, para obter o jist de como registrar um service worker que armazena em cache uma página designada (offline.html ) e a atende quando uma busca de rede falha. Em seguida, precisamos criar uma página “offline.html” simples como um espaço reservado para a funcionalidade off-line do nosso aplicativo.

3. No Solution Explorer, abra o arquivo views / layout.pug e adicione a seguinte linha abaixo das tags de link:

HTML

script(src=’/pwabuilder-sw-register.js’)

Para que seu site possa carregar e executar seu script de registro de service worker.

4. No Solution Explorer, clique com o botão direito do mouse na pasta públicae selecione Add>HTML file. Nomeie-o como html e adicione um <title> e algum conteúdo do corpo, por exemplo:

HTML

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>Offline mode</title>
</head>
<body>
You are now offline.
</body>
</html>

Neste ponto, sua pasta pública deve ter três novos arquivos:

5. Do Solution Explorer, abra o arquivo routes\index.js e inclua o seguinte código logo antes do comando final (module. exports = router;):

JavaScript

router.get(‘/offline.html’, function (req, res) {
res.sendFile(‘public/offline.html’);
});

Isso instrui seu aplicativo a exibir o arquivo offline.html (quando o responsável pelo serviço buscar o cache off-line).

6. Vamos testar seu PWA! Construa (Ctrl + Shift + B) e execute (F5) seu aplicativo da web para iniciar o Microsoft Edge e abra sua página localhost. Então,
   1. Abra o Edge DevTools Console(Ctrl + Shift + J) e verifique se o seu service worker foi registrado .
   2. No painel Depurador, expanda o controle Service Workerse clique em sua origem. Na Visão geral do Service Worker, verifique se o seu service worker está ativado e em execução:

1. Ainda no Depurador, expanda o controle Cachee verifique se a página html foi armazenada em cache.

7. Hora de experimentar o seu PWA como um aplicativo offline! No Visual Studio, interrompa a Depuração(Shift + F5) do seu aplicativo da Web e abra o Microsoft Edge (ou recarregue) no endereço de host local do seu site. Agora ele deve carregar a página html (graças ao seu service worker e ao cache offline)!

Adicionar notificações por push

Vamos tornar nosso PWA ainda mais “semelhante a um aplicativo”, adicionando suporte do lado do cliente para notificações push usando a API Push para assinar um serviço de mensagens e a API Notificações para exibir uma mensagem toast ao receber uma mensagem. Assim como com os Service Workers, estas são APIs baseadas em padrões que funcionam em vários navegadores, portanto, você só precisa escrever o código uma vez para que ele funcione em todos os lugares em que os PWAs são otimizados. No lado do servidor, usaremos a biblioteca de código aberto Web-Push para lidar com as diferenças envolvidas na entrega de mensagens push para vários navegadores.

O exemplo a seguir é adaptado do Push Rich Demo no Manual de Services Workers da Mozilla, que vale a pena conferir para uma série de outras dicas úteis de Web Push e service worker.

1. Instale a biblioteca de envio da webdo NPM .

Em Visual Studio Solution Explorer, clique com o botão direito seu projeto e Open Node.js Interactive Window … . Nele, digite:

.npm install web-push

… para instalar a biblioteca do Web-Push. Em seguida, abra seu arquivo index.js e inclua a seguinte linha na parte superior do seu arquivo, após as outras instruções de requisito:

var webpush = require(‘web-push’);

2. Gere chaves VAPID para o seu servidor.

Em seguida, precisaremos gerar chaves VAPID (Voluntary Application Server Identification) para o servidor enviar mensagens push para o cliente PWA. Você só terá que fazer isso uma vez (ou seja, seu servidor requer apenas um único par de chaves VAPID). Na janela interativado Node.js , digite:

var webpush = require(‘web-push’);

webpush.generateVAPIDKeys();

A saída deve resultar em um objeto JSON contendo uma chave pública e privada, que copiaremos na lógica do nosso servidor.

No seu arquivo index.js, logo antes da linha final ( module.exports = router ), adicione o seguinte:

const vapidKeys = {
publicKey: ”,
privateKey: ”
};
webpush.setVapidDetails(
‘mailto:pwa@example.com’,
vapidKeys.publicKey,
vapidKeys.privateKey
);

… e depois copiar na publickey e PrivateKey valores que você acabou de gerar. Sinta-se à vontade para personalizar também o endereço mailto (embora não seja necessário executar essa amostra).

O blog de engenharia da Mozilla Services tem um bom explicador em VAPID e WebPush se você estiver interessado nos detalhes de como ele funciona nos bastidores.

3. Lidar com solicitações do servidor relacionadas a push.

Agora é hora de configurar rotas para o tratamento de solicitações relacionadas a push do cliente PWA, incluindo a entrega da chave pública VAPID e o registro do cliente para receber pushes.

Em um cenário real, uma notificação por push provavelmente seria originada de um evento na lógica do seu servidor. Para simplificar as coisas aqui, adicionaremos um botão “Notificação de envio” à nossa página inicial do PWA para gerar envios de nosso servidor e uma rota do servidor /sendNotification para manipular essas solicitações.

Ainda no seu arquivo index.js, acrescente as seguintes rotas logo após o código de inicialização VAPID que você adicionou na Etapa 2 acima.

router.get(‘/vapidPublicKey’, function (req, res) {
res.send(vapidKeys.publicKey);
});
router.post(‘/register’, function (req, res) {
// A real world application would store the subscription info.
res.sendStatus(201);
});
router.post(‘/sendNotification’, function (req, res) {
const subscription = req.body.subscription;
const payload = ‘payload’;
const options = null;
webpush.sendNotification(subscription, payload, options)
.then(function () {
res.sendStatus(201);
})
.catch(function (error) {
res.sendStatus(500);
console.log(error);
});
});

Com o código do lado do servidor, vamos analisar as notificações push no cliente PWA.

4. Assine as notificações push.

Como parte de sua função como proxies de rede PWA, os services workers lidam com eventos push e interações de notificação toast. No entanto, como é com a primeira configuração (ou registro) de um service worker, a inscrição do PWA em notificações por push do servidor ocorre no thread principal da interface do usuário do PWA e requer conectividade de rede. Inscrever-se em notificações push requer um registro ativo de service worker, portanto, primeiro você desejará verificar se o responsável pelo serviço está instalado e ativo antes de tentar assiná-lo para enviar notificações por push.

Antes que uma nova assinatura de envio seja criada, o Microsoft Edge verificará se o usuário concedeu a permissão do PWA para receber notificações. Caso contrário, o usuário será solicitado pelo navegador para permissão. Se a permissão for negada, a chamada para registration.pushManager.subscribe lançará uma DOMException, portanto, você precisará lidar com isso. Para mais informações sobre gerenciamento de permissões, consulte Notificações por push no Microsoft Edge .

No seu arquivo pwabuilder-sw-register.js, anexe este código:

JavaScript

// Subscribe this PWA to push notifications from the server
navigator.serviceWorker.ready
.then(function (registration) {
// Check if the user has an existing subscription
return registration.pushManager.getSubscription()
.then(async function (subscription) {
if (subscription) {
return subscription;
}
// Otherwise subscribe with the server public key
const response = await fetch(‘./vapidPublicKey’);
const vapidPublicKey = await response.text();
const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: convertedVapidKey
});
});
}).then(function (subscription) {
// Send the subscription details to the server
fetch(‘./register’, {
method: ‘post’,
headers: {
‘Content-type’: ‘application/json’
},
body: JSON.stringify({
subscription: subscription
}),
});
// Create a button to mimic server pushes for testing purposes
var button = document.createElement(‘input’);
button.type = ‘button’;
button.id = ‘notify’;
button.value = ‘Send Notification’;
document.body.appendChild(button);
document.getElementById(‘notify’).addEventListener(‘click’, function () {
fetch(‘./sendNotification’, {
method: ‘post’,
headers: {
‘Content-type’: ‘application/json’
},
body: JSON.stringify({
subscription: subscription
}),
});
});
});
// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
var padding = ‘=’.repeat((4 – base64String.length % 4) % 4);
var base64 = (base64String + padding)
.replace(/\-/g, ‘+’)
.replace(/_/g, ‘/’);
var rawData = window.atob(base64);
var outputArray = new Uint8Array(rawData.length);
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}

Consulte a documentação do MDN PushManager e os documentos do NPM Web-Push para obter mais detalhes sobre como essas APIs funcionam e suas várias opções.

5. Configure os manipuladores de eventos push e notificationclick.

Com nossa assinatura de envio configurada, o restante do trabalho acontece no service worker. Primeiro, precisamos configurar um manipulador para eventos de envio enviados pelo servidor e responder com uma notificação toast (se a permissão for concedida) exibindo a carga de dados de envio. Em seguida, adicionaremos um manipulador de clique para a toast para descartar a notificação e classificar por meio de uma lista de janelas abertas no momento para abrir e/ou focar a página do cliente PWA pretendida.

No seu arquivo pwabuilder-sw.js, anexe os seguintes manipuladores:

JavaScript

//Respond to a server push with a user notification
self.addEventListener(‘push’, function (event) {
if (“granted” === Notification.permission) {
var payload = event.data ? event.data.text() : ‘no payload’;
const promiseChain = self.registration.showNotification(‘Sample PWA’, {
body: payload,
icon: ‘images/windows10/Square44x44Logo.scale-100.png’
});
//Ensure the toast notification is displayed before exiting this function
event.waitUntil(promiseChain);
}
});
//Respond to the user clicking the toast notification
self.addEventListener(‘notificationclick’, function (event) {
console.log(‘On notification click: ‘, event.notification.tag);
event.notification.close();
// This looks to see if the current is already open and focuses it
event.waitUntil(clients.matchAll({
type: ‘window’
}).then(function (clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == ‘http://localhost:1337/’ && ‘focus’ in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow(‘/’);
}));
});

6.Experimente.

Hora de testar notificações push no seu PWA!

1. Execute (F5) seu PWA no navegador. Como modificamos o código do operador de serviço ( pwabuilder-sw.js), precisaremos abrir o DevTools Debugger (F12) para o painel Visão Geral de Service Worker e cancelar o registro do service worker e recarregar (F5) a página para registrar novamente (ou você pode simplesmente clicar em Atualizar). Em um cenário de produção, o navegador verificará regularmente se há atualizações do service worker e as instalará em segundo plano. Estamos apenas forçando isso aqui para resultados imediatos.

À medida que seu service worker é ativado e tenta assinar seu PWA para enviar notificações, você verá uma caixa de diálogo de permissão na parte inferior da página:

Clique em Sim para ativar as notificações do sistema para o seu PWA.

1. No painel Visão Geral do Worker Service, tente clicar no botão Push. Uma notificação toast com a carga útil (codificação de mensagem “Test push message from DevTools”) deve aparecer:

1. Em seguida, tente clicar no botão Enviar Notificaçãona página inicial do seu PWA. Desta vez, um toast com o “payload” do nosso servidor irá aparecer:

Se você não clicar (ou ativar) uma notificação toast, ela será descartada após alguns segundos e colocada na fila em sua Central de Ações do Windows :

… e com isso você tem o básico das notificações push do PWA!

Indo além

Este guia demonstrou a anatomia básica de uma ferramenta de desenvolvimento Progressive Web App e Microsoft PWA, incluindo Visual Studio, PWA Builder e Edge DevTools.

É claro que há muito mais para fazer e deixar ótimo o seu PWA além do que abordamos, incluindo design responsivo, links diretos, testes entre navegadores e outras práticas recomendadas (sem mencionar a funcionalidade real do aplicativo!), mas, esperamos que este guia forneça a você uma introdução sólida de noções básicas do PWA e algumas idéias sobre como começar. Se você tiver dúvidas sobre o desenvolvimento do PWA com o Windows e/ou o Visual Studio, deixe seu comentário!

Confira nossos outros guias do PWA para saber como aumentar o envolvimento do cliente e fornecer uma experiência de aplicativo mais integrada e integrada ao SO:

• Personalização do Windows. Usando detecção de recurso simples, você pode aprimorar progressivamente o seu PWA para clientes Windows 10 por meio de APIs nativas do Windows Runtime (WinRT), como aquelas para personalizar as notificações de bloco de menuIniciar do Windows e as plataformas da barra de tarefas e (sob permissão) trabalhar com recursos do usuário, como fotos, música e calendário.
• PWAs na Microsoft Store. Saiba mais sobre os benefícios da distribuição da loja de aplicativos e como enviar seu PWA.

Também não deixe de explorar os ótimos recursos de toda a comunidade dev! Os documentos da Web do MDN e o Google Developers têm excelentes guias sobre Aplicativos Progressivos da Web. https://pwa.rocks/ mostra exemplos reais de PWAs e https://hnpwa.com/ compara diferentes estruturas e padrões de desempenho para implementar uma amostra de PWA ( Hacker News reader).

No próximo post: Adapte seu PWA para Windows

Fonte: Microsoft