diff --git a/css/styles.css b/css/styles.css
index e675005..df4957f 100644
--- a/css/styles.css
+++ b/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;
}
diff --git a/images/icons/android-chrome-192x192.png b/images/icons/android-chrome-192x192.png
index 2837802..6a1e7f9 100644
Binary files a/images/icons/android-chrome-192x192.png and b/images/icons/android-chrome-192x192.png differ
diff --git a/images/icons/android-chrome-512x512.png b/images/icons/android-chrome-512x512.png
index 973711c..bb4bc2c 100644
Binary files a/images/icons/android-chrome-512x512.png and b/images/icons/android-chrome-512x512.png differ
diff --git a/images/icons/apple-touch-icon.png b/images/icons/apple-touch-icon.png
index 1826bca..526a7a8 100644
Binary files a/images/icons/apple-touch-icon.png and b/images/icons/apple-touch-icon.png differ
diff --git a/images/icons/favicon-16x16.png b/images/icons/favicon-16x16.png
index 04bebb3..81ec813 100644
Binary files a/images/icons/favicon-16x16.png and b/images/icons/favicon-16x16.png differ
diff --git a/images/icons/favicon-32x32.png b/images/icons/favicon-32x32.png
index 0905eee..2766997 100644
Binary files a/images/icons/favicon-32x32.png and b/images/icons/favicon-32x32.png differ
diff --git a/images/icons/favicon.ico b/images/icons/favicon.ico
new file mode 100644
index 0000000..449c974
Binary files /dev/null and b/images/icons/favicon.ico differ
diff --git a/images/icons/mstile-150x150.png b/images/icons/mstile-150x150.png
index 6bf31fe..4e01409 100644
Binary files a/images/icons/mstile-150x150.png and b/images/icons/mstile-150x150.png differ
diff --git a/index.html b/index.html
index 830c93e..c22fce4 100644
--- a/index.html
+++ b/index.html
@@ -45,21 +45,19 @@
-
-
Bangalore, In
-
Wind: 8 KM/H
-
Humidity: 83%
-
Max Temperture: 297.15
-
Min Temperture: 297.15
+
City: Bangalore, In
+
Wind: 8 KM/H
+
Humidity: 83%
+
Max Temperture: 297.15
+
Min Temperture: 297.15
+
+
@@ -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);
});
}
diff --git a/js/app.js b/js/app.js
index 1d9d48a..0617e27 100644
--- a/js/app.js
+++ b/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);
diff --git a/js/main.js b/js/main.js
index a4aafef..41ef103 100644
--- a/js/main.js
+++ b/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);
- })
})
})
}
diff --git a/package.json b/package.json
index a376ade..ad4277a 100644
--- a/package.json
+++ b/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"
},
diff --git a/server.js b/server.js
index 25c691f..7932d79 100644
--- a/server.js
+++ b/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');
});
diff --git a/serviceWorker.js b/serviceWorker.js
index 9b6a7df..c2fdcd2 100644
--- a/serviceWorker.js
+++ b/serviceWorker.js
@@ -21,7 +21,7 @@ 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)
@@ -29,7 +29,7 @@ self.addEventListener('install', function (event) {
//[] 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);
})
);
});