Add simple push notification demo. Fixes #42

2015-11-04 13:30:39 +00:00 · 2015-11-04 13:30:39 +00:00 · ec4270b0e3
--- a/package.json
+++ b/package.json
@ -40,6 +40,7 @@
    "gulp-load-plugins": "^0.10.0",
    "gulp-swig": "^0.7.4",
    "request": "^2.64.0",
-    "swig": "^1.4.2"
+    "swig": "^1.4.2",
    "web-push": "0.0.11"
  }
 }
--- a/push-simple/index.html
+++ b/push-simple/index.html
@ -0,0 +1,22 @@
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Simple Push Notification - ServiceWorker Cookbook</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: monospace;
      font-size: 1rem;
      white-space: pre-wrap;
    }
  </style>
 </head>
 <body>
 <p>This demo shows how to register for push notifications and how to send them.</p>
 <button id="doIt">Try to conquer Italy!</button>
 <script src="./index.js"></script>
 </body>
 </html>
--- a/push-simple/index.js
+++ b/push-simple/index.js
@ -0,0 +1,27 @@
 navigator.serviceWorker.register('service-worker.js').then(function(registration) {
  return registration.pushManager.getSubscription().then(function(subscription) {
    if (!subscription) {
      return registration.pushManager.subscribe({ userVisibleOnly: true }).then(function(subscription) {
        return subscription;
      });
    } else {
      return subscription;
    }
  });
 }).then(function(subscription) {
  fetch('./register', {
    method: 'post',
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify({
      endpoint: subscription.endpoint,
    }),
  });
 });
 document.getElementById('doIt').onclick = function() {
  fetch('./sendNotification', {
    method: 'post',
  });
 }
--- a/push-simple/server.js
+++ b/push-simple/server.js
@ -0,0 +1,15 @@
 var path = require('path');
 var request = require('request');
 var webPush = require('web-push');
 var endpoint;
 module.exports = function(app, route) {
  app.post(route + 'register', function(req, res) {
    endpoint = req.body.endpoint;
  });
  app.post(route + 'sendNotification', function() {
    webPush.sendNotification(endpoint);
  });
 };
--- a/push-simple/service-worker.js
+++ b/push-simple/service-worker.js
@ -0,0 +1,6 @@
 self.addEventListener('push', function(event) {
  event.waitUntil(self.registration.showNotification('ServiceWorker Cookbook', {
    body: 'Alea iacta est',
    tag: 'push',
  }));
 });