starter

firebase.json

+{
+  "hosting": {
+    "public": "src",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/js/sw.js",
+      "**/node_modules/**"
+    ]
+  }
+}

gulpfile.js

+/**
+ * Copyright 2018 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const gulp = require('gulp');
+const browserSync = require('browser-sync');
+const workboxBuild = require('workbox-build');
+
+// Inject a precache manifest into the service worker
+const buildSw = () => {
+  return workboxBuild.injectManifest({
+    swSrc: 'src/js/sw.js',
+    swDest: 'src/sw.js',
+    globDirectory: 'src',
+    globPatterns: [
+      'index.html',
+      'favicon.ico',
+      'css\/*.css',
+			'js\/*.js',
+			'images\/*.jpg',
+      'images\/**\/*.png',
+      'images\/**\/*.svg'
+    ]
+  }).then(resources => {
+    console.log(`Injected ${resources.count} resources for precaching, ` +
+        `totaling ${resources.size} bytes.`);
+  }).catch(err => {
+    console.log('Uh oh 😬', err);
+  });
+}
+gulp.task('build-sw', buildSw);
+
+// Build the app, run a local dev server, and rebuild on "src" file changes
+const browserSyncOptions = {
+  server: 'src',
+  port: 8080,
+  open: false
+};
+
+const serve = gulp.series('build-sw', () => {
+  browserSync.init(browserSyncOptions);
+  gulp.watch([
+		'src/**/*',
+		'!src/sw.js'
+	], buildSw).on('change', browserSync.reload);
+});
+gulp.task('serve', serve);
+
+// Set the default task to "serve"
+gulp.task('default', serve);

package.json

+{
+  "name": "PWASkeleton",
+  "version": "0.1.0",
+  "description": "PWA Skeleton",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "gulp serve"
+  },
+  "keywords": [
+    "UiTM",
+    "skeleton",
+    "PWA",
+    "training"
+  ],
+  "author": "mohdrafhanmohdamin",
+  "license": "ISC",
+  "devDependencies": {
+    "browser-sync": "^2.26.10",
+    "gulp": "^4.0.2",
+    "workbox-build": "^5.1.3"
+  }
+}

src/js/menu.js

+(function() {
+  'use strict';
+
+  var menuIconElement = document.querySelector('.header__icon');
+  var menuElement = document.querySelector('.menu');
+  var menuOverlayElement = document.querySelector('.menu__overlay');
+
+  //Menu click event
+  menuIconElement.addEventListener('click', showMenu, false);
+  menuOverlayElement.addEventListener('click', hideMenu, false);
+  menuElement.addEventListener('transitionend', onTransitionEnd, false);
+
+  //To show menu
+  function showMenu() {
+    menuElement.style.transform = "translateX(0)";
+    menuElement.classList.add('menu--show');
+    menuOverlayElement.classList.add('menu__overlay--show');
+  }
+
+  //To hide menu
+  function hideMenu() {
+    menuElement.style.transform = "translateX(-110%)";
+    menuElement.classList.remove('menu--show');
+    menuOverlayElement.classList.remove('menu__overlay--show');
+    menuElement.addEventListener('transitionend', onTransitionEnd, false);
+  }
+
+  var touchStartPoint, touchMovePoint;
+
+  /*Swipe from edge to open menu*/
+
+  //`TouchStart` event to find where user start the touch
+  document.body.addEventListener('touchstart', function(event) {
+    touchStartPoint = event.changedTouches[0].pageX;
+    touchMovePoint = touchStartPoint;
+  }, false);
+
+  //`TouchMove` event to determine user touch movement
+  document.body.addEventListener('touchmove', function(event) {
+    touchMovePoint = event.touches[0].pageX;
+    if (touchStartPoint < 10 && touchMovePoint > 30) {
+      menuElement.style.transform = "translateX(0)";
+    }
+  }, false);
+
+  function onTransitionEnd() {
+    if (touchStartPoint < 10) {
+      menuElement.style.transform = "translateX(0)";
+      menuOverlayElement.classList.add('menu__overlay--show');
+      menuElement.removeEventListener('transitionend', onTransitionEnd, false);
+    }
+  }
+})();

src/js/share.js

+(function() {
+  'use strict';
+
+  
+})();

