{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Configuração Google Chrome / Firefox","type":"basic","slug":"integração-webpush","excerpt":"Envie notificações para os visitantes do seu site sem que sua página esteja aberta!","body":"O objetivo deste tutorial de integração é guiar os desenvolvedores que desejam integrar seus *websites* à plataforma de notificações inteligentes da **Inngage**.\nNossos *scripts * coletarão os dados do dispositivo que visitou o *website* (sistema operacional, versão do navegador e idioma), além de salvar o *endpoint * do usuário para posterior envio de notificações.\n[block:api-header]\n{\n  \"title\": \"Compatibilidade\"\n}\n[/block]\nAtualmente suportamos envio de notificações para os seguintes *browsers*:\n  * Google Chrome\n  * Mozilla Firefox\n[block:api-header]\n{\n  \"title\": \"Integração\"\n}\n[/block]\n**1) Acesse nossa plataforma, prossiga até o menu *Configurações do App/Plataformas*.**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e18c880-menu.png\",\n        \"menu.png\",\n        517,\n        272,\n        \"#e1ebeb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Somente usuários com permissão \\\"Administrador\\\" ou \\\"Desenvolvedor\\\" tem acesso às Configurações do App.\"\n}\n[/block]\n**2) Role a tela até a seção *Configuração das plataformas web*.**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8eafd66-plats.png\",\n        \"plats.png\",\n        812,\n        628,\n        \"#f7f9f9\"\n      ]\n    }\n  ]\n}\n[/block]\n**3) Clique em *Adicionar URL* e informe o endereço do seu site.**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/302bb4e-addURL.png\",\n        \"addURL.png\",\n        713,\n        159,\n        \"#fbfbfb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Para evitar que um intermediário não autorizado acesse os dados obtidos, só é possível utilizar o webpush em páginas usando HTTPS.\",\n  \"title\": \"Você precisa de HTTPS\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"CDN\",\n  \"body\": \"Caso utilize algum tipo de *Delivery Network*, lembre-se de também cadastrar a URL que abrirá seu site através do CDN.\"\n}\n[/block]\n**4) Faça o download do script do *Service Worker* e coloque-o no diretório raiz do seu site (*public_html*).**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2521bb7-sw.png\",\n        \"sw.png\",\n        741,\n        145,\n        \"#fbfbfb\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Um ponto sutil do método register() é a localização do arquivo do service worker. Neste caso, você notará que o arquivo do service worker está na raiz do domínio. Isso significa que o escopo do service worker será a origem completa. Em outras palavras, este service worker receberá eventos fetch para tudo nesse domínio. Se registrarmos o arquivo do service worker em /example/sw.js, ele verá apenas os eventos fetch das páginas com URL iniciando com /example/ (ou seja, /example/page1/, /example/page2/).\"\n}\n[/block]\n**5) Na página que solicitará permissão para o envio das notificações, inclua o código abaixo, antes do fechamento da tag *body*.**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!--Inngage Scripts-->\\n<script type=\\\"application/javascript\\\" src= \\\"https://api.inngage.com.br/v1/webpush/js/tracker.js\\\"></script>\\n<script type=\\\"application/javascript\\\" src= \\\"https://api.inngage.com.br/v1/webpush/js/webpush.js\\\"></script>\\n<!--Inngage Scripts-->\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"jQuery\",\n  \"body\": \"Certifique-se que seu site está executando a biblioteca jQuery.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Pronto!\"\n}\n[/block]\nSe tudo foi configurado corretamente, a janela de permissão carregará assim que a página for aberta, assim como você aparecerá na lista da tela *Todo Público*.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/dff146f-ok.png\",\n        \"ok.png\",\n        391,\n        171,\n        \"#1284dd\"\n      ]\n    }\n  ]\n}\n[/block]","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5a15ab20f2643f001ee8737d","project":"57240e292887bb0e00bb9d93","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57240e292887bb0e00bb9d97","57241b7deae5090e00ee6249","57241c06eae5090e00ee624a","57242abb2ad0bc170012279b","5734d18c7b9859320047f4b1","57688cc71f818b0e00695efb","577ead2ca74eb40e00d97bca","57b66af649a12a0e007b461b","597e5f8f13505b0014251a79","59964eb2f824b4000f961fbe","5a15ab12f2643f001ee8737c","5ab1151799750500797334e0","5c597e8b0abe110014bf1a11","5e395a05470bc3002d78d886","5e42a9647515f300509a594d","5f5e716dcc85f9004a4fa193","5f6dd615c624d800180bd237","5f984feb8aed05003a0032dc","60ac0e9c4c04970016613c6c","625010e649ff260020328542"],"_id":"57240e292887bb0e00bb9d96","createdAt":"2016-04-30T01:45:13.341Z","project":"57240e292887bb0e00bb9d93","releaseDate":"2016-04-30T01:45:13.341Z","__v":20},"category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Web Push Notifications","slug":"web-push-notifications","order":8,"from_sync":false,"reference":false,"_id":"60ac0e9c4c04970016613c6c","createdAt":"2021-05-24T20:37:48.001Z","version":"57240e292887bb0e00bb9d96","project":"57240e292887bb0e00bb9d93","__v":0},"user":"595b990c4f578d0029b14486","createdAt":"2017-11-22T16:51:44.141Z","githubsync":"","__v":0,"parentDoc":null}

