├── .gitignore ├── README.md ├── backend ├── example_index.js ├── index.js ├── package-lock.json └── package.json └── frontend ├── index.css ├── index.html ├── index.js └── service.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | *.log -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demo for the Web Push blog 2 | 3 | This is the working demo code for the blog post here: 4 | 5 | [https://blog.atulr.com/web-notifications](https://blog.atulr.com/web-notifications) 6 | 7 | To launch backend: 8 | 9 | ```sh 10 | cd backend 11 | npm install 12 | node index.js 13 | ``` 14 | 15 | To launch frontend: 16 | 17 | ```sh 18 | cd frontend 19 | npm install -g http-server 20 | http-server 21 | ``` 22 | -------------------------------------------------------------------------------- /backend/example_index.js: -------------------------------------------------------------------------------- 1 | //exact copy of full example code from (https://medium.com/izettle-engineering/beginners-guide-to-web-push-notifications-using-service-workers-cb3474a17679) 2 | const express = require('express') 3 | const cors = require('cors') 4 | const bodyParser = require('body-parser') 5 | const webpush = require('web-push') 6 | const app = express() 7 | app.use(cors()) 8 | app.use(bodyParser.json()) 9 | const port = 4000 10 | app.get('/', (req, res) => res.send('Hello World!')) 11 | const dummyDb = { subscription: null } //dummy in memory store 12 | const saveToDatabase = async subscription => { 13 | // Since this is a demo app, I am going to save this in a dummy in memory store. Do not do this in your apps. 14 | // Here you should be writing your db logic to save it. 15 | dummyDb.subscription = subscription 16 | } 17 | // The new /save-subscription endpoint 18 | app.post('/save-subscription', async (req, res) => { 19 | const subscription = req.body 20 | await saveToDatabase(subscription) //Method to save the subscription to Database 21 | res.json({ message: 'success' }) 22 | }) 23 | const vapidKeys = { 24 | publicKey: 25 | 'BJ5IxJBWdeqFDJTvrZ4wNRu7UY2XigDXjgiUBYEYVXDudxhEs0ReOJRBcBHsPYgZ5dyV8VjyqzbQKS8V7bUAglk', 26 | privateKey: 'ERIZmc5T5uWGeRxedxu92k3HnpVwy_RCnQfgek1x2Y4', 27 | } 28 | //setting our previously generated VAPID keys 29 | webpush.setVapidDetails( 30 | 'mailto:myuserid@email.com', 31 | vapidKeys.publicKey, 32 | vapidKeys.privateKey 33 | ) 34 | //function to send the notification to the subscribed device 35 | const sendNotification = (subscription, dataToSend) => { 36 | webpush.sendNotification(subscription, dataToSend) 37 | } 38 | //route to test send notification 39 | app.get('/send-notification', (req, res) => { 40 | const subscription = dummyDb.subscription //get subscription from your databse here. 41 | const message = 'Hello World' 42 | sendNotification(subscription, message) 43 | res.json({ message: 'message sent' }) 44 | }) 45 | app.listen(port, () => console.log(`Example app listening on port ${port}!`)) 46 | -------------------------------------------------------------------------------- /backend/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const cors = require("cors"); 3 | const bodyParser = require("body-parser"); 4 | 5 | const app = express(); 6 | app.use(cors()); 7 | app.use(bodyParser.json()); 8 | 9 | const port = 4000; 10 | 11 | app.get("/", (req, res) => res.send("Hello World!")); 12 | 13 | const dummyDb = { subscription: null }; //dummy in memory store 14 | 15 | const saveToDatabase = async subscription => { 16 | // Since this is a demo app, I am going to save this in a dummy in memory store. Do not do this in your apps. 17 | // Here you should be writing your db logic to save it. 18 | dummyDb.subscription = subscription; 19 | }; 20 | 21 | // The new /save-subscription endpoint 22 | app.post("/save-subscription", async (req, res) => { 23 | const subscription = req.body; 24 | await saveToDatabase(subscription); //Method to save the subscription to Database 25 | res.json({ message: "success" }); 26 | }); 27 | 28 | app.listen(port, () => console.log(`Example app listening on port ${port}!`)); 29 | -------------------------------------------------------------------------------- /backend/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "2.1.20", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.3", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz", 24 | "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "1.1.2", 30 | "http-errors": "1.6.3", 31 | "iconv-lite": "0.4.23", 32 | "on-finished": "2.3.0", 33 | "qs": "6.5.2", 34 | "raw-body": "2.3.3", 35 | "type-is": "1.6.16" 36 | }, 37 | "dependencies": { 38 | "qs": { 39 | "version": "6.5.2", 40 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", 41 | "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" 42 | } 43 | } 44 | }, 45 | "bytes": { 46 | "version": "3.0.0", 47 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 48 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 49 | }, 50 | "content-disposition": { 51 | "version": "0.5.2", 52 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 53 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 54 | }, 55 | "content-type": { 56 | "version": "1.0.4", 57 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 58 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 59 | }, 60 | "cookie": { 61 | "version": "0.3.1", 62 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 63 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 64 | }, 65 | "cookie-signature": { 66 | "version": "1.0.6", 67 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 68 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 69 | }, 70 | "cors": { 71 | "version": "2.8.4", 72 | "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.4.tgz", 73 | "integrity": "sha1-K9OB8usgECAQXNUOpZ2mMJBpRoY=", 74 | "requires": { 75 | "object-assign": "4.1.1", 76 | "vary": "1.1.2" 77 | } 78 | }, 79 | "debug": { 80 | "version": "2.6.9", 81 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 82 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 83 | "requires": { 84 | "ms": "2.0.0" 85 | } 86 | }, 87 | "depd": { 88 | "version": "1.1.2", 89 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 90 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 91 | }, 92 | "destroy": { 93 | "version": "1.0.4", 94 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 95 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 96 | }, 97 | "ee-first": { 98 | "version": "1.1.1", 99 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 100 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 101 | }, 102 | "encodeurl": { 103 | "version": "1.0.2", 104 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 105 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 106 | }, 107 | "escape-html": { 108 | "version": "1.0.3", 109 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 110 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 111 | }, 112 | "etag": { 113 | "version": "1.8.1", 114 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 115 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 116 | }, 117 | "express": { 118 | "version": "4.16.3", 119 | "resolved": "http://registry.npmjs.org/express/-/express-4.16.3.tgz", 120 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 121 | "requires": { 122 | "accepts": "1.3.5", 123 | "array-flatten": "1.1.1", 124 | "body-parser": "1.18.2", 125 | "content-disposition": "0.5.2", 126 | "content-type": "1.0.4", 127 | "cookie": "0.3.1", 128 | "cookie-signature": "1.0.6", 129 | "debug": "2.6.9", 130 | "depd": "1.1.2", 131 | "encodeurl": "1.0.2", 132 | "escape-html": "1.0.3", 133 | "etag": "1.8.1", 134 | "finalhandler": "1.1.1", 135 | "fresh": "0.5.2", 136 | "merge-descriptors": "1.0.1", 137 | "methods": "1.1.2", 138 | "on-finished": "2.3.0", 139 | "parseurl": "1.3.2", 140 | "path-to-regexp": "0.1.7", 141 | "proxy-addr": "2.0.4", 142 | "qs": "6.5.1", 143 | "range-parser": "1.2.0", 144 | "safe-buffer": "5.1.1", 145 | "send": "0.16.2", 146 | "serve-static": "1.13.2", 147 | "setprototypeof": "1.1.0", 148 | "statuses": "1.4.0", 149 | "type-is": "1.6.16", 150 | "utils-merge": "1.0.1", 151 | "vary": "1.1.2" 152 | }, 153 | "dependencies": { 154 | "body-parser": { 155 | "version": "1.18.2", 156 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 157 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 158 | "requires": { 159 | "bytes": "3.0.0", 160 | "content-type": "1.0.4", 161 | "debug": "2.6.9", 162 | "depd": "1.1.2", 163 | "http-errors": "1.6.3", 164 | "iconv-lite": "0.4.19", 165 | "on-finished": "2.3.0", 166 | "qs": "6.5.1", 167 | "raw-body": "2.3.2", 168 | "type-is": "1.6.16" 169 | } 170 | }, 171 | "iconv-lite": { 172 | "version": "0.4.19", 173 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 174 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 175 | }, 176 | "raw-body": { 177 | "version": "2.3.2", 178 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 179 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 180 | "requires": { 181 | "bytes": "3.0.0", 182 | "http-errors": "1.6.2", 183 | "iconv-lite": "0.4.19", 184 | "unpipe": "1.0.0" 185 | }, 186 | "dependencies": { 187 | "depd": { 188 | "version": "1.1.1", 189 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 190 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 191 | }, 192 | "http-errors": { 193 | "version": "1.6.2", 194 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 195 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 196 | "requires": { 197 | "depd": "1.1.1", 198 | "inherits": "2.0.3", 199 | "setprototypeof": "1.0.3", 200 | "statuses": "1.4.0" 201 | } 202 | }, 203 | "setprototypeof": { 204 | "version": "1.0.3", 205 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 206 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 207 | } 208 | } 209 | } 210 | } 211 | }, 212 | "finalhandler": { 213 | "version": "1.1.1", 214 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 215 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 216 | "requires": { 217 | "debug": "2.6.9", 218 | "encodeurl": "1.0.2", 219 | "escape-html": "1.0.3", 220 | "on-finished": "2.3.0", 221 | "parseurl": "1.3.2", 222 | "statuses": "1.4.0", 223 | "unpipe": "1.0.0" 224 | } 225 | }, 226 | "forwarded": { 227 | "version": "0.1.2", 228 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 229 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 230 | }, 231 | "fresh": { 232 | "version": "0.5.2", 233 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 234 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 235 | }, 236 | "http-errors": { 237 | "version": "1.6.3", 238 | "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 239 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 240 | "requires": { 241 | "depd": "1.1.2", 242 | "inherits": "2.0.3", 243 | "setprototypeof": "1.1.0", 244 | "statuses": "1.4.0" 245 | } 246 | }, 247 | "iconv-lite": { 248 | "version": "0.4.23", 249 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", 250 | "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", 251 | "requires": { 252 | "safer-buffer": "2.1.2" 253 | } 254 | }, 255 | "inherits": { 256 | "version": "2.0.3", 257 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 258 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 259 | }, 260 | "ipaddr.js": { 261 | "version": "1.8.0", 262 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz", 263 | "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=" 264 | }, 265 | "media-typer": { 266 | "version": "0.3.0", 267 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 268 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 269 | }, 270 | "merge-descriptors": { 271 | "version": "1.0.1", 272 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 273 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 274 | }, 275 | "methods": { 276 | "version": "1.1.2", 277 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 278 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 279 | }, 280 | "mime": { 281 | "version": "1.4.1", 282 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 283 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 284 | }, 285 | "mime-db": { 286 | "version": "1.36.0", 287 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.36.0.tgz", 288 | "integrity": "sha512-L+xvyD9MkoYMXb1jAmzI/lWYAxAMCPvIBSWur0PZ5nOf5euahRLVqH//FKW9mWp2lkqUgYiXPgkzfMUFi4zVDw==" 289 | }, 290 | "mime-types": { 291 | "version": "2.1.20", 292 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.20.tgz", 293 | "integrity": "sha512-HrkrPaP9vGuWbLK1B1FfgAkbqNjIuy4eHlIYnFi7kamZyLLrGlo2mpcx0bBmNpKqBtYtAfGbodDddIgddSJC2A==", 294 | "requires": { 295 | "mime-db": "1.36.0" 296 | } 297 | }, 298 | "ms": { 299 | "version": "2.0.0", 300 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 301 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 302 | }, 303 | "negotiator": { 304 | "version": "0.6.1", 305 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 306 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 307 | }, 308 | "object-assign": { 309 | "version": "4.1.1", 310 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 311 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 312 | }, 313 | "on-finished": { 314 | "version": "2.3.0", 315 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 316 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 317 | "requires": { 318 | "ee-first": "1.1.1" 319 | } 320 | }, 321 | "parseurl": { 322 | "version": "1.3.2", 323 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 324 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 325 | }, 326 | "path-to-regexp": { 327 | "version": "0.1.7", 328 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 329 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 330 | }, 331 | "proxy-addr": { 332 | "version": "2.0.4", 333 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", 334 | "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==", 335 | "requires": { 336 | "forwarded": "0.1.2", 337 | "ipaddr.js": "1.8.0" 338 | } 339 | }, 340 | "qs": { 341 | "version": "6.5.1", 342 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 343 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 344 | }, 345 | "range-parser": { 346 | "version": "1.2.0", 347 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 348 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 349 | }, 350 | "raw-body": { 351 | "version": "2.3.3", 352 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz", 353 | "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==", 354 | "requires": { 355 | "bytes": "3.0.0", 356 | "http-errors": "1.6.3", 357 | "iconv-lite": "0.4.23", 358 | "unpipe": "1.0.0" 359 | } 360 | }, 361 | "safe-buffer": { 362 | "version": "5.1.1", 363 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 364 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 365 | }, 366 | "safer-buffer": { 367 | "version": "2.1.2", 368 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 369 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 370 | }, 371 | "send": { 372 | "version": "0.16.2", 373 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 374 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 375 | "requires": { 376 | "debug": "2.6.9", 377 | "depd": "1.1.2", 378 | "destroy": "1.0.4", 379 | "encodeurl": "1.0.2", 380 | "escape-html": "1.0.3", 381 | "etag": "1.8.1", 382 | "fresh": "0.5.2", 383 | "http-errors": "1.6.3", 384 | "mime": "1.4.1", 385 | "ms": "2.0.0", 386 | "on-finished": "2.3.0", 387 | "range-parser": "1.2.0", 388 | "statuses": "1.4.0" 389 | } 390 | }, 391 | "serve-static": { 392 | "version": "1.13.2", 393 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 394 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 395 | "requires": { 396 | "encodeurl": "1.0.2", 397 | "escape-html": "1.0.3", 398 | "parseurl": "1.3.2", 399 | "send": "0.16.2" 400 | } 401 | }, 402 | "setprototypeof": { 403 | "version": "1.1.0", 404 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 405 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 406 | }, 407 | "statuses": { 408 | "version": "1.4.0", 409 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 410 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 411 | }, 412 | "type-is": { 413 | "version": "1.6.16", 414 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 415 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 416 | "requires": { 417 | "media-typer": "0.3.0", 418 | "mime-types": "2.1.20" 419 | } 420 | }, 421 | "unpipe": { 422 | "version": "1.0.0", 423 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 424 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 425 | }, 426 | "utils-merge": { 427 | "version": "1.0.1", 428 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 429 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 430 | }, 431 | "vary": { 432 | "version": "1.1.2", 433 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 434 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 435 | } 436 | } 437 | } 438 | -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.18.3", 13 | "cors": "^2.8.4", 14 | "express": "^4.16.3" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /frontend/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: beige 3 | } -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Push Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Hello World

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /frontend/index.js: -------------------------------------------------------------------------------- 1 | const check = () => { 2 | if (!("serviceWorker" in navigator)) { 3 | throw new Error("No Service Worker support!"); 4 | } 5 | if (!("PushManager" in window)) { 6 | throw new Error("No Push API Support!"); 7 | } 8 | }; 9 | 10 | const registerServiceWorker = async () => { 11 | const swRegistration = await navigator.serviceWorker.register("service.js"); 12 | return swRegistration; 13 | }; 14 | 15 | const requestNotificationPermission = async () => { 16 | const permission = await window.Notification.requestPermission(); 17 | // value of permission can be 'granted', 'default', 'denied' 18 | // granted: user has accepted the request 19 | // default: user has dismissed the notification permission popup by clicking on x 20 | // denied: user has denied the request. 21 | if (permission !== "granted") { 22 | throw new Error("Permission not granted for Notification"); 23 | } 24 | }; 25 | 26 | const main = async () => { 27 | check(); 28 | const permission = await requestNotificationPermission(); 29 | const swRegistration = await registerServiceWorker(); 30 | }; 31 | // main(); we will not call main in the beginning. 32 | -------------------------------------------------------------------------------- /frontend/service.js: -------------------------------------------------------------------------------- 1 | // urlB64ToUint8Array is a magic function that will encode the base64 public key 2 | // to Array buffer which is needed by the subscription option 3 | const urlB64ToUint8Array = base64String => { 4 | const padding = "=".repeat((4 - (base64String.length % 4)) % 4); 5 | const base64 = (base64String + padding) 6 | .replace(/\-/g, "+") 7 | .replace(/_/g, "/"); 8 | const rawData = atob(base64); 9 | const outputArray = new Uint8Array(rawData.length); 10 | for (let i = 0; i < rawData.length; ++i) { 11 | outputArray[i] = rawData.charCodeAt(i); 12 | } 13 | return outputArray; 14 | }; 15 | 16 | const saveSubscription = async subscription => { 17 | const SERVER_URL = "http://localhost:4000/save-subscription"; 18 | const response = await fetch(SERVER_URL, { 19 | method: "post", 20 | headers: { 21 | "Content-Type": "application/json" 22 | }, 23 | body: JSON.stringify(subscription) 24 | }); 25 | return response.json(); 26 | }; 27 | 28 | self.addEventListener("install", async () => { 29 | // This will be called only once when the service worker is installed for first time. 30 | try { 31 | const applicationServerKey = urlB64ToUint8Array( 32 | "BJ5IxJBWdeqFDJTvrZ4wNRu7UY2XigDXjgiUBYEYVXDudxhEs0ReOJRBcBHsPYgZ5dyV8VjyqzbQKS8V7bUAglk" 33 | ); 34 | const options = { applicationServerKey, userVisibleOnly: true }; 35 | const subscription = await self.registration.pushManager.subscribe(options); 36 | const response = await saveSubscription(subscription); 37 | console.log(response); 38 | } catch (err) { 39 | console.log("Error", err); 40 | } 41 | }); 42 | 43 | self.addEventListener("push", function(event) { 44 | if (event.data) { 45 | console.log("Push event!! ", event.data.text()); 46 | } else { 47 | console.log("Push event but no data"); 48 | } 49 | }); 50 | --------------------------------------------------------------------------------