Quer seu anúncio aqui ? Temos preços especiais.

05/10/2017

Notificações Push: Como adiciona-las em meu site de graça

Nenhum comentário :

As notificações Push são uma boa pedida para quem quer manter seus usuários por dentro de todas as atualizações de seu site e caso ele tenha interesse irá clicar e voltar a navegar em seu site e isso se repetirá sempre que você mandar um notificação no método que vou ensinar hoje você terá que enviar as notificações uma por uma, mas talvez nos próximos dias ou até nas próximas semanas estarei passado um metódo automatizado que é bastante útil principalmente se você tem muitos usuários que solicitaram as notificações push. Para que as notificações push funcione são necessários alguns requisitos por parte de seu servidor e por parte do cliente:

Requisitos

Seu servidor deve :

  • Ter uma conexão HTTPS valida, ou seja, sem certificados autoassinados e tudo dentro dos conformes.
  • Poder hospedar um arquivo Java Script no mesmo domínio de preferência na pasta raiz (/).

Seu usuário deve :

  • Ter permitido os Java Script em seu navegador.
  • Estar usando um navegador que suporte Service Workers.

Para testar em seu computador você vai percisar de:

  • Servidor Web de sua preferência, preferencialmente o Web Server for Chrome.
  • Navegador que suporte Service Workers, preferencialmete Google Chrome.
  • Editor de Texto de sua preferência, pode ser até o Bloco de notas.
Para o desenvolvimento local o Google Chrome não requere o HTTPS, mas na web o HTTPS é obrigatório em todos os navegadores para garantir a segurança das notificações.



Configure em um Java Script que será chamado por todas as páginas que neste artigo vai ser chamado de main.js o seguinte código:

<0 1024px="" aterialtooltip="" chevron_left="" chevron_right="" classasstring:="" constructor:i="" cssclass:="" data-mdl-for="" e="!this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN)||this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);this.content_.scrollTop" f.prototype.contentscrollhandler_="function(){if(!this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)){var" f.prototype.keycodes_="{ENTER:13,ESCAPE:27,SPACE:32},f.prototype.Mode_={STANDARD:0,SEAMED:1,WATERFALL:2,SCROLL:3},f.prototype.CssClasses_={CONTAINER:" f="function(e){this.element_=e,this.init()};window.MaterialLayout=f,f.prototype.Constant_={MAX_WIDTH:" for="" has-drawer="" has-scrolling-header="" has-tabs="" is-active="" is-animating="" is-casting-shadow="" is-compact="" is-small-screen="" is-upgraded="" is-visible="" material-icons="" max-width:="" mdl-js-ripple-effect--ignore-events="" mdl-js-ripple-effect="" mdl-layout--fixed-header="" mdl-layout--large-screen-only="" mdl-layout--small-screen-only="" mdl-layout__container="" mdl-layout__content="" mdl-layout__drawer-button="" mdl-layout__drawer="" mdl-layout__header--scroll="" mdl-layout__header--seamed="" mdl-layout__header--waterfall="" mdl-layout__header="" mdl-layout__obfuscator="" mdl-layout__tab-bar-button="" mdl-layout__tab-bar-container="" mdl-layout__tab-bar-left-button="" mdl-layout__tab-bar-right-button="" mdl-layout__tab-bar="" mdl-layout__tab-panel="" mdl-layout__tab-ripple-container="" mdl-layout__tab="" mdl-ripple="" mdl-tooltip="" mouseenter="" mouseleave="" n="" prototype.hidetooltip_="function(){this.element_.classList.remove(this.CssClasses_.IS_ACTIVE)},I.prototype.init=function(){if(this.element_){var" px="" s.register="" s="" scroll="" tabindex="" this.boundmouseenterhandler="" this.boundmouseleaveandscrollhandler="" this.cssclasses_.is_active="" this.cssclasses_.left="" this.cssclasses_.right="" this.cssclasses_.top="" this.element_.classlist.add="" this.element_.classlist.contains="" this.element_.getattribute="" this.element_.style.left="t.left-this.element_.offsetWidth-10+" this.element_.style.marginleft="n+" this.element_.style.margintop="a+" this.element_.style.top="t.top+t.height+10+" this.forelement_.addeventlistener="" this.forelement_.setattribute="" this.forelement_="document.getElementById(e)),this.forElement_&&(this.forElement_.hasAttribute(" touchend="" touchstart="" var="" window.addeventlistener="" xe5d2="">/*
*
*  Push Notifications codelab
*  Copyright 2015 Google Inc. All rights reserved.
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*      https://www.apache.org/licenses/LICENSE-2.0
*
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License
*
*/

