Mistletoe Offline

Get your server in order

Make an offline page

Pre-cache your offline page

addEventListener('install', installEvent => {
// put your instructions here.
}); // end addEventListener
addEventListener('install', installEvent => {
installEvent.waitUntil(
caches.open('Johnny')
.then( JohnnyCache => {
JohnnyCache.addAll([
'/offline.html'
]); // end addAll
}) // end open.then
); // end waitUntil
}); // end addEventListener
addEventListener('install', installEvent => {
installEvent.waitUntil(
caches.open('Johnny')
.then( JohnnyCache => {
JohnnyCache.addAll([
'/offline.html',
'/path/to/stylesheet.css',
'/path/to/javascript.js',
'/path/to/image.jpg'
]); // end addAll
}) // end open.then
); // end waitUntil
}); // end addEventListener

Intercept requests

addEventListener('fetch', fetchEvent => {
// What happens next is up to you!
}); // end addEventListener
  • Whenever a file is requested,
  • First, try to fetch it from the network,
  • But if that doesn’t work, try to find it in the cache,
  • But if that doesn’t work, and it’s a request for a web page, show the custom offline page instead.
// Whenever a file is requested
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
fetchEvent.respondWith(
// First, try to fetch it from the network
fetch(request)
.then( responseFromFetch => {
return responseFromFetch;
}) // end fetch.then
// But if that doesn't work
.catch( fetchError => {
// try to find it in the cache
caches.match(request)
.then( responseFromCache => {
if (responseFromCache) {
return responseFromCache;
// But if that doesn't work
} else {
// and it's a request for a web page
if (request.headers.get('Accept').includes('text/html')) {
// show the custom offline page instead
return caches.match('/offline.html');
} // end if
} // end if/else
}) // end match.then
}) // end fetch.catch
); // end respondWith
}); // end addEventListener

Hook up your service worker script

if (navigator.serviceWorker) {
navigator.serviceWorker.register('/serviceworker.js');
}

Go further!

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Height and Depth of a Binary Tree

ESP32 Project #5: Display (Hello World ?!)

MSTATION X BINSTARTER PARTNERSHIP

FinOps Principles: Control

MAY’S come and Gone let’s read this through to see how MetaRising moved a step higher 📈📈

How can you choose the best mobile app development platform?

Date: March 15th 2020

Reduce Cost and Increase Productivity with Value Added IT Services from buzinessware — {link} -

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

What I like about developing for SmartTV

Instant boot-up for large Storybooks

My First Experience with Anime.js

//Here for each span we will define translate property with 1 second duration btn .add({ targets: ‘span:nth-child(1)’, translateX: ‘110%’, width: ‘100%’, duration: 1000, }) .add({ targets: ‘span:nth-child(2)’, translateY: ‘110%’, height: ‘100%’, duration: 1000 }) .add({ targets: ‘span:nth-child(3)’, translateX: ‘-110%’, width: ‘100%’, duration: 1000 }) .add({ targets:’span:nth-child(4)’, translateY: ‘110%’, height: ‘-110%’, d

Ionic Q1 2022 Update Recap

Ionic Q1 2022 Update Splash Screen