├── img.png ├── manifest.json ├── README.md ├── sw.js ├── style.css ├── index.html └── script.js /img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sidthesloth92/sw_push_notifications/master/img.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ServiceWorker Push Notification Demo", 3 | "gcm_sender_id": "345546294016" 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This repository showcases a very simple demo of the push notifications using Service Workers. 2 | 3 | For more info visit [this](https://dbwriteups.wordpress.com/2015/11/16/service-workers-part-5-push-notifications/) page. 4 | 5 | -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | self.addEventListener('push', function(event) { 2 | console.log('Received a push message', event); 3 | 4 | var title = 'Yay a message.'; 5 | var body = 'We have received a push message.'; 6 | var icon = 'img.png'; 7 | var tag = 'simple-push-demo-notification-tag'; 8 | 9 | event.waitUntil( 10 | self.registration.showNotification(title, { 11 | body: body, 12 | icon: icon, 13 | tag: tag 14 | }) 15 | ); 16 | }); 17 | 18 | self.addEventListener('notificationclick', function(event) { 19 | console.dir(event); 20 | event.waitUntil( 21 | clients.matchAll({ 22 | type: "window" 23 | }) 24 | .then(function(clientList) { 25 | for (var i = 0; i < clientList.length; i++) { 26 | var client = clientList[i]; 27 | if (client.url == '/' && 'focus' in client) 28 | return client.focus(); 29 | } 30 | if (clients.openWindow) { 31 | return clients.openWindow('/img.png'); 32 | } 33 | }) 34 | ); 35 | }); 36 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #09F; 3 | } 4 | 5 | .container { 6 | position: absolute; 7 | width: 320px; 8 | top: 50%; 9 | left: 50%; 10 | -webkit-transform: translate(-50%, -50%); 11 | -moz-transform: translate(-50%, -50%); 12 | transform: translate(-50%, -50%); 13 | color: white; 14 | font-family: sans-serif; 15 | text-align: center; 16 | } 17 | 18 | .title { 19 | font-size: 17px; 20 | margin: 50px 0px; 21 | text-align: center; 22 | text-transform: uppercase; 23 | font-weight: 500; 24 | } 25 | 26 | .help { 27 | font-size: 14px; 28 | margin: 10px 0px; 29 | } 30 | 31 | button { 32 | display: inline-block; 33 | background: transparent; 34 | width: 100px; 35 | margin: 10px auto; 36 | box-sizing: border-box; 37 | border: 2px solid white; 38 | padding: 10px 0px; 39 | color: white; 40 | text-transform: uppercase; 41 | cursor: pointer; 42 | font-weight: bold; 43 | } 44 | 45 | button:focus { 46 | outline: 0; 47 | } 48 | 49 | button:active { 50 | background: rgba(0, 0, 0, 0.2); 51 | } 52 | 53 | .console { 54 | background: black; 55 | color: white; 56 | font-family: monospace; 57 | box-sizing: border-box; 58 | padding: 10px; 59 | text-align: left; 60 | word-wrap: break-word; 61 | margin: 10px 0px; 62 | } 63 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Service Workers - Push Notifications 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
Service Workers - Push Notification
14 | 15 | 16 |
Open your console and make sure to refresh the page once to get demo working. 17 |
Step 1: Click Request for Notification button to register for notifications. 18 |
Step 2: Click on Register for push to register for push notifications. 19 |
Step 3: Copy and paste the following in the terminal by replacing (DEVICE_REGISTRATION_ID) with the one that appears in the console 20 |
21 | curl --header "Authorization: key=AIzaSyB_0mMNuc9YxPB8Z9BYtHHCvyCML7d2ZPk" --header "Content-Type: application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"(DEVICE_REGISTRATION_ID)\"]}" 22 |
23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | if (navigator.serviceWorker) { 2 | console.log("ServiceWorkers are supported"); 3 | 4 | navigator.serviceWorker.register('sw.js', { 5 | scope: './' 6 | }) 7 | .then(function(reg) { 8 | console.log("ServiceWorker registered ◕‿◕", reg); 9 | }) 10 | .catch(function(error) { 11 | console.log("Failed to register ServiceWorker ಠ_ಠ", error); 12 | }); 13 | } 14 | 15 | function requestNotificationPermission() { 16 | 17 | if (Notification.requestPermission) { 18 | Notification.requestPermission(function(result) { 19 | console.log("Notification permission : ", result); 20 | }); 21 | } else { 22 | console.log("Notifications not supported by this browser."); 23 | } 24 | } 25 | 26 | 27 | function registerForPush() { 28 | if (navigator.serviceWorker.controller) { 29 | navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) { 30 | serviceWorkerRegistration.pushManager.subscribe({ 31 | userVisibleOnly: true 32 | }) 33 | .then(function(subscription) { 34 | console.log("Subscription for Push successful: ", subscription.endpoint); 35 | console.log("DEVICE_REGISTRATION_ID: ", subscription.endpoint.substr(subscription.endpoint.lastIndexOf('/') + 1)); 36 | }) 37 | .catch(function(error) { 38 | console.log("Subscription for Push failed", error); 39 | }); 40 | }); 41 | } else { 42 | console.log("No active ServiceWorker"); 43 | } 44 | } 45 | 46 | function doesBrowserSupportNotifications() { 47 | 48 | var supported = true; 49 | if (!('showNotification' in ServiceWorkerRegistration.prototype)) { 50 | console.warn('Notifications aren\'t supported in Service Workers.'); 51 | supported = false; 52 | } 53 | 54 | if (!Notification.requestPermission) { 55 | console.warn("Notifications are not supported by the browser"); 56 | supported = false; 57 | } 58 | 59 | if (Notification.permission !== 'granted') { 60 | console.warn('The user has blocked notifications.'); 61 | supported = false; 62 | } 63 | 64 | // Check if push messaging is supported 65 | if (!('PushManager' in window)) { 66 | console.warn('Push messaging isn\'t supported.'); 67 | supported = false; 68 | } 69 | 70 | if (supported) { 71 | console.log("Everthing is fine you can continue") 72 | } 73 | }; 74 | --------------------------------------------------------------------------------