johnmellor/index.html

## index.html
<!doctype html>
<!-- View this at https://rawgit.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf/raw/ -->
<meta name=viewport content="initial-scale=1">
<a href="https://gist.github.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf">View code</a><br>
<a href="https://rawgit.com/johnmellor/d792819c4faa24a190bb7ea0138fba3e/raw/">cURL variant</a>

<p id="loading">Loading...</p>
<div id="loaded" style="display: none">
  <p><strong>Endpoint:</strong> <output id="registration-id"></output>
  <p><button id="send-button">Send push</button><br>
     <strong>Result:</strong> <output id="send-result"></output></p>
</div>

<script>
$ = document.querySelector.bind(document);
navigator.serviceWorker.register('sw.js');
navigator.serviceWorker.ready.then(swr => {
  swr.pushManager.subscribe({
    applicationServerKey: new TextEncoder().encode('653317226796'),
    userVisibleOnly: true
  }).then(pushSubscription => {
    $('#registration-id').textContent = pushSubscription.endpoint;
    // This part uses the proprietary GCM protocol. TODO: Switch to webpush.
    var slash = pushSubscription.endpoint.lastIndexOf('/');
    var url = pushSubscription.endpoint.substr(0, slash);
    var token = pushSubscription.endpoint.substr(slash + 1);
    $('#loading').style.display = 'none';
    $('#loaded').style.display = '';
    $('#send-button').onclick = () => {
      $('#send-result').textContent = "pending...";
      // Only uses XMLHttpRequest for demo purposes. Normally you should send
      // the push subscription to your server.
      var xhr = new XMLHttpRequest();
      xhr.open('POST', url);
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
      // JUST FOR DEMO PURPOSES - NEVER PUT YOUR REAL AUTHORIZATION KEY ON A
      // PUBLIC WEBPAGE! KEEP IT SERVER-SIDE.
      xhr.setRequestHeader('Authorization',
                           'key=AIzaSyBBh4ddPa96rQQNxqiq_qQj7sq1JdsNQUQ');
      xhr.onloadend = () => { $('#send-result').textContent = xhr.status + " " + xhr.responseText; }
      xhr.send(JSON.stringify({
        'registration_ids': [token]
      }));
    };
  });
});
</script>

## sw.js
self.addEventListener('install', () => skipWaiting());
self.addEventListener('activate', () => clients.claim());
self.addEventListener('push', event => {
  event.waitUntil(registration.showNotification("Title", { body: "Text" }));
});
self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(clients.matchAll().then(cs => {
    for (var client of cs) {
      if (client.url == registration.scope)
        return client.focus();
    }
    return clients.openWindow(registration.scope);
  }));
});
	<!doctype html>
	<!-- View this at https://rawgit.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf/raw/ -->
	<meta name=viewport content="initial-scale=1">
	<a href="https://gist.github.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf">View code</a><br>
	<a href="https://rawgit.com/johnmellor/d792819c4faa24a190bb7ea0138fba3e/raw/">cURL variant</a>

	<p id="loading">Loading...</p>
	<div id="loaded" style="display: none">
	<p><strong>Endpoint:</strong> <output id="registration-id"></output>
	<p><button id="send-button">Send push</button><br>
	<strong>Result:</strong> <output id="send-result"></output></p>
	</div>

	<script>
	$ = document.querySelector.bind(document);
	navigator.serviceWorker.register('sw.js');
	navigator.serviceWorker.ready.then(swr => {
	swr.pushManager.subscribe({
	applicationServerKey: new TextEncoder().encode('653317226796'),
	userVisibleOnly: true
	}).then(pushSubscription => {
	$('#registration-id').textContent = pushSubscription.endpoint;
	// This part uses the proprietary GCM protocol. TODO: Switch to webpush.
	var slash = pushSubscription.endpoint.lastIndexOf('/');
	var url = pushSubscription.endpoint.substr(0, slash);
	var token = pushSubscription.endpoint.substr(slash + 1);
	$('#loading').style.display = 'none';
	$('#loaded').style.display = '';
	$('#send-button').onclick = () => {
	$('#send-result').textContent = "pending...";
	// Only uses XMLHttpRequest for demo purposes. Normally you should send
	// the push subscription to your server.
	var xhr = new XMLHttpRequest();
	xhr.open('POST', url);
	xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
	// JUST FOR DEMO PURPOSES - NEVER PUT YOUR REAL AUTHORIZATION KEY ON A
	// PUBLIC WEBPAGE! KEEP IT SERVER-SIDE.
	xhr.setRequestHeader('Authorization',
	'key=AIzaSyBBh4ddPa96rQQNxqiq_qQj7sq1JdsNQUQ');
	xhr.onloadend = () => { $('#send-result').textContent = xhr.status + " " + xhr.responseText; }
	xhr.send(JSON.stringify({
	'registration_ids': [token]
	}));
	};
	});
	});
	</script>
	self.addEventListener('install', () => skipWaiting());
	self.addEventListener('activate', () => clients.claim());
	self.addEventListener('push', event => {
	event.waitUntil(registration.showNotification("Title", { body: "Text" }));
	});
	self.addEventListener('notificationclick', event => {
	event.notification.close();
	event.waitUntil(clients.matchAll().then(cs => {
	for (var client of cs) {
	if (client.url == registration.scope)
	return client.focus();
	}
	return clients.openWindow(registration.scope);
	}));
	});