Usando notificações por push pra aplicações Web

programador

Olá Pessoal tudo certo?

Antes de tudo se você ainda não tem o Sencha Cmd instalado em sua máquina leia nosso post anterior Introdução ao Sencha CMD, hoje irei trazer um artigo de autoria da Sencha sobre como melhorar sua aplicação web através de notificações push e Webpush e seus conceitos, espero que ele ajude vocês com suas futuras aplicações web.

Protocolo de notificações por push da Web

O protocolo Web Push Notifications é relativamente novo. Ele permite que os aplicativos da Web funcionem como aplicativos nativos e recebam mensagens enviadas de um servidor a qualquer momento, mesmo quando o aplicativo da Web não está ativo ou não está carregado no momento em um navegador. Isso permite envolver os usuários com notificações urgentes e relevantes quando eles não estiverem usando seu aplicativo e motivá-los a retornar ao aplicativo.

web-push

Isso deixa claro o valor comercial da implementação de notificações por push da Web em seus aplicativos da Web. Aumenta o engajamento do usuário. O valor geral do seu aplicativo também aumenta, porque as notificações por push tornam seu aplicativo mais útil para seus usuários. Isso melhora a usabilidade dos aplicativos da Web e nos aproxima do desenvolvimento de um único aplicativo da Web para todas as plataformas, em vez de precisarmos desenvolver um aplicativo nativo para cada plataforma.

Web Push vs Sockets da Web

Antes de entrar nos detalhes da tecnologia, gostaria de falar um pouco sobre as diferenças entre Web Push e Web Sockets. Primeiro, aqui está o que eles têm em comum. Os Web Push e Web Sockets são projetados para implementar comunicação em tempo real entre o aplicativo da Web e o servidor de aplicativos e para enviar dados e atualizações em tempo real do servidor de aplicativos para o seu aplicativo da Web.

Aqui estão as diferenças:

• Os Web Sockets só podem ser usados ​​quando uma página da Web é carregada e ativa. Mas o oposto ocorre com as notificações por push da Web, que podem ser usadas a qualquer momento, inclusive quando o aplicativo está ativo, inativo ou não carregado, e quando o navegador não está ativo ou está fechado.

• Os dados enviados usando o Web Push devem ser criptografados e há um limite de tamanho por mensagem (não deve ser maior que 4Kb). Há também um limite de contagem para o número de mensagens que você pode enviar (o valor limite exato depende do navegador). Alguns navegadores (por exemplo, o Chrome) também podem exigir que uma notificação seja exibida ao usuário sempre que uma mensagem é recebida. Você não tem nenhuma dessas limitações quando usa Web Sockets: você pode enviar qualquer número de mensagens não criptografadas de qualquer tamanho e tratá-las como quiser; e você pode exibir uma notificação ou atualizar silenciosamente os dados em seu aplicativo ou até mesmo não fazer nada.

• A regra geral é usar o Web Sockets para enviar atualizações de dados comuns para seu aplicativo da Web quando um usuário estiver interagindo com o aplicativo. Use as notificações por push da Web para enviar mensagens urgentes e importantes a um usuário que precisam ser recebidas imediatamente, independentemente de o usuário estar ou não trabalhando com seu aplicativo no momento.

Conceitos Técnicos

Vamos para os detalhes técnicos da tecnologia. Eu gostaria de explicar os detalhes usando um jogo com regras especiais, jogadores e rodadas. Vou começar descrevendo os jogadores do jogo. Existem 5 jogadores envolvidos neste jogo chamados Web Push Notifications:

• Aplicação Web

• Service Worker

• Navegador

• Application Service

• Push Server

Push é um serviço implementado pelo fornecedor do navegador; é uma ponte de comunicação entre o seu servidor de aplicativos e um navegador. Ele é responsável por entregar mensagens do seu servidor de aplicativos para o navegador.

Usando um jogo para demonstrar Notificações por Push da Web

Usando um jogo, demonstrarei como você pode adicionar notificações push da Web aos seus aplicativos. As regras deste jogo são definidas por várias especificações fornecidas pelo World Wide Web Consortium e pela Internet Engineering Task Force:

• As comunicações entre o Navegador e o aplicativo da web ou o service worker associado a esse aplicativo são descritas na especificação do Push API.

• A exibição de diferentes tipos de notificações, bem como a manipulação de notificações, são descritas na especificação da API de Notificações.

• As comunicações entre o Application Server e o Push Server são definidas na especificação do Web Push Protocol.

• Há também especificações adicionais que descrevem a criptografia de mensagens push e a identificação do servidor de aplicativos que permitem ao servidor de aplicativos provar que tem permissão para enviar mensagens para o usuário.

web-push

Rodadas de Jogo

O jogo foi dividido em 4 rodadas para exemplificar o conceito e o alvo de cada uma delas e como você pode implementar todas as etapas no seu applicatiovo

1º Rodada: Registro do Service Worker

As Notificações por Push Web exigem que o Service Worker lide com mensagens push, portanto, a primeira rodada será registrar seu service worker. Apenas o seu aplicativo da web e o navegador estão envolvidos nesta rodada. E esta rodada ocorre no carregamento da página.

O aplicativo da Web envia uma solicitação a um navegador para registrar um Service Worker e o navegador responde com o objeto SeviceWorkerRegistration se o Service Worker foi registrado com êxito.

ServiceWorker

Para implementar essa rodada, adicione o seguinte código ao seu aplicativo Web

Veja também:

EXTJS COMMUNITY EDITION

EXTJS COMMUNITY EDITION

Conheça a versão de entrada do ext js, gratuíta até USD 10.000,00 faturamento anual. Com essa versão você irá trabalhar com o último modern toolkit da Sencha.

Sencha Test 2.3.0 GA

Sencha Test 2.3.0 GA

Melhor integração para sua aplicação

Parceria entre Sencha e Stack Overflow

Parceria entre Sencha e Stack Overflow

Novidades da Sencha para 2020

O que é Postman?

O que é Postman?

Postman é um aplicativo com a função de testar e desenvolver APIs em uma interface bastante simples e intuitiva.

Daniel da Cunha Bueno

Daniel da Cunha Bueno

Atualmente como Sencha MVP Senior Software Enginer em aplicações web e mobile (#C,Sencha Ext JS, Xamarin).