Last active
November 4, 2019 17:56
-
-
Save johnmellor/460bdac0c5b30832df898e67b4b7cedf to your computer and use it in GitHub Desktop.
Minimal push notifications demo (sends via XHR)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| })); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment