Como converter WebApp como PWA com notificação push

Neste artigo, veremos como converter um Web Aplicativo ou site para um PWA com uma notificação push usando o Firebase Cloud Messaging.

No mundo moderno, a maioria dos aplicativos da web está sendo convertida em um PWA (Progressive Web App) porque fornece recursos como suporte offline, notificação push , sincronização de fundo. Os recursos do PWA tornam nosso aplicativo da Web mais parecido com um aplicativo nativo e oferecem uma experiência de usuário rica.

Por exemplo, grandes empresas como Twitter e Amazon converteram seus Web App para PWA para maior engajamento do usuário.

O que é um PWA?

PWA = (Web App) + (alguns recursos nativos do app)

PWA é o seu mesmo Web Aplicativo(HTML+CSS+JS). Funciona igual ao seu Web App em todos os navegadores como fazia anteriormente. Mas pode ter recursos nativos quando seu site é carregado em um navegador moderno. Isso torna seu aplicativo da web mais poderoso do que antes e também o torna mais escalável porque podemos pré-buscar e armazenar em cache ativos no front-end, reduzindo as solicitações para o servidor de back-end.

Como o PWA é diferente do Web Aplicativo

• instalável : Sua Web O aplicativo pode ser instalado como um aplicativo nativo
• Progressivo : funciona da mesma forma que seu aplicativo da web, mas com alguns recursos nativos
• Experiência de aplicativo nativo : O usuário pode usar e navegar Web App como um nativo, uma vez instalado.
• Facilmente Acessível : Ao contrário de nosso aplicativo da web, nossos usuários não precisam digitar endereços da web toda vez que visitam. Uma vez instalado, pode ser aberto com um único toque.
• Cache de aplicativos : antes do PWA, o único mecanismo de cache implementado com nosso aplicativo da Web é o uso do cache HTTP, disponível apenas para o navegador. Mas com o PWA, podemos armazenar em cache as coisas usando o próprio código do lado do cliente, que não está disponível em um aplicativo da web.
• (App/Play) publicação na loja : O PWA pode ser publicado na Google Play Store e na IOS App Store.

Converter seu aplicativo para PWA apenas o tornará mais poderoso.

Por que as empresas devem considerar o PWA

Enquanto a maioria dos nossos clientes nos procura e pede para desenvolver o Web Solução de aplicativo primeiro e depois eles pedem Android e aplicativos iOS . Tudo o que vamos fazer é criar a mesma funcionalidade no aplicativo da web para Android/IOS App por uma equipe separada que leva mais custo de desenvolvimento e mais tempo para o mercado.

Mas algum cliente tem um orçamento limitado ou algum cliente pode pensar que o tempo de lançamento no mercado é mais importante para seu produto.

A maioria dos requisitos do cliente pode ser atendida pelos próprios recursos do PWA. Para eles, sugerimos apenas PWA e damos a eles uma ideia para converter seu PWA como um Android App usando TWA se quiserem implantar no Playstore.

Se o seu requisito realmente precisa de recursos de aplicativos nativos que não podem ser atendidos pelo PWA. Os clientes podem ir e desenvolver os dois aplicativos como quiserem. Mas mesmo nesse cenário. Eles podem implantar o PWA na Play Store até Android desenvolvimento está concluído.

Exemplo: Titan Eyeplus

Inicialmente, eles desenvolveram um aplicativo PWA e o implantaram na Play Store usando TWA (Trusted Web Atividade). Uma vez que eles completaram seus Android desenvolvimento de aplicações. Eles implantaram seus verdadeiros Android Aplicativo na play store. Eles alcançaram o tempo de lançamento no mercado usando o PWA e o custo do desenvolvimento.

Recursos do PWA

O PWA oferece aos nossos aplicativos da Web recursos semelhantes a aplicativos nativos.

As principais características são:

• Instalável: um aplicativo da Web instalado como um aplicativo nativo.
• Cache: o cache do aplicativo é possível, o que fornece suporte offline ao nosso aplicativo.
• Notificação por push: A notificação por push pode ser enviada de nosso servidor para envolver nossos usuários em nosso site.
• Geofencing: O aplicativo pode ser notificado por um evento sempre que a localização do dispositivo mudar.
• Solicitação de pagamento: habilite o pagamento em seu aplicativo com uma ótima experiência do usuário como um aplicativo nativo.

E muitos mais recursos para vir no futuro.

Outras características são:

• Atalhos: URLs de acesso rápido adicionados ao arquivo de manifesto.
• Web API de compartilhamento: permite que seu aplicativo receba dados compartilhados de outros aplicativos.
• API Badge: para mostrar a contagem de notificações em seu PWA instalado.
• API Periodic Background Sync: salva os dados do seu usuário até que ele esteja conectado à rede.
• Selecionador de contatos: Utilizado para selecionar os contatos do celular do usuário.
• File Picker: Usado para acessar o arquivo no sistema local/móvel

Vantagem do PWA sobre o aplicativo nativo

O aplicativo nativo tem desempenho melhor que o PWA e tem mais recursos que o PWA. Ainda assim, tem algumas vantagens em relação ao aplicativo nativo.

• O PWA é executado em plataforma cruzada como AndroidIOS, área de trabalho.
• Isso reduz o custo de desenvolvimento.
• Fácil implantação de recursos em comparação com um aplicativo nativo.
• Facilmente detectável porque o PWA (site) é compatível com SEO
• Seguro porque funciona apenas em HTTPS

Desvantagens do PWA sobre o aplicativo nativo

• Funcionalidades limitadas estão disponíveis em comparação com um aplicativo nativo.
• Os recursos do PWA não são garantidos para oferecer suporte a todos os dispositivos.
• A marca do PWA é baixa porque não está disponível na app store ou na play store.

Você pode implantar seu PWA como um Android aplicativo na play store usando android confiável Web Atividade (TWA) . Isso ajudará sua marca.

Coisas necessárias para converter Web Aplicativo para PWA

Para converter, qualquer Web Aplicativo ou site para PWA.

• Service-Worker: o núcleo de qualquer aplicativo PWA para Caching, Pushes Notification, um proxy para nossas solicitações.
• Arquivo de manifesto: Contém detalhes sobre sua aplicação web. Ele costumava baixar nosso aplicativo como um aplicativo nativo na tela inicial.
• Logotipo do aplicativo: imagem de alta qualidade 512 x 512 px para o ícone do aplicativo. Logotipo do aplicativo necessário para PWA na tela inicial, tela inicial, etc. Portanto, temos que criar um conjunto de imagens com proporção de 1: 1 para nosso aplicativo usando qualquer ferramenta.
• Design responsivo: o aplicativo da web deve ser responsivo para funcionar em diferentes tamanhos de tela.

O que é Service Worker:

Um service worker (script do lado do cliente) é um proxy entre seu Web APP e o lado externo, entregando notificações push para o nosso Web App e cache de suporte.

O Service Worker é executado independentemente do javascript principal. Portanto, não tem acesso à API DOM. Ele só pode acessar API IndexedDB , API de busca , API de armazenamento em cache . Mas pode se comunicar com o thread principal com uma mensagem.

Serviço prestado pelo service worker:

• Interceptando solicitações HTTP do seu domínio de origem.
• Receba Notificação Push do seu servidor.
• Disponibilidade offline da nossa aplicação

O service worker controla seu aplicativo e pode manipular suas solicitações, mas é executado de forma independente. Portanto, por esse motivo, o domínio de origem deve ser habilitado com HTTPS para evitar um ataque man-in-the-middle.

O que é o arquivo de manifesto

Um arquivo de manifesto (manifest.json) contém detalhes sobre nosso aplicativo PWA para informar ao navegador.

