johnmellor/index.html

## index.html
<!doctype html>
<!-- View this at https://rawgit.com/johnmellor/50624d8908af69e8f7aca40f5fbc7ba2/raw/ -->
<meta name="viewport" content="initial-scale=1">
<style>
  form { display: table; }
  form > label { display: table-row; }
  form > label > * { display: table-cell; }
</style>

<h1>GCM/FCM server key tester</h1>
<a href="https://gist.github.com/johnmellor/50624d8908af69e8f7aca40f5fbc7ba2">View code</a>

<p>Obtain these values from the
<a href="//console.firebase.google.com/project/_/settings/cloudmessaging">Cloud
Messaging</a> tab of the Firebase console <strong>Settings</strong> pane.

<form>
  <label>
    <span>Sender ID (a.k.a. project number)</span>
    <input type="text" id="senderid" value="653317226796">
  </label>
  <label>
    <span>Server key (for Authorization header)</span>
    <!-- JUST FOR DEMO PURPOSES - NEVER PUT YOUR REAL SERVER KEY ON A PUBLIC
         WEBPAGE OR IN PUBLIC SOURCE CODE! KEEP IT SERVER-SIDE. -->
    <input type="text" id="serverkey" value="AIzaSyBBh4ddPa96rQQNxqiq_qQj7sq1JdsNQUQ">
  </label>
  <button id="send">Test (send push notification)</button>
</form><br>

<strong>Registration ID:</strong> <code id="registrationid"></code><br>
<strong>Send status:</strong> <code id="sendstatus"></code><br>
<strong>Send response:</strong><br>
<pre id="sendresponse"></pre>
<script>
$ = document.querySelector.bind(document);
navigator.serviceWorker.register('sw.js');
$('#send').addEventListener('click', () => {
  $('#send').disabled = true;
  $('#registrationid').textContent = "pending...";
  $('#sendstatus').textContent = "pending...";
  $('#sendresponse').textContent = "pending...";
  var senderId = $('#senderid').value;
  var serverKey = $('#serverkey').value;
  navigator.serviceWorker.ready.then(swr => {
    swr.pushManager.getSubscription().then(oldSubscription => {
      if (oldSubscription)
        return oldSubscription.unsubscribe();
    }).then(() => {
      return swr.pushManager.subscribe({
        applicationServerKey: new TextEncoder().encode(senderId),
        userVisibleOnly: true
      }).catch(error => {
        $('#registrationid').textContent = error.name + ': ' + error.message;
        $('#sendstatus').textContent = "";
        $('#sendresponse').textContent = "";
        $('#send').disabled = false;
        return Promise.reject("subscribe failed");
      });
    }).then(pushSubscription => {
      // 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);
      $('#registrationid').textContent = token;
      // 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');
      xhr.setRequestHeader('Authorization', 'key=' + serverKey);
      xhr.onload = () => {
        $('#sendstatus').textContent = xhr.status;
        $('#sendresponse').textContent = xhr.responseText;
        $('#send').disabled = false;
      };
      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("API key works", { body: "Push message received" }));
});
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/50624d8908af69e8f7aca40f5fbc7ba2/raw/ -->
	<meta name="viewport" content="initial-scale=1">
	<style>
	form { display: table; }
	form > label { display: table-row; }
	form > label > * { display: table-cell; }
	</style>

	<h1>GCM/FCM server key tester</h1>
	<a href="https://gist.github.com/johnmellor/50624d8908af69e8f7aca40f5fbc7ba2">View code</a>

	<p>Obtain these values from the
	<a href="//console.firebase.google.com/project/_/settings/cloudmessaging">Cloud
	Messaging</a> tab of the Firebase console <strong>Settings</strong> pane.

	<form>
	<label>
	<span>Sender ID (a.k.a. project number)</span>
	<input type="text" id="senderid" value="653317226796">
	</label>
	<label>
	<span>Server key (for Authorization header)</span>
	<!-- JUST FOR DEMO PURPOSES - NEVER PUT YOUR REAL SERVER KEY ON A PUBLIC
	WEBPAGE OR IN PUBLIC SOURCE CODE! KEEP IT SERVER-SIDE. -->
	<input type="text" id="serverkey" value="AIzaSyBBh4ddPa96rQQNxqiq_qQj7sq1JdsNQUQ">
	</label>
	<button id="send">Test (send push notification)</button>
	</form><br>

	<strong>Registration ID:</strong> <code id="registrationid"></code><br>
	<strong>Send status:</strong> <code id="sendstatus"></code><br>
	<strong>Send response:</strong><br>
	<pre id="sendresponse"></pre>
	<script>
	$ = document.querySelector.bind(document);
	navigator.serviceWorker.register('sw.js');
	$('#send').addEventListener('click', () => {
	$('#send').disabled = true;
	$('#registrationid').textContent = "pending...";
	$('#sendstatus').textContent = "pending...";
	$('#sendresponse').textContent = "pending...";
	var senderId = $('#senderid').value;
	var serverKey = $('#serverkey').value;
	navigator.serviceWorker.ready.then(swr => {
	swr.pushManager.getSubscription().then(oldSubscription => {
	if (oldSubscription)
	return oldSubscription.unsubscribe();
	}).then(() => {
	return swr.pushManager.subscribe({
	applicationServerKey: new TextEncoder().encode(senderId),
	userVisibleOnly: true
	}).catch(error => {
	$('#registrationid').textContent = error.name + ': ' + error.message;
	$('#sendstatus').textContent = "";
	$('#sendresponse').textContent = "";
	$('#send').disabled = false;
	return Promise.reject("subscribe failed");
	});
	}).then(pushSubscription => {
	// 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);
	$('#registrationid').textContent = token;
	// 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');
	xhr.setRequestHeader('Authorization', 'key=' + serverKey);
	xhr.onload = () => {
	$('#sendstatus').textContent = xhr.status;
	$('#sendresponse').textContent = xhr.responseText;
	$('#send').disabled = false;
	};
	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("API key works", { body: "Push message received" }));
	});
	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);
	}));
	});