IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

Push notifications

Vegeu Push notifications

Web notifications API

Oco sembla que hi ha múltiples formes de mostrar notificacions a la web segons el navegador i sistema operatiu:

Cal tenir en compte que les web notifications tenen suport a Safari (no IOS) i en canvi Push API no i a més el suport a Edge és superior

Mostrar notificacions

Can I use:

if(window.Notification && Notification.permission !== "denied") {
	Notification.requestPermission(function(status) {  // status is "granted", if accepted by user
		var n = new Notification('Title', { 
			body: 'I am the body text!',
			icon: '/path/to/icon.png' // optional
		}); 
	});
}

Per tancar:

n.close();

Estructura d'una notificació:

Title és obligatori però la resta és opcional i es passa en format objecte/JSON a la segona opció.

Molt interessant la web per provar les diferents opcions:

https://tests.peter.sh/notification-generator/

Hi ha opcions que depenen del dispositius com per exemple les opcions de vibració, proveu la URL:

 https://tests.peter.sh/notification-generator/

Amb chrome desde mòbil. Cal tenir però en compte que la forma d'invocar les notificacions és lleugerament diferent (nom del mètode, tot i que els paràmetres i opcions són similars)

serviceWorkerRegistration.showNotification(title, options);


{
  "body": "Did you make a $1,000,000 purchase at Dr. Evil...",
  "icon": "images/ccard.png",
  "vibrate": [200, 100, 200, 100, 200, 100, 400],
  "tag": "request",
  "actions": [
    { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
    { "action": "no", "title": "No", "icon": "images/no.png" }
  ]
}

vegeu https://developers.google.com/web/fundamentals/push-notifications/

Opcions al mostrar les notificacions

https://web-push-book.gauntface.com/demos/notification-examples/

Permissions UX

O com demanar permisos als usuaris per enviar notificacions:

https://developers.google.com/web/fundamentals/push-notifications/permission-ux

Demo sites

Web notifications API:

Push notifications API:

Implementació amb Laravel i sistemes propi de notificacions

El codi complet de demo el podeu trobar a:

https://github.com/cretueusebiu/laravel-web-push-demo

Es tracta d'un notification channel de Laravel no oficial:

Hi han un munt de notification channels no oficials per a diferents eines com Telegram, GCM, facebook, twitter, slack. Els podeu veure a:

http://laravel-notification-channels.com/

En aquest cas estem utilitzant:

http://laravel-notification-channels.com/webpush/

Llibreries web

Pusher

Vegeu Pusher i Pusher web notifications

Vegeu també