• nome: Nome do aplicativo
• short_name: Nome abreviado para nosso aplicativo. Se fornecido
• com o nome da propriedade e o short_name, o navegador usará o short_name.
• description: Descrição para descrever nosso aplicativo.
• start_url: Para especificar a página inicial do aplicativo quando nosso PWA foi lançado.
• icons: Conjunto de imagens para PWA para tela inicial, etc.
• background_color: Para definir a cor de fundo da tela inicial em nosso aplicativo PWA.
• exibição: para personalizar a interface do usuário do navegador para exibição em nosso aplicativo PWA.
• theme_color: Cor do tema do aplicativo PWA.
• escopo: escopo de URL do nosso aplicativo a ser considerado para o PWA. O padrão é o local do arquivo de manifesto localizado.
• atalhos: Links rápidos para nosso aplicativo PWA.

Converter Web Aplicativo para PWA

Para fins de demonstração, criei uma estrutura de pastas do site Tecnologico.online arquivos estáticos.

• index.html – página inicial
• artigos/
  • index.html – página de artigos
• autores/
  • index.html – página dos autores
• Ferramentas/
  • index.html – página de ferramentas
• ofertas/
  • index.html – página de negócios

Se você já tem algum site ou Web App, tente convertê-lo em PWA seguindo as etapas abaixo.

Criar imagens necessárias para PWA

Em primeiro lugar, pegue o logotipo do seu aplicativo e corte-o em uma proporção de 1:1 em 5 tamanhos diferentes. Eu tenho usado https://tools.crawlink.com/tools/pwa-icon-generator/ para obter diferentes tamanhos de imagem rapidamente. Então você também pode usar.

Criar um arquivo de manifesto

Em segundo lugar, crie um arquivo manifest.json para seu Web aplicativo com os detalhes do seu aplicativo. Para a demonstração, criei um arquivo de manifesto para o site Tecnologico.

 {
	"name": "Tecnologico",
	"short_name": "Tecnologico",
	"description": "Tecnologico produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people grow.",
	"start_url": "/",
	"icons": ({
		"src": "assets/icon/icon-128x128.png",
		"sizes": "128x128",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-152x152.png",
		"sizes": "152x152",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-192x192.png",
		"sizes": "192x192",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-384x384.png",
		"sizes": "384x384",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-512x512.png",
		"sizes": "512x512",
		"type": "image/png"
	}),
	"background_color": "#EDF2F4",
	"display": "standalone",
	"theme_color": "#B20422",
	"scope": "/",
	"shortcuts": ({
			"name": "Articles",
			"short_name": "Articles",
			"description": "1595 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
			"url": "https://tecnologico.online/articles",
			"icons": ({
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			})
		},
		{
			"name": "Authors",
			"short_name": "Authors",
			"description": "Tecnologico - Authors",
			"url": "/authors",
			"icons": ({
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			})
		},
		{
			"name": "Tools",
			"short_name": "Tools",
			"description": "Tecnologico - Tools",
			"url": "https://tecnologico.online/tools",
			"icons": ({
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			})
		},
		{
			"name": "Deals",
			"short_name": "Deals",
			"description": "Tecnologico - Deals",
			"url": "/deals",
			"icons": ({
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			})
		}
	)
}

Registrar Service-worker

crie um arquivo de script register-service-worker.js e service-worker.js na pasta raiz.

O primeiro, register-service-worker.js, é o arquivo javascript que será executado no thread principal que pode acessar a API DOM. Mas service-worker.js é um script de service worker executado independentemente do thread principal e seu tempo de vida também é curto. Ele é executado sempre que os eventos chamam service workers e é executado até que finalize o processo.

Ao verificar o arquivo javascript do thread principal, você pode verificar se o service worker está registrado nele. caso contrário, você pode registrar o script do service worker (service-worker.js).

cole o trecho abaixo em register-service-worker.js:

 if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

Cole o trecho abaixo em service-worker.js

 self.addEventListener('install', (event) => { // event when service worker install
    console.log( 'install', event);
    self.skipWaiting();
});

self.addEventListener('activate', (event) => { // event when service worker activated
    console.log('activate', event);
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) { // HTTP request interceptor
    event.respondWith(fetch(event.request)); // send all http request without any cache logic
    /*event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event. request);
        })
    );*/ // cache new request. if already in cache serves with the cache.
});