src/js/sw.js

+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.3/workbox-sw.js');
+
+if (workbox) {
+  console.log(`Yay! Workbox is loaded 🎉`);
+
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+	workbox.googleAnalytics.initialize();
+
+} else {
+  console.log(`Boo! Workbox didn't load 😬`);
+}
+
+self.addEventListener('install', function(e) {
+  self.skipWaiting();
+
+});
+
+self.addEventListener('activate', function(e) {
+  return self.clients.claim();
+
+});
+
+self.addEventListener('push', function(e) {
+  const data = e.data.json();
+  var options;
+
+  if (data.url) {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100],
+			data : {url: data.url},
+      actions: [
+        {
+          action: 'web-action',
+          title: 'Open web'
+        }
+      ]
+    }
+  }
+  else {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100]
+    }
+  }
+
+  self.registration.showNotification(data.title, options);
+});
+
+self.addEventListener('pushsubscriptionchange', function(e) {
+  console.info('Subscription expired');
+
+});
+
+self.addEventListener('notificationclick', function(e) {
+  if (!e.action) {
+    // Was a normal notification click
+    console.info('Notification Click.');
+    return;
+  }
+
+  switch (e.action) {
+    case 'web-action':
+      e.notification.close();
+
+      e.waitUntil(
+        clients.openWindow(e.notification.data.url)
+      );
+      break;
+  }
+});

src/js/swipe.js

+(function() {
+  'use strict';
+
+  // credit: http://www.javascriptkit.com/javatutors/touchevents2.shtml
+   function swipedetect(el, callback){
+
+    var touchsurface = el,
+    swipedir,
+    startX,
+    startY,
+    dist,
+    distX,
+    distY,
+    threshold = 120, //required min distance traveled to be considered swipe
+    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
+    allowedTime = 300, // maximum time allowed to travel that distance
+    elapsedTime,
+    startTime,
+    handleswipe = callback || function(swipedir){};
+
+    touchsurface.addEventListener('touchstart', function(e){
+    var touchobj = e.changedTouches[0];
+      swipedir = 'none';
+      dist = 0;
+      startX = touchobj.pageX;
+      startY = touchobj.pageY;
+      startTime = new Date().getTime(); // record time when finger first makes contact with surface
+    }, false);
+/**
+    touchsurface.addEventListener('touchmove', function(e){
+      e.preventDefault() // prevent scrolling when inside DIV
+    }, false);
+**/
+    touchsurface.addEventListener('touchend', function(e){
+      if(e.changedTouches.length > 0) {
+        var touchobj = e.changedTouches[0];
+        distX = touchobj.pageX - startX; // get horizontal dist traveled by finger while in contact with surface
+        distY = touchobj.pageY - startY; // get vertical dist traveled by finger while in contact with surface
+        elapsedTime = new Date().getTime() - startTime; // get time elapsed
+        if (elapsedTime <= allowedTime){ // first condition for awipe met
+          if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
+            swipedir = (distX < 0)? 'left' : 'right'; // if dist traveled is negative, it indicates left swipe
+          }
+          else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
+            swipedir = (distY < 0)? 'up' : 'down'; // if dist traveled is negative, it indicates up swipe
+          }
+        }
+        handleswipe(swipedir);
+      }
+    }, false);
+  }
+
+  var menuIconElement    = document.querySelector('.header__icon');
+  var menuElement        = document.querySelector('.menu');
+  var menuOverlayElement = document.querySelector('.menu__overlay');
+
+  function showMenu() {
+    menuElement.style.transform = "translateX(0)";
+    menuElement.classList.add('menu--show');
+    menuOverlayElement.classList.add('menu__overlay--show');
+  }
+
+  //USAGE:
+  // swipedir contains either "none", "left", "right", "top", or "down"
+
+  var e;
+  try {
+    e = new Event('touchend');
+  }
+  catch (error) {
+    e = document.createEvent('TouchEvent');
+    e.initEvent('touchend', true, true);
+  }
+
+  var main = document.querySelector('.page0');
+  swipedetect(main, function(swipedir){
+    if(swipedir=='right') {
+      showMenu();
+    }
+  });
+
+})();

src/js/toast.js

