service-worker


How to create Service Work to store dynamic content in Progressive WEB APP?


I develop an progressive web app with static content, its working fine but when we fetch data dynamically (from MS SQL database), its not working. Please guide me how can i resolve this issue, or any change required in Service Worker for dynamic Data.
Thanks
var version = "1.0::";
var offlineResources = [
"/",
"style.css",
"image/logo.png",
"image/logo.jpg"
];
self.addEventListener("install", function(event) {
event.waitUntil(
caches
.open(version + "static")
.then(function(cache) {
cache.addAll(offlineResources);
})
);
});
self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(keys) {
return Promise.all(keys
.filter(function (key) {
return key.indexOf(version) !== 0;
})
.map(function (key) {
return caches.delete(key);
})
);
})
);
});
function isOfflineOrigin(origin) {
return origin === location.origin || origin.indexOf("netlify") !== -1;
}
self.addEventListener("fetch", function(event) {
var request = event.request;
var url = new URL(request.url);
// Only worry about GET requests and certain domains
if (request.method !== "GET" || !isOfflineOrigin(url.origin)) {
return;
}
// For HTML try the network first, fall back to the cache, and then
// finally the offline page
if (request.headers.get("Accept").indexOf("text/html") !== -1) {
event.respondWith(
fetch(request)
.then(function(response) {
var copy = response.clone();
caches.open(version + "pages")
.then(function(cache) {
cache.put(request, copy);
});
return response;
})
.catch(function() {
return caches.match(request)
.then(function(response) {
return response || caches.match("/offline/");
});
})
);
return;
}
// For non-HTML requests look in the cache first, and fall back to
// the network
event.respondWith(
caches.match(request)
.then(function(response) {
return response || fetch(request);
})
);
});
I can figure out that you are only caching static resources. What about the dynamic content like the responses from a remote API or service?
You have to implement runtime caching for all your dynamic needs.
sw-toolbox comes handy which gives flexibility to implement request handlers that handle runtime caching for remote or dynamic resources.

Related Links

Cache busting through sw-precache on already versioned bundle files
How to create Service Work to store dynamic content in Progressive WEB APP?
Offline page is not showing in fetch function when using service worker?
Running Service workers continuosly in background?
Service Worker, double caching?
ServiceWorkerRegistration.active not being set first time (Chrome)
Pre cache folder and subfolder content
Push web api, notificationclick, how to open desktop client instead opening a new browser client
keys property doesn't exist on my PushRegistration object
Web push notifications not showing since Chrome switched to OSX notifications
Can I have multiple service workers both intercept the same fetch request?
Ensure service worker is updated when hosted on a CDN?
When is my service worker updated?
difference between fetching page and file in serviceworker
How to allow serviceworkers for http in chrome
Read cookies from within a Service Worker?

Categories

HOME
asp.net-web-api
twitter-bootstrap-3
apache-jena
amp-html
pda
static
apiblueprint
solver
rendering
static-site
spring-data-mongodb
cublas
tail
pyqt4
missing-data
mvc5
banner
nfs
google-schemas
github-enterprise
php-5.6
comsol
android-intent
package.json
vuejs
easyphp
apache2.4
replication
flask-sqlalchemy
google-api-client
android-sharedpreferences
flooding
has-and-belongs-to-many
fractions
alm
mockjax
getlasterror
protege4
swagger-php
hivemq
playframework-2.1
reactivekit
cin
plaintext
knime
drupal-theming
apache-directory
magento-2.0.7
sonarlint-eclipse
reportservice2010
insight
google-cse
janus
offline.js
mathcad
rxtx
reachability
taocp
stripe-connect
burrows-wheeler-transform
beamer
mapinfo
android-dateutils
pre-build-event
cassia
realsense
rpart
batik
jquery-forms-plugin
appserver
paw
unix-socket
gnumeric
dsym
twitter-bootstrap-rails
bin
c++builder-xe5
node-blade
css-reset
stacky
http-status-code-410
apache-whirr
database-create
jsr286
xcelsius
update-statement
inline-formset
timertask
load-time
message-passing
folding
tabpanel
pos-for-.net
qtabbar
purepdf
contentpresenter
mathematical-typesetting
pnrp

Resources

Encrypt Message