JavaScript – Simple Progressive Web Application

Posted on Posted in JavaScript

Tomorrow I will be visiting the HackConf at Sofia, Bulgaria. Thus, today I was part of a workshop for Progressive Web Applications and I will try to summarize how to build an application, which simply displays something like the Facebook messenger below:

notificationFirst it asks politely, whether it is allowed to give notifications and then it gives these upon an event:

notification2

So, let’s start from the very beginning – what do you need to run something as simple as this?

  • Node.js
  • Npm and the command npm install in the console
  • Then a simple button with an id in an index.html file
  • A server worker file, looking like this:
addEventListener('install', event => {
	event.waitUntil((async () => {})());
});

addEventListener('activate', event => {
	event.waitUntil((async () => {
		console.log("Step 2");
		
		await clients.claim();
		let swClients = await clients.matchAll();
		
		swClients.forEach(function(el) {
			console.log(el);
		});
	})());
});
  • A main.js file, looking like this:
document.addEventListener('DOMContentLoaded', () => {
	if ('serviceWorker' in navigator) 
	{
		console.warn ("Activating step 1")
		navigator.serviceWorker.register('/sw.js').then(function(registration) 
		{
			console.warn('Service worker registration succeeded:', registration);
		}).catch(function(error) 
		{
		console.warn('Service worker registration failed:', error);
		});
	}
	else 
	{
		console.warn('Service workers are not supported.');
	}
});

function reply_click(clicked_id)
{
	console.log(clicked_id);
	Notification.requestPermission().then(function(result) {
	if (result === 'denied') {
	console.log('Permission wasn\'t granted. Allow a retry.');
	return;
	}
	if (result === 'default') {
	console.log('The permission request was dismissed.');
	return;
	}
		var link = document.getElementById(clicked_id);
		link.style.visibility = 'hidden';
		useNotificationApi();
	});
}

function useNotificationApi(){
	navigator.serviceWorker.getRegistration().then(function(reg){
		var options = {
			body: "Here is notification body",
			icon: "conf.png",
		};
	reg.showNotification("Hello world", options);
	});
};

Cheers! 🙂