Não nos concentramos em como habilitar o cache para suporte offline. Nós só falamos sobre como converter Web aplicativos para PWA.

Adicione o arquivo de manifesto e o script em todas as tags de cabeçalho da sua página HTML.

 <link rel="manifest" href="https://tecnologico.online/manifest.json">
<script src="/register-service-worker.js"></script>

Atualize a página depois de adicionar. Agora você pode instalar seu aplicativo como abaixo no Chrome móvel.

Na tela inicial, o aplicativo é adicionado.

Se você estiver usando WordPress. Tente usar o plug-in conversor PWA existente. Para vueJS ou reactJS, você pode seguir o método acima ou usar os módulos PWA npm existentes para acelerar seu desenvolvimento. Como os módulos PWA npm já estão habilitados com cache de suporte offline, etc.

Ativar notificação push

Web notificações push são enviadas para o navegador para fazer com que nossos usuários se envolvam/interajam com nosso aplicativo com mais frequência. Podemos ativá-lo usando

• API de notificação : É usado para configurar como nossa notificação push deve ser mostrada ao usuário.
• API push : É usado para receber mensagens de notificação enviadas do nosso servidor para o navegador.

A primeira etapa para habilitar a notificação por push em nosso aplicativo é verificar a API de notificação e obter permissão do usuário para mostrar uma notificação. Para isso, copie e cole o snippet abaixo em seu register-service-worker.js.

 if ('Notification' in window && Notification.permission != 'granted') {
    console.log('Ask user permission')
    Notification.requestPermission(status => {  
        console.log('Status:'+status)
        displayNotification('Notification Enabled');
    });
}


const displayNotification = notificationTitle => {
    console.log('display notification')
    if (Notification.permission == 'granted') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            const options = {
                    body: 'Thanks for allowing push notification !',
                    icon:  '/assets/icons/icon-512x512.png',
                    vibrate: (100, 50, 100),
                    data: {
                      dateOfArrival: Date.now(),
                      primaryKey: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, options);
        });
    }
};

Se tudo correu bem. Você receberá uma notificação do aplicativo.

‘Notificação’ na janela nos dirá que a API de notificação é compatível com esse navegador. notificação.permissão dirá que o usuário tem permissão para mostrar a notificação. Se o usuário permitir nosso aplicativo, o valor será ‘concedido’. se o usuário rejeitou o valor será ‘bloqueado’.

Habilitar Firebase Cloud Messaging e criar assinatura

Agora começa a parte real. Para enviar notificações do seu servidor para o usuário, precisamos de um endpoint/assinatura exclusivo para cada usuário. Para isso, vamos usar mensagens de nuvem do firebase.

Como primeiro passo, crie uma conta firebase acessando este link https://firebase.google.com/ e pressione começar.

1. Crie um novo projeto com um nome e pressione continuar. Vou criá-lo com o nome Tecnologico.
2. Na próxima etapa, o Google Analytics é ativado por padrão. Você pode alternar que não precisamos disso agora e pressionar continuar. Você pode ativá-lo mais tarde em seu console do firebase, se necessário.
3. Depois que o projeto for criado, ele ficará como abaixo.

Em seguida, vá para as configurações do projeto e clique em mensagens na nuvem e gere chaves.

Das etapas acima, você tem 3 chaves.

• chave do servidor do projeto
• Web chave privada de certificados push
• Web push certificados chave pública

Agora cole o trecho abaixo em register-service-worker.js:

 const updateSubscriptionOnYourServer = subscription => {
    console.log('Write your ajax code here to save the user subscription in your DB', subscription);
    // write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
};

const subscribeUser = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    })
    .then((subscription) => {
        console.log('User is subscribed newly:', subscription);
        updateSubscriptionOnServer(subscription);
    })
    .catch((err) => {
        if (Notification.permission === 'denied') {
          console.warn('Permission for notifications was denied')
        } else {
          console.error('Failed to subscribe the user: ', err)
        }
    });
};
const urlB64ToUint8Array = (base64String) => {
    const padding = '='.repeat((4 - base64String.length % 4) % 4)
    const base64 = (base64String + padding)
        .replace(/-/g, '+')
        .replace(/_/g, '/')

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray(i) = rawData.charCodeAt(i);
    }
    return outputArray;
};

