Fariz Fadian: JavaScript

Wednesday, March 24, 2021

JavaScript

JavaScript: Firebase Configuration & Important REST API's Example

Fariz Fadian March 24, 2021 Leave a Reply

Configuration & Simple Example

How to configuration your apps, send message, validate registration id, manage topic, manage group, batch, etc with Firebase Cloud Messaging ?

Step 1
Register & Get Configuration from https://console.firebase.google.com/
Step 2
For simple examples: Create file index.html & firebase-messaging-sw.js
Step 3
Let's follow the code below

index.html

<!--
	Notification using Firebase Example
	-----------------------------------

	Step 1 : Create file index.html & firebase-messaging-sw.js
	Step 2 : Register & Get Configuration from https://console.firebase.google.com/
	Step 2 : You need to run this app at http://{host}
	Step 3 : Done

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

	Reference :
		- https://firebase.google.com/docs/cloud-messaging/js/client?hl=id
		- https://www.youtube.com/watch?v=BsCBCudx58g
		- https://firebase.google.com/docs/cloud-messaging/http-server-ref?hl=id
		- https://medium.com/@selvaganesh93/firebase-cloud-messaging-important-rest-apis-be79260022b5
		- https://medium.com/@sachinkhard/send-push-notification-via-firebase-by-postman-3f459ea5d170
		- https://firebase.google.com/docs/cloud-messaging/android/device-group
		- https://stackoverflow.com/a/60247902/9278668
		- https://stackoverflow.com/a/51529975/9278668
-->
<html>
<head>
	<title>Notification using Firebase Example</title>
</head>
<body>
	<h1>Notification using Firebase Example</h1>

	<button onclick="uninstallServiceWorker()">Uninstall Service Worker</button>
	<button onclick="inspectServiceWorker()">Inspect Service Worker</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 src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js"></script>

<script type="text/javascript">
let firebaseConfig = {
	apiKey: "{YOUR_FIREBASE_API_KEY}",
	authDomain: "{YOUR_FIREBASE_AUTH_DOMAIN}",
	projectId: "{YOUR_FIREBASE_PROJECT_ID}",
	storageBucket: "{YOUR_FIREBASE_STORAGE_BUCKET}",
	messagingSenderId: "{YOUR_FIREBASE_SENDER_ID}",
	appId: "{YOUR_FIREBASE_APP_ID}",
	measurementId: "{YOUR_FIREBASE_MEASUREMENT_ID}"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.requestPermission()
.then(function() {
	console.log('[BROWSER-FIREBASE] - Have permission');
	return messaging.getToken();
})
.then(function(currentToken) {
	console.log('[BROWSER-FIREBASE] - Firebase Client Token :', currentToken);
})
.catch(function(err) {
	console.log('[BROWSER-FIREBASE] - Error Occurred.', err);
});

// Only on Window
messaging.onMessage(function(payload) {
	console.log('[BROWSER-FIREBASE] - Received Foreground Message : ', payload);

	// https://stackoverflow.com/a/60247902/9278668
	navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
		let options = {
			body : payload.data.body,
			actions : JSON.parse(payload.data.actions),
			data : payload.data
		};

		registration.showNotification(
			payload.data.title,
			options
		)
	});
});

</script>

<script type="text/javascript">
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';
}
</script>

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js');

let firebaseConfig = {
	apiKey: "{YOUR_FIREBASE_API_KEY}",
	authDomain: "{YOUR_FIREBASE_AUTH_DOMAIN}",
	projectId: "{YOUR_FIREBASE_PROJECT_ID}",
	storageBucket: "{YOUR_FIREBASE_STORAGE_BUCKET}",
	messagingSenderId: "{YOUR_FIREBASE_SENDER_ID}",
	appId: "{YOUR_FIREBASE_APP_ID}",
	measurementId: "{YOUR_FIREBASE_MEASUREMENT_ID}"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
	console.log('[SERVICE-WORKER-FIREBASE] - Received Background Message : ', payload);

	// Customize notification here
	let options = {
		body : payload.data.body,
		actions : JSON.parse(payload.data.actions),
		data : payload.data
	};

	return self.registration.showNotification(payload.data.title, options);
});

