Skip to content

Instantly share code, notes, and snippets.

@madindo
Created Mar 12, 2020
Embed
What would you like to do?
PWA
<link rel='manifest' href='/manifest.json'>
<script>
// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] active service worker found, no need to register");
} else {
// Register the service worker
navigator.serviceWorker
.register("pwabuilder-sw.js", {
scope: "./"
})
.then(function (reg) {
console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
});
}
}
</script>
{
"name": "Domain Name",
"short_name": "domain_name",
"icons": [
{
"src": "https://www.domain.com/android-chrome-192x192.png",
"sizes": "192x192"
},
{
"src": "https://www.domain.com/android-chrome-256x256.png",
"sizes": "256x256"
},
{
"src": "https://www.domain.comandroid-chrome-512x512.png",
"sizes": "512x512"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "https://www.domain.com",
"url": "https://www.domain.com",
"lang": "",
"screenshots": [],
"orientation": "portrait",
"generated": "undefined"
}
<center><h3>Offline</h3></center>
// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("active service worker found, no need to register");
} else {
// Register the service worker
navigator.serviceWorker
.register("pwabuilder-sw.js", {
scope: "./"
})
.then(function (reg) {
console.log("Service worker has been registered for scope: " + reg.scope);
});
}
}
// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
const CACHE = "offline-page";
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "offline.html";
// Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener("install", function (event) {
console.log("Install Event processing");
event.waitUntil(
caches.open(CACHE).then(function (cache) {
console.log("Cached offline page during install");
return cache.add(offlineFallbackPage);
})
);
});
// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
event.respondWith(
fetch(event.request)
.then(function (response) {
console.log("add page to offline cache: " + response.url);
// If request was success, add or update it in the cache
event.waitUntil(updateCache(event.request, response.clone()));
return response;
})
.catch(function (error) {
console.log("Network request Failed. Serving content from cache: " + error);
return fromCache(event.request);
})
);
});
function fromCache(request) {
// Check to see if you have it in the cache
// Return response
// If not in the cache, then return the offline page
return caches.open(CACHE).then(function (cache) {
return cache.match(request).then(function (matching) {
if (!matching || matching.status === 404) {
// The following validates that the request was for a navigation to a new document
if (request.destination !== "document" || request.mode !== "navigate") {
return Promise.reject("no-match");
}
return cache.match(offlineFallbackPage);
}
return matching;
});
});
}
function updateCache(request, response) {
return caches.open(CACHE).then(function (cache) {
return cache.put(request, response);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment