-
-
Save abrkof/2265568fb0305a26201ffa4e2631ee47 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