// https://stackoverflow.com/a/51529975/9278668
self.addEventListener('notificationclick', (event) => {
	console.log('Event :', event);
	console.log('Event Action :', event.action);

	event.waitUntil(async function () {
		let clientList = await clients.matchAll({
			includeUncontrolled: true
		});
		console.log('clientList :', clientList);
		let currentClient;
		for (let client of clientList) {
			console.log('client :', client);
			if (client['url'].indexOf(event.notification.data.click_action) >= 0) {
				client.focus();
				currentClient = client;
				break;
			}
		}
		if (!currentClient) {
			currentClient = await clients.openWindow(event.notification.data.click_action);
		}
	}());
});

Important REST API you need to know

Send Notification
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"to":"{CLIENT_TOKEN_ID}"
}

Response :

{
	"multicast_id":4921980195954539141,
	"success":1,
	"failure":0,
	"canonical_ids":0,
	"results":[
		{
			"message_id":"0:1616595535458896%e609af1cf9fd7ecd"
		}
	]
}

Send Notification to Multiple Registration IDs
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"registration_ids":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}

Response :

{
	"multicast_id":4921980195954539141,
	"success":1,
	"failure":0,
	"canonical_ids":0,
	"results":[
		{
			"message_id":"0:1616595535458896%e609af1cf9fd7ecd"
		}
	]
}

Validate Registration ID
URL : https://iid.googleapis.com/iid/info/{CLIENT_TOKEN}?details=true
Method : GET
Header :
- Authorization : key={YOUR_SERVER_KEY}
Response :

{
	"application":"com.chrome.windows",
	"subtype":"wp:http://127.0.0.1/#CAE6289F-8CD2-4D33-8B18-A3C22E76B-V2",
	"scope":"*",
	"authorizedEntity":"1065953619143",
	"platform":"BROWSER"
}

Create Group
URL : https://fcm.googleapis.com/fcm/notification
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
- project_id : {YOUR_SENDER_ID}
Request Body :

{
	"operation":"create",
	"notification_key_name":"{YOUR_GROUP_KEY_NAME}",
	"registration_ids":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}

Response :

{
	"notification_key":"{NOTIFICATION_KEY}"
}

Send Notification to Group
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"to":"{NOTIFICATION_KEY}"
}

Response :

{
	"success":3,
	"failure":0
}

Create Topic
URL : https://iid.googleapis.com/iid/v1:batchAdd
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
- Content-Type : application/json
Request Body :
```
{
	"to":"/topics/YOUR_TOPIC_NAME",
	"registration_tokens":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}
```
Remove Topic
URL : https://iid.googleapis.com/iid/v1:batchRemove
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
- Content-Type : application/json
Request Body :
```
{
	"to":"/topics/{TOPIC_NAME}",
	"registration_tokens":[
		"{CLIENT_TOKEN_ID_1}",
		"{CLIENT_TOKEN_ID_2}",
		"{CLIENT_TOKEN_ID_3}",
		"..."
	]
}
```

Send Notification to Topic
URL : https://fcm.googleapis.com/fcm/send
Method : POST
Header :
- Authorization : key={YOUR_SERVER_KEY}
Request Body :

{
	"data":{
		"title":"New Text Message",
		"body":"Hello how are you?",
		"image":"https://firebase.google.com/images/social.png",
		"icon":"https://firebase.google.com/images/favicon.png",
		"badge":"https://firebase.google.com/images/favicon.png",
		"meta":{
			"type":"small",
			"info":"Search"
		}
	},
	"to":"/topics/{TOPIC_NAME}"
}

Response :

{
	"message_id":{GENERATED_MESSAGE_ID}
}

Note :

iOS users receive notifications if it contains “notification” key and android users will receive notification for both notification and data key.
iOS users will receive background notification if it contains both key value pair “content_available” : true and “priority” : “high”
For iOS notification must contain keys title and body to receive notification

Reference :

Tuesday, March 16, 2021

JavaScript

JavaScript Programming Web API

Web APIs : Wake Lock Example

Fariz Fadian March 16, 2021 Leave a Reply

The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.

How to request & release screen wake lock programmatically?

Let's follow the code below:

index.html

<!--
	Wake Lock Example
	-----------------------------------

	The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.

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

	Reference :
		- https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
-->
<html>
<head>
	<title>Wake Lock Example</title>
</head>
<body>
	<h1>Wake Lock Example</h1>

	<button onclick="requestWakeLock()">Request WakeLock</button>
	<button onclick="releaseWakeLock()">Release WakeLock</button>

</body>
</html>

