Monday, March 15, 2021

Notification using Service Worker Example

Fariz Fadian March 15, 2021 Leave a Reply

 


How to create notification using Service Worker?

Let's follow the code below :

index.html

<!--
	Notification using Service Worker Example
	-----------------------------------

	Step 1 : Create file index.html & sw.js
	Step 2 : You need to run this app at http://{host}
	Step 3 : Done

	-----------------------------------

	Reference :
		- https://developers.google.com/web/fundamentals/primers/service-workers
		- https://stackoverflow.com/a/33705250/9278668
		- https://stackoverflow.com/a/31480604/9278668
		- https://serviceworke.rs/push-clients_service-worker_doc.html
		- https://css-tricks.com/creating-scheduled-push-notifications/
		- https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification
		- https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event
-->
<html>
<head>
	<title>Notification using Service Worker Example</title>
</head>
<body>
	<h1>Notification using Service Worker Example</h1>

	<button onclick="installServiceWorker()">Install Service Worker</button>
	<button onclick="uninstallServiceWorker()">Uninstall Service Worker</button>
	<button onclick="inspectServiceWorker()">Inspect Service Worker</button>

	<button onclick="showNotification()">Show Notification</button>
	<button onclick="closeAllNotifications()">Close All Notifications</button>

	<br /><br />

	Open : <a href="chrome://inspect/#service-workers">chrome://inspect/#service-workers</a> for <b>inspect</b> <i>service worker</i> in google chrome

</body>
</html>

<script type="text/javascript">
function installServiceWorker() {
	if('serviceWorker' in navigator) {
		// Install Service Worker
		navigator.serviceWorker.register('./sw.js').then(function(registration) {
			console.log('[BROWSER] - Service worker registration successful with scope : ' + registration.scope);
		}, function(err) {
			console.error('[BROWSER] - Service worker registration failed :', err);
		});

		// Init to listen incoming message from service worker
		navigator.serviceWorker.addEventListener('message', function(event) {
			console.log('Event : ', event);
			console.log('postMessage : ', event.data);

			alert("Message from Service Worker :\n\n" + "postMessage : " + event.data + "\n\n" + "Event : " + JSON.stringify(event));
		});
	}
}
function uninstallServiceWorker() {
	if('serviceWorker' in navigator) {
		navigator.serviceWorker.getRegistrations().then(function(registrations) {
			for(let registration of registrations) {
				console.log('[BROWSER] - Uninstalled service worker successful.', registration);
				registration.unregister();
			} 
		});
	}
}
function inspectServiceWorker() {
	alert('Open -> chrome://inspect/#service-workers');
	window.location = 'chrome://inspect/#service-workers';
}
async function showNotification(title, body) {
	const reg = await navigator.serviceWorker.getRegistration();
	Notification.requestPermission().then(function(permission) {
		if (permission !== 'granted') {
			alert('You need to allow push notifications');
		}
		else {
			reg.showNotification(
				'Demo Push Notification', {
					tag: 'my-simple-notification-sw', // a unique ID
					body: 'Hello World', // content of the message notification
					data: {
						url: window.location.href, // pass the current url to the notification
					},
					badge: 'http://ahmbcode.id/img/logo.png',
					icon: 'http://ahmbcode.id/img/logo.png',
					image: 'http://ahmbcode.id/img/logo.png',
					vibrate: [500, 300, 500],
					silent: false,
					actions: [
						{
							action: 'open_google',
							title: 'Open Google',
							//icon:'http://ahmbcode.id/img/logo.png'
						},
						{
							action: 'open_gmail',
							title: 'Open Gmail',
							//icon:'http://ahmbcode.id/img/logo.png'
						}
					]
				}
			);
		}
	});
}

function closeAllNotifications() {
	navigator.serviceWorker.getRegistration().then(function(registration){
		registration.getNotifications().then(function(notifications){
			notifications.forEach(function(notification){
				notification.close();
			});
		});
	});
}
</script>

sw.js

self.addEventListener('install', function(event) {
	console.log('[SERVICE-WORKER] - Service worker installed successful.');
	event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function(event) {
	console.log('[SERVICE-WORKER] - Service worker activated');
	event.waitUntil(self.clients.claim());
});

self.addEventListener('notificationclick', function(event) {

	console.log('[SERVICE-WORKER] - Notification Action : ', event.action);
	console.log('[SERVICE-WORKER] - Notification Data   : ', event.notification.data);

	// event.notification.close();

	if(event.action === 'open_google') {
		openPage('https://www.google.com', event);
	}
	else if(event.action === 'open_gmail') {
		openPage('https://mail.google.com', event);
	}
});

// Check the browser for update the current tab or open new tab
function openPage(url, event) {
	event.waitUntil(
		self.clients.matchAll().then(function(clientList) {
			
			if (clientList.length > 0) { // If Tab is currently open

				clientList[0].postMessage('Opening -> ' + url);	// Send data to Window

				clientList[0].navigate(url);		// Redirect URL in current tab
				return clientList[0].focus();		// Focus in current tab
			}

			// If Tab are closed
			return self.clients.openWindow(url);
		})
	);
}


You  need run this app on http://{host} .

For developer tools, you can inspect the service workers at chrome://inspect/#service-workers


Reference :


Tags:
Previous Post
Next Post
Fariz Fadian

0 komentar: