add push notification

Bharat23 · Apr 18, 2018 · 913aab7 · 913aab7
1 parent 4581342
commit 913aab7
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 45 deletions.
diff --git a/app/index.html b/app/index.html
@@ -5,11 +5,12 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#3F51B5">
-    <link rel="icon" href="/images/logo_36.png">
+    <link rel="icon" href="/static/images/logo_36.png">
     <style type="text/css">
         .splash-screen{
             top:0;
             left:0;
+            z-index: 4;
             position: fixed;
             width: 100%;
             height: 100%;
@@ -70,7 +71,7 @@
             color: rgb(255, 255, 255);
             text-shadow: 1px 1px 2px #000000;
             height: 176px;
-            background: url('../images/pwablog.jpg') center / cover;
+            background: url('../static/images/pwablog.jpg') center / cover;
         }
         .demo-card-wide > .mdl-card__menu {
             color: #fff;
@@ -127,27 +128,34 @@ <h2 class="mdl-card__title-text">Welcome</h2>
   </main>
 </div>
 </body>
-<link rel="stylesheet" type="text/css" href="css/material.min.css">
-<link rel="stylesheet" type="text/css" href="css/material.css">
+<link rel="stylesheet" type="text/css" href="/static/css/material.min.css">
+<link rel="stylesheet" type="text/css" href="/static/css/material.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<script type="text/javascript" src="js/material.min.js"></script>
-<script type="text/javascript" src="js/main.js"></script>
+<script type="text/javascript" src="/static/js/material.min.js"></script>
+<script type="text/javascript" src="/static/js/main.js"></script>
 <script type="text/javascript">
     window.addEventListener('load', () => {
         initOnline();
         splashScreen();
        registerServiceWorker();
     });
     var registerServiceWorker = () => {
-        var success = (msg) => {
-            console.log('Service Worker Registered Successfully', msg);
+        var success = (reg) => {
+            console.log('Service Worker Registered Successfully', reg);
+            return reg.pushManager.getSubscription()
+        };
+        let subscribe = (subscribeState) => {
+            if (subscribeState === null) {
+                subscribeUser();
+            }
         };
         var error = (err) => {
             console.log('Service worker registeration failed', err);
         };
         if('serviceWorker' in navigator){
             navigator.serviceWorker.register('/sw-wb.js')
                 .then(success)
+                .then(subscribe)
                 .catch(error);
         }
     };

diff --git a/app/manifest.json b/app/manifest.json
@@ -1,6 +1,7 @@
 {
   "name": "Basic PWA App",
   "short_name": "Web App Lite",
+  "gcm_sender_id": "1073424761741",
   "icons": [
     {
       "src": "/images/logo_36.png",

diff --git a/app/post-page.html b/app/post-page.html
@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#3F51B5">
-    <link rel="icon" href="/images/logo_36.png">
+    <link rel="icon" href="/static/images/logo_36.png">
     <style type="text/css">
         .splash-screen{
             top:0;
@@ -70,7 +70,7 @@
             color: rgb(255, 255, 255);
             text-shadow: 1px 1px 2px #000000;
             height: 176px;
-            background: url('../images/pwablog.jpg') center / cover;
+            background: url('../static/images/pwablog.jpg') center / cover;
         }
         .demo-card-wide > .mdl-card__menu {
             color: #fff;
@@ -127,11 +127,11 @@ <h2 class="mdl-card__title-text">Welcome</h2>
   </main>
 </div>
 </body>
-<link rel="stylesheet" type="text/css" href="css/material.min.css">
-<link rel="stylesheet" type="text/css" href="css/material.css">
+<link rel="stylesheet" type="text/css" href="/static/css/material.min.css">
+<link rel="stylesheet" type="text/css" href="/static/css/material.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<script type="text/javascript" src="js/material.min.js"></script>
-<script type="text/javascript" src="js/main.js"></script>
+<script type="text/javascript" src="/static/js/material.min.js"></script>
+<script type="text/javascript" src="/static/js/main.js"></script>
 <script type="text/javascript">
     window.addEventListener('load', () => {
         initOnline();

diff --git a/app/static/js/main.js b/app/static/js/main.js
@@ -63,7 +63,7 @@ let handleError = (err) => {
 };
 
 var fetchPosts = () => {
-    return fetch('/data/blogs.json');
+    return fetch('/static/data/blogs.json');
 };
 
 var cleanContent = () => document.getElementsByClassName('page-content')[0].innerHTML = '';
@@ -77,6 +77,21 @@ var init = () => {
         data.map(val => createPostItem(val, 2, false, 'Read More'));
     })
     .catch(handleError);
+    if (Notification.permission !== 'granted') {
+        Notification.requestPermission()
+        .then(access => {
+            console.log('Notification Status')
+            if (access === 'granted') {
+                return navigator.serviceWorker.getRegistration()
+            }
+            else {
+                console.log('NOOOOO')
+            }
+        })
+        .then(reg => {
+            reg.showNotification('Hellow');
+        });
+    }
 };
 
 var initPostPage = () => {
@@ -107,4 +122,14 @@ window.addEventListener('click', (ev) => {
     if(ev.target.dataset.postId) {
         location.href = '/post-page.html?postid=' + ev.target.dataset.postId;
     }
-});
+});
+
+const subscribeUser = () => {
+    navigator.serviceWorker.ready
+    .then((reg) => {
+        return reg.pushManager.subscribe({ userVisibleOnly: true })
+    })
+    .then(sub => {
+        console.log(sub);
+    })
+};
diff --git a/app/sw-basic.js b/app/sw-basic.js
@@ -5,9 +5,9 @@ var CACHE_BLACKLIST = ['/my-sw.js','/sw.js'];
 var CACHE_LIST = [
     '/',
     '/index.html',
-    '/css/material.min.css',
-    '/css/material.min.js',
-    '/js/main.js'
+    '/static/css/material.min.css',
+    '/static/css/material.min.js',
+    '/static/js/main.js'
 ];
 
 self.addEventListener('install', function (event) {

diff --git a/app/sw-wb.js b/app/sw-wb.js
@@ -1,4 +1,4 @@
-importScripts('/workbox-sw/build/importScripts/workbox-sw.prod.v2.1.0.js');
+importScripts('/workbox-sw/build/importScripts/workbox-sw.prod.v2.1.3.js');
 
 
 //clientclain immediately takes control of the client as soon as it is activated
@@ -10,15 +10,15 @@ workboxSW.precache([
         revision: '1'
     },
     {
-        url: '/js/material.min.js',
+        url: '/static/js/material.min.js',
         revision: '1'
     },
     {
-        url: '/js/main.js',
+        url: '/static/js/main.js',
         revision: '1'
     },
     {
-        url: '/css/material.min.css',
+        url: '/static/css/material.min.css',
         revision: '1'
     },
     {
@@ -28,7 +28,7 @@ workboxSW.precache([
 ]);
 
   workboxSW.router.registerRoute(
-    '/images/(.*)',
+    '/static/images/(.*)',
     workboxSW.strategies.cacheFirst({
       cacheName: 'images',
       cacheExpiration: {
@@ -47,9 +47,22 @@ console.log('ge',workboxSW.strategies);
   );
 
   workboxSW.router.registerRoute(
-    '/data/(.*).json',
+    '/static/data/(.*).json',
     workboxSW.strategies.networkFirst({
       cacheName: 'API',
       networkTimeoutSeconds: 2
     })
-  );
+  );
+
+  self.addEventListener('push', (e) => {
+    let body;
+    if (e.body) {
+      body = e.body.text();
+    }
+    else {
+      body = 'No Payload';
+    }
+    e.waitUntil(
+      self.registration.showNotification(body)
+    );
+  });
diff --git a/index.js b/index.js
@@ -6,26 +6,9 @@ var app = express();
 
 
 app.use(morgan('tiny'));
-app.use(express.static(__dirname + '/app/static'));
+app.use(express.static('app'));
 app.use(express.static(__dirname + '/node_modules'));
 
-app.get('*.json',function (req, res) {
-    console.log(req.originalUrl);
-    res.sendFile('app'+req.originalUrl, {root: __dirname})
-});
-
-
-app.get('/*.js',function (req, res) {
-   res.sendfile('app'+req.originalUrl, {root: __dirname});
-});
-
-app.get('/*.html',function (req, res) {
-   res.sendfile('app'+req.originalUrl.split("?")[0], {root: __dirname});
-});
-
-app.get('*',function(req, res){
-	res.sendFile('app/index.html', {root: __dirname});
-});
 
 const port = config.SERVER.PORT;
 app.listen(port);
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "description": "Boiler plate for PWA App",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "nodemon index.js"
   },
   "author": "Bharat Sinha",
   "license": "ISC",

diff --git a/workbox-config.js b/workbox-config.js
@@ -0,0 +1,8 @@
+module.exports = {
+    globDirectory: './app/',
+    globPatterns: [
+      '**/*.{html,js}'
+    ],
+    swDest: './app/sw-wb.js',
+    swSrc: './app/sw-conf-wb.js'
+};