<script type="text/javascript">
if ('wakeLock' in navigator) {
	console.log('Screen Wake Lock API supported!');
}
else {
	console.log('Wake lock is not supported by this browser.');
}

// Create a reference for the Wake Lock.
let wakeLock = null;

async function requestWakeLock() {
	// create an async function to request a wake lock
	try {
		wakeLock = await navigator.wakeLock.request('screen');
		console.log('Wake Lock is active!');

		wakeLock.addEventListener('release', () => {
			// the wake lock has been released
			console.log('Wake Lock has been released');
		});
	}
	catch (e) {
		// The Wake Lock request has failed - usually system related, such as battery.
		console.log(`${e.name}, ${e.message}`);
	}
}

function releaseWakeLock() {
	if(wakeLock !== null && wakeLock !== undefined) {
		wakeLock.release().then(() => {
			wakeLock = null;
		});
	}
}
</script>

Reference :

Screen Wake Lock API - Developer.Mozilla.org

Monday, March 15, 2021

JavaScript

JavaScript Notification Programming Progressive Web Apps (PWA) Service Worker Web API

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 :

JavaScript

Cache JavaScript Programming Progressive Web Apps (PWA) Service Worker Web API

How to Cache, Fetch Files & Remove Old Caches on Service Worker Example

Fariz Fadian March 15, 2021 Leave a Reply

How to cache, fetch files & remove old cache on service worker?

Let's follow the code below :

index.html

<!--
	Cache & Fetch Files on Service Worker Example
	-----------------------------------

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

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

	Reference :
		- https://developers.google.com/web/fundamentals/primers/service-workers
		- https://stackoverflow.com/a/33705250/9278668
		- https://stackoverflow.com/q/46865552/9278668
		- https://kotakode.com/pertanyaan/1556/mengatasi-uncaught-(in-promise)-typeerror%3A-request-failed-pada-web-pwa
-->
<html>
<head>
	<title>Cache & Fetch Files on Service Worker Example</title>
</head>
<body>
	<h1>Cache & Fetch Files on Service Worker Example</h1>

	<button onclick="installServiceWorker()">Install & Init Cache on Service Worker</button>
	<button onclick="uninstallServiceWorker()">Uninstall Service Worker</button>
	<button onclick="inspectServiceWorker()">Inspect Service Worker</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

	<br /><br />

	<img src="sw-lifecycle.png"> <br /> 
	<img src="sw-cache-lifecycle.jpg" width="500"> <br /> 
	<img src="img/service-worker.png"> <br /> 
</body>
</html>

<script type="text/javascript">
function installServiceWorker() {
	if('serviceWorker' in navigator) {
		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);
		});
	}
}
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';
}
</script>

sw.js

const CACHE_NAME = 'webapp-v1';
const CACHE_FILES = [
	'/sw-lifecycle.png',
	'/sw-cache-lifecycle.jpg'
];

self.addEventListener('install', event => {
	console.log('[SERVICE-WORKER] - Service worker installed successful.');
	event.waitUntil(
		caches.open(CACHE_NAME)
			.then(cache => cache.addAll(CACHE_FILES))
			.then(self.skipWaiting())
			.catch(err => console.error('[SERVICE-WORKER] - Error trying to pre-fetch cache files :', err))
	);
});

self.addEventListener("activate", (event) => {
	console.log('[SERVICE-WORKER] - Service worker activated');
	// delete if cache name is undeclared
	event.waitUntil(
		caches.keys().then((cacheFiles) => {
			return Promise.all(
				cacheFiles.map((cache) => {
					if (cache !== CACHE_NAME) {
						console.log('[SERVICE-WORKER] - Clearing old cache :', cache);
						return caches.delete(cache);
					}
				})
			);
		})
	);
});

self.addEventListener('fetch', event => {
	if (!event.request.url.startsWith(self.location.origin)) return;
	console.log('[SERVICE-WORKER] - Fetch event on :', event.request.url);
	event.respondWith(
		caches.match(event.request).then(response => {
			console.info('[SERVICE-WORKER] - Responded to ', event.request.url, 'with', response ? 'cache hit.' : 'fetch.');
			return response || fetch(event.request);
		}).catch(err => {
			console.error('[SERVICE-WORKER] - Error with match or fetch:', err);
		})
	);
});

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

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

Reference :

JavaScript

JavaScript Programming Progressive Web Apps (PWA) Service Worker Web API

Service Worker Install & Uninstall Example

Fariz Fadian March 15, 2021 Leave a Reply

