Skip to content

Instantly share code, notes, and snippets.

@johnmellor
Last active January 6, 2017 15:38
Show Gist options
  • Save johnmellor/50624d8908af69e8f7aca40f5fbc7ba2 to your computer and use it in GitHub Desktop.
Save johnmellor/50624d8908af69e8f7aca40f5fbc7ba2 to your computer and use it in GitHub Desktop.
GCM/FCM server key tester
<!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);
}));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment