Ir para conteúdo
  • Cadastre-se

Como implementar push notification no seu website


Grundor

Posts recomendados

  • L2JBr ADM

Você já notou que alguns sites estão enviando notificações através do navegador?

Se você acessar o https://top.l2jbrasil.com irá perceber que pedimos permissão para lhe enviar notificações, essas notificações são chamadas de "push notifications"

O que é um 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.


Essa tecnologia foi extendida aos navegadores através do que estão chamando de web push notification. Hoje o Chrome e o Firefox são os pioneiros na implementação, mas já conta com compatibilidade no Safari e Opera também.

O que é preciso para ter push notification?

Para enviar push é preciso ter um servidor para gerenciar as notificações, existem diversas soluções por aí, algumas gratuitas até uma certa quantidade, e outras nem tanto. Você pode fazer seu próprio servidor de push notification usando tecnologias como MQTT . Mas porque perder tempo montando um servidor e gastando dinheiro com toda essa infra-estrutura se você pode implementar isso de graça?

Existem diversas empresas que fornecem os servidores de push gratuitamente por aí, mas no meio desas uma se destaca, é a https://onesignal.com/, essa solução permite você enviar notificações push ilimitadas.

https://i.imgur.com/X2F9tTd.png

"Preços que você simplesmente não pode vencer. Sem limites em dispositivos, notificações ou integrações. É sério."

 

Configurar seu site para enviar web push notification

:excl: Então não temos mais a limitação de infra, qualquer um pode ter push notification agora, a única coisa que você precisa é ter o site rodando em HTTPS, sem https não é possível. Em breve vou fazer um tutorial de como configurar https gratuitamente. Me cobrem.

Partindo do ponto que vocês já tem https no site de vocês, basta vocês criarem a conta.

Criando uma conta na onesignal:

No site,https://onesignal.com/, procure no canto superior direito o botão "Log In"


JmzGAtc.png

Irá abrir um modal, nesse modal procure na parte de baixo pela opção "Sign up.", clique nesse link:
78b9Pfx.png


O modal deverá se parecer com esse:

LOscz0M.png
Você poderá usar algumas opções de login em Oauth 2.0 como facebook, google e github, ou entao fornecendo seu email e senha.

Dashboard one signal:

Após criar a conta, confirmar o email e tudo mais você deverá ser redirecionado para uma tela como essa, explicarei mais abaixo sobre esse dashboard:

lRJ0lH3.png

Clique no botão adicionar uma nova aplicação e digite um nome para ela.

peDOZs7.png



Você verá que existem diversas formas, isso significa que você pode implementar a notificações em outras plataformas, quem sabe num mod in-game?

Ná próxima tela selecione "Chrome & Firefox", você pode realizar a configuração das outras plataformas quando quiser.
Rb5N7n9.png
Será necessário adicionar o seu site e um ícone , que deve ter a dimensão 192x192 ou maior, não recomendo maior que 256x256, já que quem receber essa notificação vai fazer o download da imagem, e não vai fazer diferença ter um icone maior que esse.

4MjGUSN.png


Note que na imagem há uma opção para quem não tem HTTPS, porém nesse casso terá que habilitar o HTTPS Fallback, e esse tutorial não irá tratar disso, estou levando em consideração que você já tem o https ativo para seu site.
Clique em SAVE e selecionar qual SDK vamos instalar , para esse tutorial vamos usar o website push. Lembrando mais uma vez que você pode configurar as outras opções depois.

UsTfoOJ.png
Será gerado então um ID de Aplicação, e o site irá te dizer o que você precisa fazer à seguir:

AQRrrq9.png


Não feche essa janela, vamos precisar desses "Check Subscribed Users" para quando terminarmos as configuraçoes.
Na documentação deles tem tudo explicado, mas vou resumir.

Depois que você configurou os arquivos, e adicionou-os à sua hospedagem é hora de ativar o script.

<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
 var OneSignal = window.OneSignal || [];
 OneSignal.push(["init", {
 appId: "YOUR_APP_ID", //Adicione seu ID
 autoRegister: true, //Mude para false se não quiser que o site solicite permissão para registrar quando o usuário acessar.
 notifyButton: {
  enable: true //Mude para false para desabilitar o botão ²
 }
}]);
</script>
</head>

²A vantagem de ter o botão ativado é que se um usuário tiver dificuldades para registrar-se na notificação ele pode clicar ali e obterá ajuda de como resolver.

Feito isso, seu site já está abilitado para receber notificações, para ter certeza volte ao site da onesignal e clique no botão "Check for subscribers Users"

vyNA08I.png

Se a mensagem aparecer conforme abaixo, tudo está ok. se não é porque nem você acessou o site ainda para se subiscrever na notificação, faça isso e repita a operação.

Como enviar e gerenciar notificações?

Através do dashboard da OneSignal é claro! Acesse https://onesignal.com/apps e clique na sua aplicação, um dashboard como esse deverá ser exibido.

GK9ZDvE.png

  • Em "New Message", você poderá enviar uma nova mensagem.
  • Em "Scheduled" você poderá ver todas as mensagens agendadas.
  • Em "Sent", as mensagens já enviadas tais como as estatísticas
  • É possível criar "Templates", estes templates podem ser usados para enviar e agendar mensagens.
  • Em "Automated" é possível criar algumas automações e agendar notificações.
  • Em "All Users" será possível visualizar seus usuários, não há muito o que fazer mas você pode buscar por um ip específico.
  • Em "Segumentos", será exibido uma tela como essa, já existem alguns pré-sets mas você ainda pode criar novos seguimentos.

Clique em New Message (1) , você terá 4 passos para enviar uma mensagem:


ON12GqN.png

No Primeiro vamos escolher a audiência, você poderá escolher entre enviar para todo mundo, para um seguimento em particular ou para dispositivos de teste. Clique em Next.

Você será levado para a tela da da mensagem, por padrão o idioma inicial é o inglês, não achei opção para alterar, mas você pode adicionar quantos idiomas quiser, a notificação será entregue no idioma padrão do navegador do usuário. Clique em "ADD Another Language" para adicionar Português por exemplo. Após preencher o título e a mensagem, clique em Next.


VyxsBe5.png


Na próxima tela temos algumas configs importantes:


A primeira dela é a possibilidade de enviar imagem na notificação, para o envio dessas imagens recomendo a leitura da documentação https://documentation.onesignal.com/v3.0/docs/rich-media, o que posso dizer é que a imagem precisa ter um tamanho padronizado e estar ospedada em um https.

RiCDeP5.png



O próximo é o campo mais importante: Launch URL[/size]

Nele você deve configurar a url para onde vai ao clicar na notificação, recomendo usar recursos como o google shortener https://goo.gl para que você tenha controle sobre a quantidade de cliques de uma forma mais rápida, pois o dashboard da onesignal não está tão claro assim.


Após isso, explore as demais opções, e vamos seguir para a próxima opção O Schedule ou agendamento:

a75BC9K.png

Você pode escolher uma das opções, Imediatamente, agendado numa hora específica e ainda otimizar por usuário, ecolhendo entre 3 formas: Imediatamente,Inteligente (escolhe o melhor horário para o usuário com base nos dados do perfil dele) e otimizado por timezone.

Feito isso, é só clicar em CONFIRM , será apresentado uma tela de revisão, e então você pode clicar em "SEND MESSAGE" e enviar suas notificações.
Sua notificação chegará a todos os inscritos:

npPRy0C.png




Pronto, você tem push notification no seu site. Uma importante ferramenta de comunicação nos dias atuais.


Use com sabedoria :)

EJoOSOj.gif

Sua pergunta foi respondida? Certifique-se de marcar a resposta como a solução aceita.
Se existe mais de uma resposta, utilize o "vote up" para destacá-la.
Se você achar uma resposta útil, diga obrigado clicando no botão "Gostei".

Link para o comentário
Compartilhar em outros sites


Ótimo tuto Grundor, a quanto tempo você não fazia algo assim em ^~^