How to install & uninstall service worker programmatically?

Let's follow the code below:

Install

function installServiceWorker() {
	if('serviceWorker' in navigator) {
		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);
		});
	}
}

Uninstall

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();
			} 
		});
	}
}

sw.js

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

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

index.html

<!--
	Service Worker: Install & Uninstall 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
-->
<html>
<head>
	<title>Service Worker: Install & Uninstall Example</title>
</head>
<body>
	<h1>Service Worker: Install & Uninstall Example</h1>

	<button onclick="installServiceWorker()">Install Service Worker</button>
	<button onclick="uninstallServiceWorker()">Uninstall Service Worker</button>
	<button onclick="inspectServiceWorker()">Inspect Service Worker</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

	<br /><br />

	<img src="sw-lifecycle.png">
</body>
</html>

<script type="text/javascript">
function installServiceWorker() {
	if('serviceWorker' in navigator) {
		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);
		});
	}
}
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';
}
</script>

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

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

Reference :

Friday, March 5, 2021

JavaScript

JavaScript Node.JS Programming Server Socket WebSocket

How to Create WebSocket Server & Client using Node.JS and JavaScript

Fariz Fadian March 05, 2021 Leave a Reply

You can follow the syntax below to create Websocket Server using Node.JS and WebSocket Client using JavaScript.

websocker-server.js

/*
	NodeJS WebSocket Server Example
	--------------------------------------------------

	Step 1 : $ npm install websocket
	Step 2 : Write Code
	Step 3 : Run
		 $ node websocket-server.js
	Step 4 : Done

	--------------------------------------------------
	Reference :
		- https://www.npmjs.com/package/websocket
		- https://www.pubnub.com/blog/nodejs-websocket-programming-examples/
*/

const http = require('http');
const WebSocketServer = require('websocket').server;
const server = http.createServer();

server.listen(9898, () => {
	console.log('WebSocket Server at localhost:9898')
});

const wsServer = new WebSocketServer({
	httpServer: server
});

wsServer.on('request', function(request) {
	const connection = request.accept(null, request.origin);

	console.log('\n\n>> REQUEST : ');
	console.log(request);

	console.log('\n\n>> PATHNAME : ');
	console.log(request.resourceURL.pathname);

	console.log('\n\n>> WSSERVER OBJECT : ');
	console.log(wsServer);

	console.log('\n\n>> CONNECTION STATE : ');
	console.log(connection.state);

	console.log("\n\n>> QUERY STRING : ");
	console.log(request.resourceURL.query);

	console.log("\n\n>> GET PARAMETER['q'] : ");
	console.log(request.resourceURL.query.q);

	console.log('\n\n>> CONNECTION : ');
	console.log(connection);

	connection.on('message', function(message) {
		console.log('Received Message :', message.utf8Data);
		connection.sendUTF('Hi this is WebSocket server!');
		connection.close();
	});
	
	connection.on('close', function(reasonCode, description) {
		console.log('Client has disconnected - Reason Code : ' + reasonCode + ' - Description : ' + description);
	});
});

websocket-client.html

<!--
	JavaScript WebSocket Client
	---------------------------------------------

	Reference :
		- https://www.pubnub.com/blog/nodejs-websocket-programming-examples/
		- https://www.npmjs.com/package/websocket
-->

<!DOCTYPE html>
<html>
<head>
	<title>WebSocket Playground</title>
</head>
<body>
</body>
</html>

<script type="text/javascript">

const ws = new WebSocket('ws://localhost:9898/farizfadian?q=abc');

ws.onopen = function() {
	console.log('WebSocket Client Connected');
	ws.send('Hi this is web client.');
};

ws.onmessage = function(e) {
	console.log("Received : '" + e.data + "'");
};

ws.onclose = function() {
	console.log('Disconnected');
};

</script>

Reference :

Wednesday, March 24, 2021

JavaScript: Firebase Configuration & Important REST API's Example

Configuration & Simple Example

Important REST API you need to know

Note :

Tuesday, March 16, 2021

Web APIs : Wake Lock Example

Monday, March 15, 2021

Notification using Service Worker Example

How to Cache, Fetch Files & Remove Old Caches on Service Worker Example

Service Worker Install & Uninstall Example

Friday, March 5, 2021

How to Create WebSocket Server & Client using Node.JS and JavaScript

Followers

Popular Posts

Blog Archive

Labels

Visitor

Total Pageviews

Advertisement