const checkSubscription = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    swRegistration.pushManager.getSubscription()
    .then(subscription => {
        if (!!subscription) {
            console.log('User IS Already subscribed.');
            updateSubscriptionOnYourServer(subscription);
        } else {
            console.log('User is NOT subscribed. Subscribe user newly');
            subscribeUser();
        }
    });
};

checkSubscription();

Cole o snippet abaixo em service-worker.js.

 self.addEventListener('push', (event) => {
  const json = JSON.parse(event.data.text())
  console.log('Push Data', event.data.text())
  self.registration.showNotification(json.header, json.options)
});

Agora tudo pronto no front-end. Ao usar a assinatura, você pode enviar notificações push para seu usuário sempre que quiser, até que eles não tenham negado os serviços push.

Empurre do back-end node.js

Você pode usar o web-push módulo npm para facilitar.

Trecho de exemplo para enviar notificação por push do servidor nodeJS.

 const webPush = require('web-push');
    // pushSubscription is nothing but subscription that you sent from your front-end to save it in DB
    const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    //your web certificates public-key
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //your web certificates private-key
    const vapidPrivateKey = 'web-certificate private key';

    var payload = JSON.stringify({
      "options": {
        "body": "PWA push notification testing fom backend",
        "badge": "/assets/icon/icon-152x152.png",
        "icon": "/assets/icon/icon-152x152.png",
        "vibrate": (100, 50, 100),
        "data": {
          "id": "458",
        },
        "actions": ({
          "action": "view",
          "title": "View"
        }, {
          "action": "close",
          "title": "Close"
        })
      },
      "header": "Notification from Tecnologico-PWA Demo"
    });

    var options = {
      vapidDetails: {
        subject: 'mailto:your-actual-mail@gmail.com',
        publicKey: vapidPublicKey,
        privateKey: vapidPrivateKey
      },
      TTL: 60
    };

    webPush.sendNotification(
      pushSubscription,
      payload,
      options
    ).then(data => {
      return res.json({status : true, message : 'Notification sent'});
    }).catch(err => {
      return res.json({status : false, message : err });
    });

O código acima enviará uma notificação push para a assinatura. O evento push no service-worker será acionado.

Empurrar do back-end do PHP

Para o back-end do PHP, você pode usar o web-push-php pacote do compositor. Verifique o código de exemplo para enviar notificações push abaixo.

 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

require __DIR__.'/../vendor/autoload.php';
use MinishlinkWebPushWebPush;
use MinishlinkWebPushSubscription;

// subscription stored in DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = array (
'options' =>  array (
                'body' => 'PWA push notification testing fom backend',
                'badge' => '/assets/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'vibrate' => 
                array (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'data' => 
                array (
                  'id' => '458',
                ),
                'actions' => 
                array (
                  0 => 
                  array (
                    'action' => 'view',
                    'title' => 'View',
                  ),
                  1 => 
                  array (
                    'action' => 'close',
                    'title' => 'Close',
                  ),
                ),
),
'header' => 'Notification from Tecnologico-PWA Demo',
);

// auth
$auth = (
    'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
    'VAPID' => (
        'subject' => 'mailto:your-actual-mail@gmail.com', // can be a mailto: or your website address
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
        'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
    ),
);

$webPush = new WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// webpush 6.0
$webPush->sendOneNotification(
  Subscription::create($subsrciptionData),
  json_encode($payloadData) // optional (defaults null)
);

Conclusão

Espero que isso lhe dê uma ideia sobre como converter aplicativos da Web em PWA. Você pode verificar o código-fonte deste artigo aqui e demonstrá-lo aqui . Testei a notificação push enviando-a do back-end com a ajuda do código de exemplo também.