Um mundo de diversão no Lineage 2

https://www.primeworld.com.br

Discord: Em breve

Comunidade brasileira de Lineage. Interlude Remastered / High Five / Essence 

Classes remasterizadas, sistemas únicos, diversão garantida.

Link para o comentário
Compartilhar em outros sites

  • L2JBr ADM

Eu já cheguei usar da one signal mais não gostei.

atualmente estou usando o sendpulse é bom também!

 

otimo topico.

O sendpulse é bom tem a possibilidade de mail marketing também(15k mensagens por mês) , porém para ter mais de 2,5kinscritos é preciso pagar. Em 2 dias que implementei no top l2jbrasil já estamos com 1800 inscritos.

EJoOSOj.gif

Sua pergunta foi respondida? Certifique-se de marcar a resposta como a solução aceita.
Se existe mais de uma resposta, utilize o "vote up" para destacá-la.
Se você achar uma resposta útil, diga obrigado clicando no botão "Gostei".

Link para o comentário
Compartilhar em outros sites

  • Grundor featured this Tópico
  • Registre-se

    Faça parte da maior e  mais antigas comunidades sobre Lineage2 da América Latina.





  • Patrocinadores

  • Quem Está Navegando

    • Nenhum usuário registrado visualizando esta página.
  • Posts

    • Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?    
    • muchas gracias muy lindos NPC 🙂
    • relaxa jovem gafanhoto, testa as quests. e posTa os erros indesejaveis.  
    • Se alguém pudesse me ensinar como codificar as missões, eu ficaria feliz em fazer isso sozinho ou pelo menos ajudar. Eu realmente quero jogar em um servidor onde todas as quests funcionem bem e melhor ainda se você puder fazer quests customizadas!
    • mas no interlude, nem todas as quests de class,  vai mostrar onde tem que ir, ate o reborn nao mostrava quando era interlude, só mostrou depois que eles colocaram client classic pra rodar, e ficou melhor ainda quando virou hellbound em diante, mas ha sim alguma chance de modificar isso direto no script para fazer igualmente, só basta te um pouco de paciencia e persistencia exato
    • 408_PathToElvenwizard dá Orion eu tive que mexer tbm, até modifiquei e consegui deixar ela igual do Classic, com a seta e a marcação no mapa. (não retail IL) Dá pra importar py de várias revs, o foda é que não da regular as quest py através do debug em tempo real, pelo menos eu não consegui rsrs
    • Hasta el momento todas las QUESTS son completables si te guias con un tutorial de youtube. El problema es que tienen bugs de locacion y de subquests que no avanzan o no te marcan correctamente a donde ir en el mapa, cosa que en Retail si se ve como corresponde.
    • estranho, mas pelo menos a galera nunca reclamo das quests quando tinha aberto 5x, geral fez class primeira e segunda job, poucos que compraram a class
    • en RUSaCis-3.5 data pack, las Quests estan en formato .java y son diferentes a como estan redactadas en jOrion y jFrozen 1.5 (ProyectX) package net.sf.l2j.gameserver.scripting.quest; import net.sf.l2j.commons.random.Rnd; import net.sf.l2j.gameserver.enums.Paperdoll; import net.sf.l2j.gameserver.enums.QuestStatus; import net.sf.l2j.gameserver.enums.actors.ClassId; import net.sf.l2j.gameserver.model.actor.Creature; import net.sf.l2j.gameserver.model.actor.Npc; import net.sf.l2j.gameserver.model.actor.Player; import net.sf.l2j.gameserver.network.serverpackets.SocialAction; import net.sf.l2j.gameserver.scripting.QuestState; public class Q224_TestOfSagittarius extends SecondClassQuest { private static final String QUEST_NAME = "Q224_TestOfSagittarius"; // Items private static final int BERNARD_INTRODUCTION = 3294; private static final int HAMIL_LETTER_1 = 3295; private static final int HAMIL_LETTER_2 = 3296; private static final int HAMIL_LETTER_3 = 3297; private static final int HUNTER_RUNE_1 = 3298; private static final int HUNTER_RUNE_2 = 3299; private static final int TALISMAN_OF_KADESH = 3300; private static final int TALISMAN_OF_SNAKE = 3301; private static final int MITHRIL_CLIP = 3302; private static final int STAKATO_CHITIN = 3303; private static final int REINFORCED_BOWSTRING = 3304; private static final int MANASHEN_HORN = 3305; private static final int BLOOD_OF_LIZARDMAN = 3306; private static final int CRESCENT_MOON_BOW = 3028; private static final int WOODEN_ARROW = 17; // Rewards private static final int MARK_OF_SAGITTARIUS = 3293; // NPCs private static final int BERNARD = 30702; private static final int HAMIL = 30626; private static final int SIR_ARON_TANFORD = 30653; private static final int VOKIAN = 30514; private static final int GAUEN = 30717; // Monsters private static final int ANT = 20079; private static final int ANT_CAPTAIN = 20080; private static final int ANT_OVERSEER = 20081; private static final int ANT_RECRUIT = 20082; private static final int ANT_PATROL = 20084; private static final int ANT_GUARD = 20086; private static final int NOBLE_ANT = 20089; private static final int NOBLE_ANT_LEADER = 20090; private static final int BREKA_ORC_SHAMAN = 20269; private static final int BREKA_ORC_OVERLORD = 20270; private static final int MARSH_STAKATO_WORKER = 20230; private static final int MARSH_STAKATO_SOLDIER = 20232; private static final int MARSH_STAKATO_DRONE = 20234; private static final int MARSH_SPIDER = 20233; private static final int ROAD_SCAVENGER = 20551; private static final int MANASHEN_GARGOYLE = 20563; private static final int LETO_LIZARDMAN = 20577; private static final int LETO_LIZARDMAN_ARCHER = 20578; private static final int LETO_LIZARDMAN_SOLDIER = 20579; private static final int LETO_LIZARDMAN_WARRIOR = 20580; private static final int LETO_LIZARDMAN_SHAMAN = 20581; private static final int LETO_LIZARDMAN_OVERLORD = 20582; private static final int SERPENT_DEMON_KADESH = 27090; public Q224_TestOfSagittarius() { super(224, "Test Of Sagittarius"); setItemsIds(BERNARD_INTRODUCTION, HAMIL_LETTER_1, HAMIL_LETTER_2, HAMIL_LETTER_3, HUNTER_RUNE_1, HUNTER_RUNE_2, TALISMAN_OF_KADESH, TALISMAN_OF_SNAKE, MITHRIL_CLIP, STAKATO_CHITIN, REINFORCED_BOWSTRING, MANASHEN_HORN, BLOOD_OF_LIZARDMAN, CRESCENT_MOON_BOW); addQuestStart(BERNARD); addTalkId(BERNARD, HAMIL, SIR_ARON_TANFORD, VOKIAN, GAUEN); addMyDying(ANT, ANT_CAPTAIN, ANT_OVERSEER, ANT_RECRUIT, ANT_PATROL, ANT_GUARD, NOBLE_ANT, NOBLE_ANT_LEADER, BREKA_ORC_SHAMAN, BREKA_ORC_OVERLORD, MARSH_STAKATO_WORKER, MARSH_STAKATO_SOLDIER, MARSH_STAKATO_DRONE, MARSH_SPIDER, ROAD_SCAVENGER, MANASHEN_GARGOYLE, LETO_LIZARDMAN, LETO_LIZARDMAN_ARCHER, LETO_LIZARDMAN_SOLDIER, LETO_LIZARDMAN_WARRIOR, LETO_LIZARDMAN_SHAMAN, LETO_LIZARDMAN_OVERLORD, SERPENT_DEMON_KADESH); } @Override public String onAdvEvent(String event, Npc npc, Player player) { String htmltext = event; QuestState st = player.getQuestList().getQuestState(QUEST_NAME); if (st == null) return htmltext; // BERNARD if (event.equalsIgnoreCase("30702-04.htm")) { st.setState(QuestStatus.STARTED); st.setCond(1); playSound(player, SOUND_ACCEPT); giveItems(player, BERNARD_INTRODUCTION, 1); if (giveDimensionalDiamonds39(player)) htmltext = "30702-04a.htm"; } // HAMIL else if (event.equalsIgnoreCase("30626-03.htm")) { st.setCond(2); playSound(player, SOUND_MIDDLE); takeItems(player, BERNARD_INTRODUCTION, 1); giveItems(player, HAMIL_LETTER_1, 1); } else if (event.equalsIgnoreCase("30626-07.htm")) { st.setCond(5); playSound(player, SOUND_MIDDLE); takeItems(player, HUNTER_RUNE_1, 10); giveItems(player, HAMIL_LETTER_2, 1); } // SIR_ARON_TANFORD else if (event.equalsIgnoreCase("30653-02.htm")) { st.setCond(3); playSound(player, SOUND_MIDDLE); takeItems(player, HAMIL_LETTER_1, 1); } // VOKIAN else if (event.equalsIgnoreCase("30514-02.htm")) { st.setCond(6); playSound(player, SOUND_MIDDLE); takeItems(player, HAMIL_LETTER_2, 1); } return htmltext; } @Override public String onTalk(Npc npc, Player player) { String htmltext = getNoQuestMsg(); QuestState st = player.getQuestList().getQuestState(QUEST_NAME); if (st == null) return htmltext; switch (st.getState()) { case CREATED: if (player.getClassId() != ClassId.ROGUE && player.getClassId() != ClassId.ELVEN_SCOUT && player.getClassId() != ClassId.ASSASSIN) htmltext = "30702-02.htm"; else if (player.getStatus().getLevel() < 39) htmltext = "30702-01.htm"; else htmltext = "30702-03.htm"; break; case STARTED: int cond = st.getCond(); switch (npc.getNpcId()) { case BERNARD: htmltext = "30702-05.htm"; break; case HAMIL: if (cond == 1) htmltext = "30626-01.htm"; else if (cond == 2 || cond == 3) htmltext = "30626-04.htm"; else if (cond == 4) htmltext = "30626-05.htm"; else if (cond > 4 && cond < 8) htmltext = "30626-08.htm"; else if (cond == 8) { htmltext = "30626-09.htm"; st.setCond(9); playSound(player, SOUND_MIDDLE); takeItems(player, HUNTER_RUNE_2, 10); giveItems(player, HAMIL_LETTER_3, 1); } else if (cond > 8 && cond < 12) htmltext = "30626-10.htm"; else if (cond == 12) { htmltext = "30626-11.htm"; st.setCond(13); playSound(player, SOUND_MIDDLE); } else if (cond == 13) htmltext = "30626-12.htm"; else if (cond == 14) { htmltext = "30626-13.htm"; takeItems(player, BLOOD_OF_LIZARDMAN, -1); takeItems(player, CRESCENT_MOON_BOW, 1); takeItems(player, TALISMAN_OF_KADESH, 1); giveItems(player, MARK_OF_SAGITTARIUS, 1); rewardExpAndSp(player, 54726, 20250); player.broadcastPacket(new SocialAction(player, 3)); playSound(player, SOUND_FINISH); st.exitQuest(false); } break; case SIR_ARON_TANFORD: if (cond == 2) htmltext = "30653-01.htm"; else if (cond > 2) htmltext = "30653-03.htm"; break; case VOKIAN: if (cond == 5) htmltext = "30514-01.htm"; else if (cond == 6) htmltext = "30514-03.htm"; else if (cond == 7) { htmltext = "30514-04.htm"; st.setCond(8); playSound(player, SOUND_MIDDLE); takeItems(player, TALISMAN_OF_SNAKE, 1); } else if (cond > 7) htmltext = "30514-05.htm"; break; case GAUEN: if (cond == 9) { htmltext = "30717-01.htm"; st.setCond(10); playSound(player, SOUND_MIDDLE); takeItems(player, HAMIL_LETTER_3, 1); } else if (cond == 10) htmltext = "30717-03.htm"; else if (cond == 11) { htmltext = "30717-02.htm"; st.setCond(12); playSound(player, SOUND_MIDDLE); takeItems(player, MANASHEN_HORN, 1); takeItems(player, MITHRIL_CLIP, 1); takeItems(player, REINFORCED_BOWSTRING, 1); takeItems(player, STAKATO_CHITIN, 1); giveItems(player, CRESCENT_MOON_BOW, 1); giveItems(player, WOODEN_ARROW, 10); } else if (cond > 11) htmltext = "30717-04.htm"; break; } break; case COMPLETED: htmltext = getAlreadyCompletedMsg(); break; } return htmltext; } @Override public void onMyDying(Npc npc, Creature killer) { final Player player = killer.getActingPlayer(); final QuestState st = checkPlayerState(player, npc, QuestStatus.STARTED); if (st == null) return; switch (npc.getNpcId()) { case ANT: case ANT_CAPTAIN: case ANT_OVERSEER: case ANT_RECRUIT: case ANT_PATROL: case ANT_GUARD: case NOBLE_ANT: case NOBLE_ANT_LEADER: if (st.getCond() == 3 && dropItems(player, HUNTER_RUNE_1, 1, 10, 500000)) st.setCond(4); break; case BREKA_ORC_SHAMAN: case BREKA_ORC_OVERLORD: if (st.getCond() == 6 && dropItems(player, HUNTER_RUNE_2, 1, 10, 500000)) { st.setCond(7); giveItems(player, TALISMAN_OF_SNAKE, 1); } break; case MARSH_STAKATO_WORKER: case MARSH_STAKATO_SOLDIER: case MARSH_STAKATO_DRONE: if (st.getCond() == 10 && dropItems(player, STAKATO_CHITIN, 1, 1, 100000) && player.getInventory().hasItems(MANASHEN_HORN, MITHRIL_CLIP, REINFORCED_BOWSTRING)) st.setCond(11); break; case MARSH_SPIDER: if (st.getCond() == 10 && dropItems(player, REINFORCED_BOWSTRING, 1, 1, 100000) && player.getInventory().hasItems(MANASHEN_HORN, MITHRIL_CLIP, STAKATO_CHITIN)) st.setCond(11); break; case ROAD_SCAVENGER: if (st.getCond() == 10 && dropItems(player, MITHRIL_CLIP, 1, 1, 100000) && player.getInventory().hasItems(MANASHEN_HORN, REINFORCED_BOWSTRING, STAKATO_CHITIN)) st.setCond(11); break; case MANASHEN_GARGOYLE: if (st.getCond() == 10 && dropItems(player, MANASHEN_HORN, 1, 1, 100000) && player.getInventory().hasItems(REINFORCED_BOWSTRING, MITHRIL_CLIP, STAKATO_CHITIN)) st.setCond(11); break; case LETO_LIZARDMAN: case LETO_LIZARDMAN_ARCHER: case LETO_LIZARDMAN_SOLDIER: case LETO_LIZARDMAN_WARRIOR: case LETO_LIZARDMAN_SHAMAN: case LETO_LIZARDMAN_OVERLORD: if (st.getCond() == 13) { if (((player.getInventory().getItemCount(BLOOD_OF_LIZARDMAN) - 120) * 5) > Rnd.get(100)) { playSound(player, SOUND_BEFORE_BATTLE); takeItems(player, BLOOD_OF_LIZARDMAN, -1); addSpawn(SERPENT_DEMON_KADESH, player, false, 300000, true); } else dropItemsAlways(player, BLOOD_OF_LIZARDMAN, 1, 0); } break; case SERPENT_DEMON_KADESH: if (st.getCond() == 13) { if (player.getInventory().getItemIdFrom(Paperdoll.RHAND) == CRESCENT_MOON_BOW) { st.setCond(14); playSound(player, SOUND_MIDDLE); giveItems(player, TALISMAN_OF_KADESH, 1); } else addSpawn(SERPENT_DEMON_KADESH, player, false, 300000, true); } break; } } }  
×
×
  • Criar Novo...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.