eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Try To fetch latest data first then shift to cached one. (#1819)

Browse Source 
* fetch latest data first then shift to cached one

* improved offline experience

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
This commit is contained in:
Vivek Singh
2021-02-27 22:08:45 +05:30
committed by GitHub
parent 0580218c63
commit 71bf8c872b
3 changed files with 93 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
examples/lib/cache.js
View File

@@ -1,5 +1,3 @@
const { reject } = require("lodash");
var setupCache = function() { var setupCache = function() {
let newWorker; // When sw.js is changed, this is the new service worker generated. let newWorker; // When sw.js is changed, this is the new service worker generated.
@@ -21,34 +19,38 @@ var setupCache = function() {
// Register the service worker. // Register the service worker.
navigator.serviceWorker.register('sw.js', { scope: '/examples/' }) navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
.then(function(registration) { .then(function(registration) {
registration.addEventListener('updatefound', () => {
// When sw.js has been changed, get a reference to the new service worker.
newWorker = registration.installing;
if(!newWorker){ return new Promise(function(resolve,reject){
return reject(new Error('error in installing service worker'));
}
newWorker.addEventListener('statechange', () => { registration.addEventListener('updatefound', () => {
// Check if service worker state has changed. // When sw.js has been changed, get a reference to the new service worker.
switch(newWorker.state) { newWorker = registration.installing;
case 'installed':
if(navigator.serviceWorker.controller) {
// New service worker available; prompt the user to update.
showUpdateModal();
$('#reload').on('click',(e) => {
e.preventDefault();
console.log('New Service Worker Installed Successfully');
location.reload();
return resolve();
})
}
// No updates available; do nothing.
break;
case 'redundant': if(!newWorker){
return reject(new Error('installing new service worker now became redundant')); return reject(new Error('error in installing service worker'));
} }
newWorker.addEventListener('statechange', () => {
// Check if service worker state has changed.
switch(newWorker.state) {
case 'installed':
if(navigator.serviceWorker.controller) {
// New service worker available; prompt the user to update.
showUpdateModal();
$('#reload').on('click',(e) => {
e.preventDefault();
console.log('New Service Worker Installed Successfully');
location.reload();
return resolve();
})
}
// No updates available; do nothing.
break;
case 'redundant':
return reject(new Error('installing new service worker now became redundant'));
}
})
}) })
}) })
}).catch(err => { }).catch(err => {

34
examples/offline.html Normal file
View File

@@ -0,0 +1,34 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error 502 | Bad Gateway</title>
<style>
body{
background-color:#d3d3d3;
}
p {
font-size:20px;
}
main {
display: flex;
flex-direction:column;
text-align: center;
justify-content: center;
}
a {
text-decoration: none;
color:blue;
}
</style>
</head>
<body>
<main>
<p>Error 502: something went wrong.</p>
<p>It seems that you are not connected to internet.<br>Please try after some time.</p>
<a href="/">Go To Home Page</a>
</main>
</body>
</html>

40
examples/sw.js
View File

@@ -1,6 +1,14 @@
const staticCacheName = 'image-sequencer-static-v3.6.0'; const staticCacheName = 'image-sequencer-static-v3.6.0';
self.addEventListener('install', event => { self.addEventListener('install', function(e) {
console.log('Attempting to install service worker'); e.waitUntil(
caches.open(staticCacheName).then(function(cache) {
console.log('Attempting to install service worker');
return cache.addAll([
'/',
'/examples/offline.html'
]);
})
);
}); });
self.addEventListener('activate', function(e) { self.addEventListener('activate', function(e) {
@@ -21,16 +29,28 @@ self.addEventListener('activate', function(e) {
self.addEventListener('fetch', function(event) { self.addEventListener('fetch', function(event) {
event.respondWith( event.respondWith(
caches.open(staticCacheName).then(function(cache) { // Try to fetch the latest data first.
return cache.match(event.request).then(function (response) { fetch(event.request)
return response || fetch(event.request).then(function(response) { .then(function(response) {
if(event.request.method == 'GET') return caches.open(staticCacheName)
cache.put(event.request, response.clone()); .then(function(cache) {
return response; if(event.request.method == 'GET'){
cache.put(event.request.url, response.clone());
}
return response;
})
})
.catch(function(err) {
// Now the request has been failed so show cached data.
return caches.match(event.request).then(function(res){
if (res === undefined) {
// Display offline page
return caches.match('offline.html');
}
return res;
}); });
});
}) })
); )
}); });
// When the update modal sends a 'skipWaiting' message, call the skipWaiting method. // When the update modal sends a 'skipWaiting' message, call the skipWaiting method.