/* eslint-env browser, es6 */

'use strict';

const applicationServerPublicKey = <!--Sua chave Pública-->;

const pushButton = document.querySelector('.js-push-btn');

var isSubscribed = false;
var swRegistration = null;

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}
if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('[SW] & [PUSH] suportados');
  navigator.serviceWorker.register('/sw.js').then(function(swReg) {
    console.log('[SW] iniciado', swReg);
    swRegistration = swReg;
    initialiseUI();
  })
  .catch(function(error) {
    console.error('[SW] Erro', error);
    pushButton.textContent = 'Erro, tente atualizar a página';
  });
} else {
  console.warn('[PUSH] não suportado');
  pushButton.textContent = 'Notifições não suportadas';
}
function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Notifições bloqueadas.';
    pushButton.disabled = true;
    return;
  }
  else if (isSubscribed) {
    pushButton.textContent = 'Desativar Notifições';
    pushButton.disabled = false;
  } else {
    pushButton.textContent = 'Ativar Notifições';
    pushButton.disabled = false;
  }
}
function initialiseUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      unsubscribeUser();
    }
    else{
      subscribeUser();
    }
  });
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);
    if (isSubscribed) {
      console.log('[USER] Notifições Ativadas.');
    } else {
      console.log('[USER] Notifições não Ativadas.');
    }
    updateBtn();
  });
}
function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('[USER] Notifições Ativadas', subscription);
    updateSubscriptionOnServer(subscription, 'Adicionar');
    isSubscribed = true;
    updateBtn();
  })
  .catch(function(err) {
    console.log('[USER] Erro : ', err);
    updateBtn();
  });
}
function updateSubscriptionOnServer(subscription, action) {
  if (subscription) {
    var jsoncontent = JSON.stringify(subscription);
    if (action === 'Adicionar'){
    	//adicione o conteúdo da variável jsoncontent no seu banco de dados
	}
	else if (action === 'Remover'){
		//remova o conteúdo da variável jsoncontent no seu banco de dados
	}
  }
}
function unsubscribeUser() {
	updateSubscriptionOnServer(swRegistration.pushManager.getSubscription(), 'Remover');
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('[USER] Erro ao desativar as notifições.', error);
  })
  .then(function() {
    console.log('[USER] Notifições desativadas.');
    isSubscribed = false;
    updateBtn();
  });
}




Substitua <!--Sua chave Pública--> pela sua chave pública que pode ser adiquirida no site da Push Companion. Já em um arquivo que deverá estar no diretório raiz do site (/) e deverá se chamar sw.js coloque o seguinte código:


/*
*
*  Push Notifications codelab
*  Copyright 2015 Google Inc. All rights reserved.
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*      https://www.apache.org/licenses/LICENSE-2.0
*
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License
* 
*/

/* eslint-env browser, serviceworker, es6 */

'use strict';
self.addEventListener('push', function(event) {
  console.log('[SW] Notificação recebida.');
  var content = event.data.text();
  content = content.split('|');
  const title = content[0];
  const options = {
    body: content[1],
    icon: 'icon.png',
    image: content[2],
    data: content[3],
    lang: 'pt_BR'
  };
  event.waitUntil(self.registration.showNotification(title, options));
});
self.addEventListener('notificationclick', function(event) {
  console.log('[SW] Clicou na notificação.');
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data)
)});




Para enviar a notificações você pode usar o site da Push Companion, ou estes códigos.

Dúvidas ? Deixe nós comentários.

Nenhum comentário :

Postar um comentário

Ao acessar e comentar em nossos serviços você concorda com a nossas Politicas de privacidade, com nossos Termos de Uso e com a nossas Políticas de segurança