Updated app logo

css/styles.css

@@ -54,17 +54,19 @@ header {
   width: 100%;
   height: 56px;
   top: 0;
-  background: #1E88E5;
+  background-color: #1E88E5;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.19);
   display: flex;
   overflow: hidden;
   z-index: 1;
   color: #fff;
   user-select: none;
+  -webkit-transition: background-color 250ms linear;
+  transition: background-color 250ms linear;
 }
 
 header.offline {
-  background: #6b6b6b;
+  background-color: #6b6b6b;
 }
 
 .header-icon {
@@ -166,7 +168,7 @@ header.offline {
   bottom: -50px;
   left: 0;
   right: 0;
-  width: 260px;
+  width: 280px;
   min-height: 50px;
   background: #323232;
   color: #fff;
@@ -176,6 +178,9 @@ header.offline {
   justify-content: space-between;
   transition: bottom 0.33s cubic-bezier(0, 0, 0.30, 1);
   will-change: transform;
+  font-weight: 500;
+  text-transform: capitalize;
+  border-radius: 2px;
 }
 
 .snack-bar.show {
@@ -214,6 +219,8 @@ button {
   -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38);
   -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38);
   -o-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38);
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 button:active {
@@ -299,18 +306,33 @@ button:disabled {
 }
 
 .card-title {
-  font-weight: 500;
   font-size: 18px;
   padding-top: 15px;
 }
 
+.card p > span {
+  font-style: italic;
+}
+
 .card p {
   padding-left: 15px;
   padding-bottom: 15px;
 }
 
-.disable-log {
-  margin-left: 20px;
-  user-select: none;
-  -webkit-user-select: none;
+.fab {
+  position: fixed;
+  right: 25px;
+  width: 56px;
+  height: 56px;
+  background: #0288d1;
+  cursor: pointer;
+  bottom: 25px;
+  border-radius: 50%;
+  color: #fff;
+  text-align: center;
+  display: block;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
+  font-size:1.5em;
+  min-width: initial;
+  -webkit-tap-highlight-color: transparent;
 }

index.html

@@ -45,21 +45,19 @@
         <input id="turn-on-notification" type="checkbox" hidden="hidden" class="custom-input" data-checked="">
         <label for="turn-on-notification" class="custom-checkbox"></label>
         <button class="btn-notification" id="send-push" disabled>Send Push Notification</button>
-        <label class="disable-log" for="disable-log">
-          <input type="checkbox" id="disable-log" class="disable-console-log">
-          Disable console log
-        </label>
       </p>
 
       <div class="card-container">
         <div class="card">
-          <p class="card-title">Bangalore, In</p>
-          <p><b>Wind: </b><span>8 KM/H</span></p>
-          <p><b>Humidity: </b><span>83%</span></p>
-          <p><b>Max Temperture: </b><span>297.15</span></p>
-          <p><b>Min Temperture: </b><span>297.15</span></p>
+          <p class="card-title"><b>City: </b><span>Bangalore, In</span></p>
+          <p class="card-wind-info"><b>Wind: </b><span>8 KM/H</span></p>
+          <p class="card-humidity-info"><b>Humidity: </b><span>83%</span></p>
+          <p class="card-max-temp"><b>Max Temperture: </b><span>297.15</span></p>
+          <p class="card-min-temp"><b>Min Temperture: </b><span>297.15</span></p>
         </div>
       </div>
+
+      <button class="fab">+</button>
     </div>
 
     <div class="snack-bar">
@@ -74,10 +72,10 @@
   if ("serviceWorker" in navigator) {
     navigator.serviceWorker.register('./serviceWorker.js', { scope: "./" }) //setting scope of sw
     .then(function (registration) {
-      console.log('%c service worker is registered ', 'background: #DFF2BF; color: #4F8A10; font-size: 13px;');
+      console.info('service worker is registered');
     })
     .catch(function (error) {
-      console.error('service worker failed ', 'background: #FFBABA; color: #D8000C; font-size: 13px;', error);
+      console.error('service worker failed ', error);
     });
   }
   </script>

js/app.js

@@ -6,24 +6,7 @@ var headerElement = document.querySelector('header');
 var menuIconElement = document.querySelector('.header-icon');
 var menuElement = document.querySelector('.menu');
 var menuOverlayElement = document.querySelector('.menu-overlay');
-var disableLogElement = document.querySelector('.disable-console-log');
-
-//Listen to disable log checkbox
-disableLogElement.addEventListener("change", function (event) {
-  if (event.target.checked) {
-    localStorage.setItem("disable-log", true);
-    disableLog();
-  }
-  else {
-    localStorage.removeItem("disable-log");
-    console = window.console;
-  }
-}, false);
-
-//To disable console log
-function disableLog() {
-  console.log = function() {};
-}
+var cardElement = document.querySelector('.card');
 
 //To show/hide loading indicator
 function toggleSpinner() {
@@ -63,11 +46,6 @@ menuOverlayElement.addEventListener("click", hideMenu, false);
 
 (function () {
 
-  if (localStorage.getItem("disable-log")) {
-    console.log = function() {};
-    disableLogElement.checked = true;
-  }
-
   //If `serviceWorker` is registered and ready
   navigator.serviceWorker.ready
     .then(function (registration) {
@@ -85,7 +63,12 @@ menuOverlayElement.addEventListener("click", hideMenu, false);
     fetch(url, { method: 'GET' })
     .then(resp => resp.json())
       .then(res => {
-        console.log('response -->', res);
+        console.log(res);
+        cardElement.querySelector('.card-title span').textContent = res.name + ', ' + res.sys.country;
+        cardElement.querySelector('.card-wind-info span').textContent = res.wind.speed + 'KM/H';
+        cardElement.querySelector('.card-humidity-info span').textContent = res.main.humidity + "%";
+        cardElement.querySelector('.card-max-temp span').textContent = res.main.temp_max;
+        cardElement.querySelector('.card-min-temp span').textContent = res.main.temp_min;
       })
       .catch(function (error) {
         console.error(error);

js/main.js

@@ -17,7 +17,7 @@ function isPushSupported(swRegistration) {
 
   //Check `push notification` is supported or not
   if (!('PushManager' in window)) {
-    console.warn('Push notification isn\'t supported in your browser.');
+    console.error('Push notification isn\'t supported in your browser.');
     return;
   }
 
@@ -50,7 +50,7 @@ function subscribePush() {
       userVisibleOnly: true //Always show notification when received
     })
     .then(function (subscription) {
-      console.log('%c Push notification subscribed ', 'background: #DFF2BF; color: #4F8A10; font-size: 13px;');
+      console.info('Push notification subscribed.');
       changePushStatus(true);
     })
     .catch(function (error) {
@@ -74,7 +74,7 @@ function unsubscribePush() {
       //Unsubscribe `push notification`
       subscription.unsubscribe()
         .then(function () {
-          console.log('%c Push notification unsubscribed ', 'background: #FEEFB3; color: #9F6000; font-size: 13px');
+          console.info('Push notification unsubscribed.');
           changePushStatus(false);
         })
         .catch(function (error) {
@@ -115,7 +115,7 @@ function curlCommand(subscription) {
   var temp = subscription.endpoint.split('/');
   var endpoint = temp[temp.length - 1];
   var curlCommand = 'curl --header "Authorization: key=' + apiKey + '" --header Content-Type:"application/json" ' + gcmURL + ' -d "{\\"registration_ids\\":[\\"' + endpoint + '\\"]}"';
-  console.log("%c Use curl command to send push notification: ", "background: #000; color: #fff; font-size: 13px;");
+  console.log("%c curl command to send push notification ", "background: #000; color: #fff; font-size: 13px;");
   console.log(curlCommand);
 }
 
@@ -126,20 +126,17 @@ function sendPushNotification(subscription) {
       registration.pushManager.getSubscription()
       .then(function (subscription) {
         curlCommand(subscription); //To log curl command in console
-        fetch("/send_notification", {
-          method: "post",
+        fetch('/send_notification', {
+          method: 'post',
           headers: {
-            "Accept": "application/json",
-            "Content-Type": "application/json"
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
           },
           body: JSON.stringify(subscription)
         })
         .then(function(response) {
           return response.json();
         })
-        .then(function(data) {
-          console.error("data", data);
-        })
       })
     })
 }

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "demo",
-  "description": "Demo - progress web application",
+  "name": "demo-progressive-web-app",
+  "description": "Demo progressive web application",
   "version": "1.0.0",
   "author": "gokulkrishh",
   "dependencies": {
@@ -11,7 +11,6 @@
   "engines": {
     "node": "4.1.1"
   },
-  "devDependencies": {},
   "scripts": {
     "start": "node server.js"
   },

server.js

@@ -1,5 +1,6 @@
-var express = require("express");
-var bodyParser = require("body-parser");
+'use strict';
+var express = require('express');
+var bodyParser = require('body-parser');
 var gcm = require('node-gcm');
 var app = express();
 
@@ -12,27 +13,27 @@ app.use(express.static(__dirname));
 
 //To allow cross origin request
 app.use(function(req, res, next) {
-  res.header("Access-Control-Allow-Origin", "*");
-  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
   next();
 });
 
 //To server index.html page
-app.get("/", function (req, res) {
-  res.sendFile(__dirname + "/index.html");
+app.get('/', function (req, res) {
+  res.sendFile(__dirname + '/index.html');
 });
 
 //To receive push request from client
-app.post("/send_notification", function (req, res) {
+app.post('/send_notification', function (req, res) {
   if (!req.body) {
     res.status(400);
   }
 
   var message = new gcm.Message();
-  var temp = req.body.endpoint.split("/");
+  var temp = req.body.endpoint.split('/');
   var regTokens = [temp[temp.length - 1]];
 
-  var sender = new gcm.Sender('AIzaSyCjrU5SqotSg2ybDLK_7rMMt9Rv0dMusvY'); //API Key
+  var sender = new gcm.Sender('AIzaSyCjrU5SqotSg2ybDLK_7rMMt9Rv0dMusvY'); //Replace with your GCM API key
 
   // Now the sender can be used to send messages
   sender.send(message, { registrationTokens: regTokens }, function (error, response) {
@@ -48,5 +49,5 @@ app.post("/send_notification", function (req, res) {
 });
 
 app.listen(process.env.PORT || 3000, function() {
-  console.log("Local Server : http://localhost:3000");
+  console.log('Local Server : http://localhost:3000');
 });

serviceWorker.js

@@ -21,15 +21,15 @@ var files = [
 
 //Adding `install` event listener
 self.addEventListener('install', function (event) {
-  console.log('%c Event: Install ', 'background: #FEEFB3; color: #9F6000; font-size: 13px;');
+  console.info('Event: Install');
 
   event.waitUntil(
     caches.open(cacheName)
     .then(function (cache) {
       //[] of files to cache & if any of the file not present `addAll` will fail
       return cache.addAll(files)
       .then(function () {
-        console.log('All files are cached');
+        console.info('All files are cached');
         return self.skipWaiting(); //To forces the waiting service worker to become the active service worker
       })
       .catch(function (error) {
@@ -45,9 +45,9 @@ self.addEventListener('install', function (event) {
 
 //Adding `fetch` event listener
 self.addEventListener('fetch', function (event) {
-  var request = event.request;
+  console.info('Event: Fetch');
 
-  console.log('%c Event: Fetch ', 'background: #FEEFB3; color: #9F6000; font-size: 13px;');
+  var request = event.request;
 
   //Tell the browser to wait for network request and respond with below
   event.respondWith(
@@ -79,7 +79,7 @@ self.addEventListener('fetch', function (event) {
 
 //Adding `activate` event listener
 self.addEventListener('activate', function (event) {
-  console.log('%c Event: Activate ', 'background: #FEEFB3; color: #9F6000; font-size: 13px;');
+  console.info('Event: Activate');
 
   //Active Service Worker to set itself as the active on current client and all other active clients.
   return self.clients.claim();
@@ -91,7 +91,7 @@ self.addEventListener('activate', function (event) {
 
 //Adding `push` event listener
 self.addEventListener('push', function(event) {
-  console.log('%c Event: Push ', 'background: #FEEFB3; color: #9F6000; font-size: 13px;');
+  console.info('Event: Push');
 
   var title = 'Push notification demo';
   var body = {
@@ -116,10 +116,10 @@ self.addEventListener('push', function(event) {
 self.addEventListener('notificationclick', function(event) {
   //Listen to custom actions buttons
   if (event.action === 'yes') {
-    console.log('%c I ♥ this app! ', 'background: #000; color: #fff');
+    console.log('I ♥ this app!');
   }
   else if (event.action === 'no') {
-    console.log('%c I don\'t like this app ', 'background: #000; color: #fff');
+    console.warn('I don\'t like this app');
   }
 
   //To open the app after clicking notification
@@ -144,7 +144,7 @@ self.addEventListener('notificationclick', function(event) {
       event.notification.close(); //Close the notification
     })
     .catch(function (err) {
-      console.log(err);
+      console.error(err);
     })
   );
 });