Habilitar notificações push no blogger [parte 1/3]

Nesse post irei explicar como habilitar notificações push em sites Blogger, de forma fácil e grátis (o que é mais importante).

Inicialmente eu procurei por várias opções de ferramentas de notificações push, encontrei enumeras porem achei a maioria complicada demais, algumas pediam cartão de crédito e outras simplesmente não funcionavam como eu queria, então por uma breve ajuda do @tecnoblog encontrei parte do que procurava.

O que é a notificação Push?
Em primeiro lugar, a palavra Push traduzida do inglês, significa empurrar. Talvez, no seu dia a dia, você já enfrentou uma porta escrita com o aviso de empurrar em inglês. Sabendo que o termo push, é o “empurrão” dessa tecnologia no envio da mensagem, a palavra “notification” (notificação) é designada para a mensagem recebida no seu celular.

Porque usar notificações Push?

A principal vantagem de usar notificação Push é o usuário ser notificado assim que tiver um novo post em seu blog/site e com isso gerando um maior retorno de usuários ao seu blog, também tem o fator taxa de refeição que reduz o que é bom para o site (não vou entrar em detalhes aqui, mas futuramente irei fazer um post novo sobre isso).

1- OneSignal

Esse tutorial irá necessitar de duas aplicações o OneSignal e o Zapier. O OneSignal irá enviar as notificações e o Zapier irá fazer a leitura do Feed quando ocorrer alguma alteração enviar a notificação através do OneSignal.

Faça o cadastro no site OneSignal:

https://onesignal.com/ (é possível logar com sua conta Google, Git e Facebook)

Adicionando um novo App:

Após o cadastro e logar, vamos criar um novo app, clique em "Add new app", e defina um nome para ele e clique em Create:

Add New App

Defina o Nome e clique em Create

Agora já temos nossa app de notificação criada, o OneSignal tem como enviar notificações para diversas plataformas Android, Windows Phone, Apple IOS, nesse post irei focar apenas nos navegadores Chrome, Firefox e Apple Safari.

Clique em App Settings no menu lateral esquerdo e vamos configurar as notificações para os navegadores.

Configurando as notificações no Google Chrome e Mozilla Firefox

Clique em Configure na linha do Chrome e Firefox:

Clique em Configure

Aqui vamos definir as informações do site;

Site URL

Coloque a URL do site. (Com http:// ou https://)

Default Notification Icon URL

Imagem padrão da notificação, recomendo uma imagem de resolução mínima de 192x192px.
Dica: você pode upar a imagem em um post e depois só pegar o caminho dela e colar lá que funciona perfeitamente. Esse campo é opcional, mas recomendo colocar a imagem!

My site is not fully HTTPS

Marque essa opção mesmo que o site esteja com https.

Choose Subdomain

Aqui você define um subdomínio.onesignal para as notificações, por exemplo o meu caso, bulfaitelo-project.onesignal.com.

Depois de fazer isso clique em Save e pronto suas notificações para o Chrome e Firefox estão salvas

Definindo Site URL, imagem e marque My site is not fully HTTPS

Crie o subdomínio e por fim clique em Save

Assim que pagina carregar irá perceber que o status vai está marcado como Active isso é um bom sinal.

Configurando as notificações no Apple Safari

Clique em Configure na linha do Apple Safari:

Clique em Configure

Aqui vamos definir as informações do site:

Site Name

Nome do site, exemplo "Bulfaitelo Project"

Site URL

Coloque a URL do site. (Com http:// ou https://)

I'd like to upload my own .p12 certificate

Particularmente eu não sei pra que serve isso, então deixe desmarcado :)

I'd like to upload my own notification icons

Aqui você pode upar uma imagem para as notificações no Safari, as imagens devem ter o tamanho de 256x256px.

Após preencher os campos basta clicar em Save que terminamos a configuração dos navegadores

Preencha o Site Name, Site URL e clique em Save.

Novamente será redirecionado para a página de configurações dos aplicativos, repare que agora as duas aplicações estão com os status ativo, repare também que é gerado um Web ID para o Safari iremos utilizar posteriormente.

Chrome Firefox e Safari configurados (ocultei a URL do Safari...)

Terminamos parcialmente a configuração dentro do OneSignal agora iremos partir para a configuração dentro do Blogger na parte do post.

Pelo post ficar muito grande acabei optando por dividir ele em 3 partes, abaixo você segue para a segunda, que focamos na configuração do Blogger.

Habilitar notificações push no blogger [parte 2/3]

Habilitar notificações push no blogger [parte 3/3]

Se vocês gostaram desse Post não deixe de compartilhar com seus amigos!!!
E para não perder nenhuma novidade nos sigam nas redes sociais:
Twitter: @Bulfaitelo
Facebook: Bulfaitelo Project
Blogger: Bulfaitelo Project

About Thiago Rodrigues

Formado em Sistema de Informação pela Faculdade Paraíso
O que falar de mim? Não á muito, mas garanto que meu objetivo aqui é somente ajudar!
Atualmente desenvolvendo o projeto do QiEstudo.