Configuração Google Chrome / Firefox

Envie notificações para os visitantes do seu site sem que sua página esteja aberta!

O objetivo deste tutorial de integração é guiar os desenvolvedores que desejam integrar seus *websites* à plataforma de notificações inteligentes da **Inngage**. Nossos *scripts * coletarão os dados do dispositivo que visitou o *website* (sistema operacional, versão do navegador e idioma), além de salvar o *endpoint * do usuário para posterior envio de notificações. [block:api-header] { "title": "Compatibilidade" } [/block] Atualmente suportamos envio de notificações para os seguintes *browsers*: * Google Chrome * Mozilla Firefox [block:api-header] { "title": "Integração" } [/block] **1) Acesse nossa plataforma, prossiga até o menu *Configurações do App/Plataformas*.** [block:image] { "images": [ { "image": [ "https://files.readme.io/e18c880-menu.png", "menu.png", 517, 272, "#e1ebeb" ] } ] } [/block] [block:callout] { "type": "info", "body": "Somente usuários com permissão \"Administrador\" ou \"Desenvolvedor\" tem acesso às Configurações do App." } [/block] **2) Role a tela até a seção *Configuração das plataformas web*.** [block:image] { "images": [ { "image": [ "https://files.readme.io/8eafd66-plats.png", "plats.png", 812, 628, "#f7f9f9" ] } ] } [/block] **3) Clique em *Adicionar URL* e informe o endereço do seu site.** [block:image] { "images": [ { "image": [ "https://files.readme.io/302bb4e-addURL.png", "addURL.png", 713, 159, "#fbfbfb" ] } ] } [/block] [block:callout] { "type": "info", "body": "Para evitar que um intermediário não autorizado acesse os dados obtidos, só é possível utilizar o webpush em páginas usando HTTPS.", "title": "Você precisa de HTTPS" } [/block] [block:callout] { "type": "warning", "title": "CDN", "body": "Caso utilize algum tipo de *Delivery Network*, lembre-se de também cadastrar a URL que abrirá seu site através do CDN." } [/block] **4) Faça o download do script do *Service Worker* e coloque-o no diretório raiz do seu site (*public_html*).** [block:image] { "images": [ { "image": [ "https://files.readme.io/2521bb7-sw.png", "sw.png", 741, 145, "#fbfbfb" ] } ] } [/block] [block:callout] { "type": "info", "body": "Um ponto sutil do método register() é a localização do arquivo do service worker. Neste caso, você notará que o arquivo do service worker está na raiz do domínio. Isso significa que o escopo do service worker será a origem completa. Em outras palavras, este service worker receberá eventos fetch para tudo nesse domínio. Se registrarmos o arquivo do service worker em /example/sw.js, ele verá apenas os eventos fetch das páginas com URL iniciando com /example/ (ou seja, /example/page1/, /example/page2/)." } [/block] **5) Na página que solicitará permissão para o envio das notificações, inclua o código abaixo, antes do fechamento da tag *body*.** [block:code] { "codes": [ { "code": "<!--Inngage Scripts-->\n<script type=\"application/javascript\" src= \"https://api.inngage.com.br/v1/webpush/js/tracker.js\"></script>\n<script type=\"application/javascript\" src= \"https://api.inngage.com.br/v1/webpush/js/webpush.js\"></script>\n<!--Inngage Scripts-->", "language": "html" } ] } [/block] [block:callout] { "type": "warning", "title": "jQuery", "body": "Certifique-se que seu site está executando a biblioteca jQuery." } [/block] [block:api-header] { "title": "Pronto!" } [/block] Se tudo foi configurado corretamente, a janela de permissão carregará assim que a página for aberta, assim como você aparecerá na lista da tela *Todo Público*. [block:image] { "images": [ { "image": [ "https://files.readme.io/dff146f-ok.png", "ok.png", 391, 171, "#1284dd" ] } ] } [/block]