Formação Oracle DBA Completa


Como adicionar notificações (Push notification) em seu site

Como adicionar notificações (Push notification) em seu site

6 de fevereiro de 2017 1 Por Ramos de Souza Janones
Powered by Rock Convert

Que tal colocar um serviço de notificações (Push Notification) em seus sites e totalmente de graça? Com o One Signal você pode.

O que é Push Notification?

Push notification é uma tecnologia que tem origem nos aplicativos mobile. Se você tem um smartphone, com certeza já foi impactado por algum push antes.

Quando você está no seu smartphone e recebe um aviso de um novo email na sua inbox, ou quando um amigo seu comenta em uma foto sua no Facebook, você está sendo impactado pelo push notification daquele aplicativo.

Quando surgiu na web: O Chrome habilitou essa tecnologia em março do ano passado. Portanto, é um canal ainda muito novo, mas já consagrado no mobile. O Firefox foi outro grande navegador que habilitou essa funcionalidade ainda no começo de 2016.



As possibilidades de uso para web são várias – e tudo vai depender do contexto do seu negócio. Ao longo do post, vamos dar algumas dicas de uso para você que está interessado em implementar o push notification em seu site.

Push vs email: o push notification tem um objetivo diferente do email, e o uso de um não substitui o do outro.

Leia também: 7 E-Books Indispensáveis sobre Marketing Digital

Não há muito segredo: com o push você envia notificações e avisos curtos para seus inscritos, enquanto que no email você pode realizar uma comunicação mais extensa e completa.

As notificações possuem uma grande restrição: suas mensagens devem conter no máximo 100 caracteres, o que faz com que elas precisem ser sempre objetivas e sucintas.

Frontend Do Zero Ao Profissional

Possibilidades de uso

As possibilidades de uso são várias, tudo depende da sua criatividade. Considerando que você já tenha um conhecimento básico sobre seu público-alvo, comece definindo um objetivo para você. O uso será para gerar mais conversão, tráfego ou awareness?

Aqui vai algumas dicas de como você pode usar o push o seu site:

  • Updates/novidades: você pode usar o push como um canal extra para distribuição dos conteúdos ricos produzidos por você. Avise os visitantes do seu site e redirecione eles para uma landing page;
  • Ecommerce: se você tem um ecommerce, crie uma segmentação que notifica os leads que abandonaram o carrinho antes da compra;
  • Novos produtos/promoções.
  • Atualizações em geral: aplicativos web também podem usar a tecnologia do push para notificar os usuários sobre alguma atualização ou oferta específica. 

Antes de continuar, assine as notificações de nosso site, clicando no site que aparece flutuando do lado esquerdo, como mostra a imagem a seguir:



Criando um Push Notification para seu site

  1. Acesse o site da One Signal e faça seu cadastro. Não há segredo.
  2. A primeira tela é de configuração de seu serviço:

Há diversas opções para os mais variados tipos de aplicativos. Como o objetivo deste artigo é para websites, vamos focar no tema. Selecione a opção Website Push e clique em Next.

Na próxima tema você pode configurar para os principais navegadores do mercado. Neste tutorial vou fazer só no Chrome e Firefox, mas o Safari é igual. Clique em Next.

Em:

Site URL – Você vai inserir a RLD de seu site ou Blog. 

Default Notification Icon URL – Você pode personalizar o ícone de notificação. É opcional. Deixe padrão. Vamos todos seguir o padrão.

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

My site is not fully HTTPS – Caso seu site não tenha certificado (geralmente e-commerce que possui) ative esta opção. Se tiver o certificado desative. 

Choose Subdomain – É o sub-dominio que será criado para administração e envio de suas web notifications. 

Salve este sub-dominio e clique em Save.

Aqui podemos escolher qual SDK queremos utilizar. Vamos focar no Website Push, WordPress e Server API ficam para novos artigos. Mas se utiliza do WordPress, instale o plugin OneSignal, é bem intuitivo sua instalação e configuração. Clique em Next.

Por fim será apresentada o ID de sua aplicação, o Your App ID (apaguei porque vou realmente utilizar no site)

Leia também: 7 E-Books Indispensáveis sobre Marketing Digital

Agora o código HTML. Se você estrutura bem o seu site, o faz em “blocos” e há o Header padrão para todas as página. Se não tem esta prática, é melhor começar a utilizar. 

O código é o seguinte:

<head>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "YOUR_APP_ID",
autoRegister: false, /* Set to true to automatically prompt visitors /
subdomainName: 'SUBDOMAIN_NAME_SEE_STEP_1.4',
/
subdomainName: Use the value you entered in step 1.4: https://imgur.com/a/f6hqN
/
httpPermissionRequest: {
enable: true
},
notifyButton: {
enable: true / Set to false to hide */
}
}]);
</script>
</head>



Observe que é um script em Javascript fácil de entender, comentei ele, e há a documentação, em inglês: https://documentation.onesignal.com/docs/web-push-sdk-setup-http  

Em meu site ficou assim:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "AQUI MEU CÓDIGO API, QUE POR SEGURANÇA NÃO COMPARTILHO",
autoRegister: false,
/* Set to true to automatically prompt visitors */
subdomainName: 'sucessocomsoftware-com.onesignal.com',
/*
subdomainName: Use the value you entered in step 1.4: https://imgur.com/a/f6hqN
*/
httpPermissionRequest: {
enable: true
},
notifyButton: {
enable: true /* Set to false to hide */
}
}]);

</script>

Traduzindo para o Português

Vou deixar para próximo artigo, mas que tal dar uma explorada antes? Acesse a documentação: https://documentation.onesignal.com/docs/customize-permission-messages

Dúvidas, escreva a baixo nos comentários! 😉

Quer receber conteúdos sobre Startups e Marketing Digital?

* Campos requeridos




Artigos relacionado a Javascript

Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

– GitHub lança repositórios privados gratuitos para até três colaboradores

– Como fazer testes unitários no Node.js com NodeUnit

– Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

– Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

– Apollo lança a Plataforma GraphQL e extensão para VS Code

– As novidades do Angular 7

– Tecnologias que andam bombando no GitHub ultimamente

– Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

– Começando com React Native

– React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

– React: Tutoriais Fantásticos e Onde Habitam

– React – O que é Shadow DOM

– O que são middlewares em NodeJS?

– Conhecendo os super poderes dos comandos Git e GitHub

Web

Artigos e dicas sobre desenvolvimento web que você vai gostar:

– 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

– UX – User Experience ou Experiência do Usuário – Princípios

– Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

– Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– Bootstrap – O que são grids CSS

– Quando usar ANSI e quando usar UTF-8

– W3C anuncia o DRM como uma recomendação

– Crie um loading animado divertido usando CSS3

– Como descobrir se uma cor hexadecimal é escura ou clara

– Como usar tags semânticas

– O que é o GZIP e como melhora a velocidade de um site

– Como adicionar notificações (Push notification) em seu site

Siga os bons!

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)

Sumário
Como adicionar notificações (Push notification) em seu site
Nome do artigo
Como adicionar notificações (Push notification) em seu site
Descrição
Que tal colocar um serviço de notificações Web para Desktop em seu site, e totalmente de graça? Com o One Signal você pode.
Autor
Nome
Ramos da Informática
Logo



Frontend Do Zero Ao Profissional