+(function(exports) {
+  'use strict';
+
+  var toastContainer = document.querySelector('.toast__container');
+
+  function toast(msg, options, clss) {
+    if (!msg) return;
+
+    options = options || 3000;
+		clss = clss || '';
+
+    var toastMsg = document.createElement('div');
+
+    toastMsg.className = 'toast__msg toast__msg--visible ' + clss;
+    toastMsg.innerHTML = msg;
+
+    toastContainer.appendChild(toastMsg);
+
+    //Show toast for 3secs and hide it
+    setTimeout(function() {
+      toastMsg.classList.remove('toast__msg--visible');
+    }, options);
+
+    //Remove the element after hiding
+    toastMsg.addEventListener('transitionend', function(event) {
+      event.target.parentNode.removeChild(event.target);
+    });
+  }
+
+  exports.toast = toast; //Make this method available in global
+})(typeof window === 'undefined' ? module.exports : window);

src/sw.js

+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.3/workbox-sw.js');
+
+if (workbox) {
+  console.log(`Yay! Workbox is loaded 🎉`);
+
+  workbox.precaching.precacheAndRoute([{"revision":"b1c77f9c5225951a9c6bd70d4188fa6a","url":"index.html"},{"revision":"6f38b559ee2733468231d0e3589a46f2","url":"favicon.ico"},{"revision":"fa694d319ff249bbafc9b0ebeb5bdd8a","url":"css/app.css"},{"revision":"0d606a447f16af75e775b64b27f3c442","url":"js/app.js"},{"revision":"ae75e72cfa193100f2baba436c50616b","url":"js/menu.js"},{"revision":"07eab90e6269c3f19ddc34ddfb890adf","url":"js/share.js"},{"revision":"fc8aef5e3399c8fb6efea89b54459f11","url":"js/swipe.js"},{"revision":"609e8f6ce7aa15cd2e5effde31057a80","url":"js/toast.js"},{"revision":"9cff0b914c679f32a3c1e4162f80522a","url":"images/badges/notification_192.png"},{"revision":"784b1c63c7be412d166db4a3d49f2501","url":"images/icons/icon-128x128.png"},{"revision":"adb787791bb14d1a5a076321c886b171","url":"images/icons/icon-144x144.png"},{"revision":"e25a0afa07977ad1039a46b9ab82daee","url":"images/icons/icon-152x152.png"},{"revision":"86e1f0fae80ecb97faad31f57d88aaec","url":"images/icons/icon-192x192.png"},{"revision":"72c220ac025d55ff95abe164ffb31db4","url":"images/icons/icon-384x384.png"},{"revision":"720fb062cb6d0f37070a9d877967a894","url":"images/icons/icon-512x512.png"},{"revision":"c03ad90690383f8dc249bb6c7a407aab","url":"images/icons/icon-72x72.png"},{"revision":"2ee2cc270deb2d95e2c8773398eff1fe","url":"images/icons/icon-96x96.png"},{"revision":"1b9053762212073bbade3145680cbf41","url":"images/logoUiTM.svg"}]);
+
+	workbox.googleAnalytics.initialize();
+
+} else {
+  console.log(`Boo! Workbox didn't load 😬`);
+}
+
+self.addEventListener('install', function(e) {
+  self.skipWaiting();
+
+});
+
+self.addEventListener('activate', function(e) {
+  return self.clients.claim();
+
+});
+
+self.addEventListener('push', function(e) {
+  const data = e.data.json();
+  var options;
+
+  if (data.url) {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100],
+			data : {url: data.url},
+      actions: [
+        {
+          action: 'web-action',
+          title: 'Open web'
+        }
+      ]
+    }
+  }
+  else {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100]
+    }
+  }
+
+  self.registration.showNotification(data.title, options);
+});
+
+self.addEventListener('pushsubscriptionchange', function(e) {
+  console.info('Subscription expired');
+
+});
+
+self.addEventListener('notificationclick', function(e) {
+  if (!e.action) {
+    // Was a normal notification click
+    console.info('Notification Click.');
+    return;
+  }
+
+  switch (e.action) {
+    case 'web-action':
+      e.notification.close();
+
+      e.waitUntil(
+        clients.openWindow(e.notification.data.url)
+      );
+      break;
+  }
+});