Commit beadbbbf authored by Anna Kutschka's avatar Anna Kutschka

tabs sync working

parent 0b4c9acc
PWA Homework
......@@ -39,11 +39,17 @@
<header class="header">
<h1 class="header__title">Weather PWA</h1>
<button id="butRefresh" class="headerButton" aria-label="Refresh"></button>
<button id="butAdd" class="headerButton" aria-label="Add"></button>
<button id="butAdd" class="headerButton" aria-label="Add"></button>
<input onclick="showForm()" id="butAuth" class="authButton" type="button" value="login"/>
</header>
<main class="main">
<div id="dialog" class="logout">
You are logged out. You need to sign in again!
</div>
<div class="card cardTemplate weather-forecast" hidden>
<div class="city-key" hidden></div>
<div class="card-last-updated" hidden></div>
......@@ -174,6 +180,6 @@
<!-- Uncomment the line below when ready to test with fake data -->
<script src="scripts/app.js" async></script>
<script src="scripts/auth.js" async></script>
</body>
</html>
......@@ -360,8 +360,31 @@
// TODO add service worker code here
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('../service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}
navigator.serviceWorker.register('../service-worker.js')
.then(function() {
console.log('Service Worker Registered');
return navigator.serviceWorker.ready;
})
.then(function(reg) {
navigator.serviceWorker.addEventListener('message', function(event){
//for tab sync
console.log(event.data)
if(event.data == 0){
//user is logged in
document.getElementById("butAuth").value = "logout"
document.getElementById("dialog").style.display = "none";
console.log('you are logged in')
} else {
//user is logged out
document.getElementById("butAuth").value = "login"
document.getElementById("dialog").style.display = "inline-block";
console.log('you are logged out')
}
});
}).catch(function(error) {
console.error('Service Worker registration error : ', error);
});
}
})();
function stateToServiceWorker(data){
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(data);
console.log(data)
if(data == 0){
//user is logged in
document.getElementById("butAuth").value = "logout"
document.getElementById("dialog").style.display = "none";
console.log('you are logged in')
} else {
//user is logged out
document.getElementById("butAuth").value = "login"
document.getElementById("dialog").style.display = "inline-block";
console.log('you are logged out')
}
}
}
if(document.getElementById("butAuth").value == "login"){
document.getElementById("dialog").style.display = "inline-block";
}
//IF U ARE LOGGED IN = 0
//IF U ARE LOGGED OUT = 1
function showForm(){
if(document.getElementById("butAuth").value == "logout"){
document.getElementById("butAuth").value = "login";
document.getElementById("dialog").style.display = "inline-block";
stateToServiceWorker(1)
} else {
document.getElementById("dialog").style.display = "none";
stateToServiceWorker(0)
}
}
var dataCacheName = 'weatherData-v1';
var cacheName = 'weatherPWA-step-6-1';
var cacheName = 'weatherPWA-final-1';
var filesToCache = [
'/',
'/index.html',
'/scripts/app.js',
'/styles/inline.css',
'/images/clear.png',
'/images/cloudy-scattered-showers.png',
'/images/cloudy.png',
'/images/fog.png',
'/images/ic_add_white_24px.svg',
'/images/ic_refresh_white_24px.svg',
'/images/partly-cloudy.png',
'/images/rain.png',
'/images/scattered-showers.png',
'/images/sleet.png',
'/images/snow.png',
'/images/thunderstorm.png',
'/images/wind.png'
];
'/',
'/index.html',
'/scripts/app.js',
'/styles/inline.css',
'/images/clear.png',
'/images/cloudy-scattered-showers.png',
'/images/cloudy.png',
'/images/fog.png',
'/images/ic_add_white_24px.svg',
'/images/ic_refresh_white_24px.svg',
'/images/partly-cloudy.png',
'/images/rain.png',
'/images/scattered-showers.png',
'/images/sleet.png',
'/images/snow.png',
'/images/thunderstorm.png',
'/images/wind.png'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
......@@ -28,67 +28,75 @@ self.addEventListener('install', function(e) {
return cache.addAll(filesToCache);
}).then(function(){
console.log("skipWaiting")
return self.skipWaiting();
return self.skipWaiting();
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
);
return self.clients.claim();
});
self.addEventListener('fetch', function(e) {
console.log('[ServiceWorker] Fetch', e.request.url);
var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
if (e.request.url.indexOf(dataUrl) > -1) {
e.respondWith(
caches.open(dataCacheName).then(function(cache) {
return fetch(e.request).then(function(response){
cache.put(e.request.url, response.clone());
return response;
});
})
);
} else {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
console.log('[Service Worker] Fetch', e.request.url);
var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
if (e.request.url.indexOf(dataUrl) > -1) {
e.respondWith(
caches.open(dataCacheName).then(function(cache) {
return fetch(e.request).then(function(response){
cache.put(e.request.url, response.clone());
return response;
});
})
);
}
} else {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
}
});
//MessageChannel - Window Code
var msgChan = new MessagingChannel()
msgChan.port1.onmessage = function (event) {
console.log('Message received in page:' + event.data)
//https://www.loxodrome.io/post/tab-state-service-workers/
self.addEventListener('message', function(event){
// Receive the data from the client
var data = event.data;
// The unique ID of the tab
var clientId = event.source.id
// A function that handles the message
self.syncTabState(data, clientId);
});
self.sendTabState = function(client, data){
// Post data to a specific client
client.postMessage(data);
}
var msg = { action: 'triple', value: 2 }
navigator.serviceWorker.controller.postMessage(msg, [msgChan.port2])
self.syncTabState = function(data, clientId){
clients.matchAll().then(function(clients) {
//ServiceWorkerCode
self.addEventListener('message', function (event) {
var data = event.data
var openPort = messageEvent.ports[0]
if (data.action === 'triple') {
openPort.postMessage(data.value * 3)
}
})
\ No newline at end of file
// Loop over all available clients
clients.forEach(function(client) {
// No need to update the tab that
// sent the data
if (client.id !== clientId) {
self.sendTabState(client, data)
}
})
})
}
\ No newline at end of file
......@@ -404,3 +404,95 @@ body {
.mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {
color: white;
background-color: #3f51b5; }
#butAuth {
background: white;
border: none;
border-radius: 2px;
color: black;
position: relative;
height: 36px;
margin-right: 16px;
margin-bottom: 16px;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
#editText {
background: #3f51b5;
color: white;
font-size: 20px;
border: none;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
border-radius: 2px;
margin: 5px;
width: 50%;
height: 40px;
}
#editTextPassword{
background: #3f51b5;
color: white;
font-size: 20px;
border: none;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
border-radius: 2px;
margin: 5px;
width: 50%;
height: 40px;
}
::placeholder {
color: white;
}
#inputfield {
background: #f2f2f2;
position: relative;
left: 16px;
border: none;
border-radius: 2px;
padding: 0 16px;
color: black;
}
.butLogin{
background: white;
border: none;
border-radius: 2px;
color: black;
position: relative;
height: 36px;
margin: 10px;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
#dialog {
display: none;
background: white;
border: none;
text-align: center;
border-radius: 2px;
color: black;
position: relative;
margin: 10%;
width: 90%;
height: 20%;
padding: 16px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 14px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment