Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Offline caching: Try To fetch latest data first then shift to cached one. #1819

Merged
merged 3 commits into from
Feb 27, 2021
Merged

Offline caching: Try To fetch latest data first then shift to cached one. #1819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c5c2cf
fetch latest data first then shift to cached one
vivek-30 Feb 20, 2021
4d389cc
improved offline experience
vivek-30 Feb 25, 2021
6e65ff9
Merge branch 'main' into service-worker
jywarren Feb 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 29 additions & 27 deletions examples/lib/cache.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
const { reject } = require("lodash");

var setupCache = function() {
let newWorker; // When sw.js is changed, this is the new service worker generated.

Expand All @@ -21,34 +19,38 @@ var setupCache = function() {
// Register the service worker.
navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
.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 reject(new Error('error in installing service worker'));
}
return new Promise(function(resolve,reject){

registration.addEventListener('updatefound', () => {
// When sw.js has been changed, get a reference to the new service worker.
newWorker = registration.installing;

if(!newWorker){
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;
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'));
}
case 'redundant':
return reject(new Error('installing new service worker now became redundant'));
}
})
})
})
}).catch(err => {
Expand Down
34 changes: 34 additions & 0 deletions examples/offline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 30 additions & 10 deletions examples/sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
const staticCacheName = 'image-sequencer-static-v3.6.0';
self.addEventListener('install', event => {
console.log('Attempting to install service worker');
self.addEventListener('install', function(e) {
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) {
Expand All @@ -21,16 +29,28 @@ self.addEventListener('activate', function(e) {

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(staticCacheName).then(function(cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function(response) {
if(event.request.method == 'GET')
cache.put(event.request, response.clone());
return response;
// Try to fetch the latest data first.
fetch(event.request)
.then(function(response) {
return caches.open(staticCacheName)
.then(function(cache) {
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.
Expand Down