Step 1 | Simple JS PWA

amahdy · Jan 16, 2017 · 56fb4fc · 56fb4fc
1 parent 8c0b257
commit 56fb4fc
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 0 deletions.
diff --git a/js-pwa/.gitignore b/js-pwa/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/js-pwa/favicon.ico b/js-pwa/favicon.ico
diff --git a/js-pwa/images/touch/apple-touch-icon.png b/js-pwa/images/touch/apple-touch-icon.png
diff --git a/js-pwa/images/touch/chrome-touch-icon-192x192.png b/js-pwa/images/touch/chrome-touch-icon-192x192.png
diff --git a/js-pwa/images/touch/icon-128x128.png b/js-pwa/images/touch/icon-128x128.png
diff --git a/js-pwa/images/touch/ms-touch-icon-144x144-precomposed.png b/js-pwa/images/touch/ms-touch-icon-144x144-precomposed.png
diff --git a/js-pwa/images/yeoman.png b/js-pwa/images/yeoman.png
diff --git a/js-pwa/index.html b/js-pwa/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>jsPwa</title>
+    <meta http-equiv=X-UA-Compatible content="IE=edge">
+    <meta name=description content="A progressive webapp">
+    <meta name=viewport content="width=device-width, initial-scale=1">
+    <link rel="manifest" href="manifest.json">
+    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="PWA">
+    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
+    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
+    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+    <meta name="msapplication-TileColor" content="#2F3BA2">
+    <meta name="theme-color" content="#2F3BA2">
+  </head>
+  <body>
+    <div id="content">
+       <img src="images/yeoman.png" />
+       <p> Check the console for service worker logs and after sw is active this image will load even when you are offline! </p>
+
+    </div>
+  </body>
+
+  <script src="/js/app.js"></script>
+</html>
diff --git a/js-pwa/js/app.js b/js-pwa/js/app.js
@@ -0,0 +1,26 @@
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.register('../sw.js', { scope: '/' }).then((reg) => {
+		if (reg.installing) {
+			console.log('Service worker installing');
+		} else if(reg.waiting) {
+			console.log('Service worker installed');
+		} else if(reg.active) {
+			console.log('Service worker active');
+		}
+
+	}).catch((error) => {
+		console.log('Registration failed with ' + error); // Registration failed
+	});
+
+  // Communicate with the service worker using MessageChannel API.
+  function sendMessage(message) {
+    return new Promise((resolve, reject) => {
+      const messageChannel = new MessageChannel();
+      messageChannel.port1.onmessage = function(event) {
+        resolve(`Direct message from SW: ${event.data}`);
+      };
+
+      navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2])
+    });
+  }
+}
diff --git a/js-pwa/manifest.json b/js-pwa/manifest.json
@@ -0,0 +1,26 @@
+
+{
+  "short_name": "js-pwa",
+  "name": "js-pwa",
+  "display": "standalone",
+  "icons": [{
+        "src": "images/touch/icon-128x128.png",
+        "sizes": "128x128",
+        "type": "image/png"
+    }, {
+        "src": "images/touch/apple-touch-icon.png",
+        "sizes": "152x152",
+        "type": "image/png"
+    }, {
+        "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
+        "sizes": "144x144",
+        "type": "image/png"
+    }, {
+        "src": "images/touch/chrome-touch-icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+  }],
+  "start_url": "/index.html?hs=1",
+  "theme_color": "#a040a0",
+  "background_color": "#EEEEEE"
+}
diff --git a/js-pwa/package.json b/js-pwa/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "js-pwa",
+  "description": "Your PWA app",
+  "version": "1.0.0",
+  "author": "",
+  "dependencies": {
+    "express": "^4.13.4"
+  },
+  "engines": {
+    "node": "4.1.1"
+  },
+  "devDependencies": {
+  },
+  "scripts": {
+    "start": "node server.js"
+  }
+}
diff --git a/js-pwa/server.js b/js-pwa/server.js
@@ -0,0 +1,15 @@
+var express = require('express');
+var app = express();
+
+//To server static assests in root dir
+app.use(express.static(__dirname));
+
+//To server index.html page
+app.get('/', function (req, res) {
+  res.sendFile(__dirname + '/index.html');
+});
+
+
+app.listen(process.env.PORT || 3000, function() {
+  console.log('Local Server : http://localhost:3000');
+});
diff --git a/js-pwa/sw.js b/js-pwa/sw.js
@@ -0,0 +1,76 @@
+var CACHE_NAME = 'sw-ex';
+var CACHE_VERSION = 1;
+
+var filesToCache = [
+  '/',
+  '/index.html',
+  '/css/styles.css',
+  '/js/app.js',
+  '/images/yeoman.png',
+  '/images/touch/chrome-touch-icon-192x192.png'
+];
+
+self.oninstall = function(event) {
+  event.waitUntil(
+    caches.open(CACHE_NAME + '-v' + CACHE_VERSION).then(function(cache) {
+      return cache.addAll(filesToCache);
+    })
+  );
+};
+
+self.onactivate = function(event) {
+  var currentCacheName = CACHE_NAME + '-v' + CACHE_VERSION;
+  caches.keys().then(function(cacheNames) {
+    return Promise.all(
+      cacheNames.map(function(cacheName) {
+        if (cacheName.indexOf(CACHE_NAME) == -1) {
+          return;
+        }
+
+        if (cacheName != currentCacheName) {
+          return caches.delete(cacheName);
+        }
+      })
+    );
+  });
+};
+
+self.onfetch = function(event) {
+  var request = event.request;
+  event.respondWith(
+    caches.match(request).then(function(response) {
+      if (response) {
+        return response;
+      }
+
+      return fetch(request).then(function(response) {
+        var responseToCache = response.clone();
+        caches.open(CACHE_NAME + '-v' + CACHE_VERSION).then(
+          function(cache) {
+            cache.put(request, responseToCache).catch(function(err) {
+              console.warn(request.url + ': ' + err.message);
+            });
+          });
+        return response;
+      });
+    })
+  );
+};
+
+
+// Communicate via MessageChannel.
+self.addEventListener('message', function(event) {
+  console.log(`Received message from main thread: ${event.data}`);
+  event.ports[0].postMessage(`Got message! Sending direct message back - "${event.data}"`);
+});
+
+// Broadcast via postMessage.
+function sendMessage(message) {
+  self.clients.matchAll().then(function(clients) {
+    clients.map(function(client) {
+      return client.postMessage(message);
+    })
+  });
+}
+
+