very basic offline page working
This commit is contained in:
parent
47c690526e
commit
56bcd4f887
File diff suppressed because one or more lines are too long
@ -14,21 +14,29 @@ self.addEventListener('install', async (event) => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// since the mode is inject manifest this needs to be present but because
|
||||||
|
// precacheAndRoute is cache first and i currently dont really know how to
|
||||||
|
// do versioning i will only pre cache the offline page and its required assets
|
||||||
|
self.__WB_MANIFEST
|
||||||
|
|
||||||
|
const OFFLINE_PAGE_REVISION = '1'
|
||||||
|
precacheAndRoute([
|
||||||
|
{url: '/offline/', revision: OFFLINE_PAGE_REVISION},
|
||||||
|
{url: '/static/vue/js/offline_view.js', revision: OFFLINE_PAGE_REVISION},
|
||||||
|
]);
|
||||||
|
|
||||||
// default handler if everything else fails
|
// default handler if everything else fails
|
||||||
setCatchHandler(({event}) => {
|
setCatchHandler(({event}) => {
|
||||||
switch (event.request.destination) {
|
switch (event.request.destination) {
|
||||||
case 'document':
|
case 'document':
|
||||||
console.log('Triggered fallback HTML')
|
console.log('Triggered fallback HTML')
|
||||||
return caches.match(OFFLINE_PAGE_URL);
|
return caches.match(OFFLINE_PAGE_URL);
|
||||||
|
|
||||||
default:
|
default:
|
||||||
console.log('Triggered response ERROR')
|
console.log('Triggered response ERROR')
|
||||||
return Response.error();
|
return Response.error();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
precacheAndRoute(self.__WB_MANIFEST);
|
|
||||||
|
|
||||||
registerRoute(
|
registerRoute(
|
||||||
({request}) => request.destination === 'image',
|
({request}) => request.destination === 'image',
|
||||||
new CacheFirst({
|
new CacheFirst({
|
||||||
@ -49,12 +57,31 @@ registerRoute(
|
|||||||
)
|
)
|
||||||
|
|
||||||
registerRoute(
|
registerRoute(
|
||||||
new RegExp('jsi18n/'),
|
new RegExp('jsreverse'),
|
||||||
new StaleWhileRevalidate({
|
new StaleWhileRevalidate({
|
||||||
cacheName: 'assets'
|
cacheName: 'assets'
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
||||||
|
registerRoute(
|
||||||
|
new RegExp('jsi18n'),
|
||||||
|
new StaleWhileRevalidate({
|
||||||
|
cacheName: 'assets'
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
registerRoute(
|
||||||
|
new RegExp('api/recipe/([0-9]+)'),
|
||||||
|
new NetworkFirst({
|
||||||
|
cacheName: 'api-recipe',
|
||||||
|
plugins: [
|
||||||
|
new ExpirationPlugin({
|
||||||
|
maxEntries: 50,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
registerRoute(
|
registerRoute(
|
||||||
new RegExp('api/*'),
|
new RegExp('api/*'),
|
||||||
new NetworkFirst({
|
new NetworkFirst({
|
||||||
@ -68,41 +95,15 @@ registerRoute(
|
|||||||
)
|
)
|
||||||
|
|
||||||
registerRoute(
|
registerRoute(
|
||||||
new RegExp('api/recipe/([0-9]+)'),
|
({request}) => request.destination === 'document',
|
||||||
new NetworkFirst({
|
new NetworkFirst({
|
||||||
cacheName: 'api-recipe',
|
cacheName: 'html',
|
||||||
plugins: [
|
plugins: [
|
||||||
new ExpirationPlugin({
|
new ExpirationPlugin({
|
||||||
|
maxAgeSeconds: 60 * 60 * 24 * 30,
|
||||||
maxEntries: 50,
|
maxEntries: 50,
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|
||||||
const matchHtml = ({url, request, event}) => {
|
|
||||||
if (request.destination === 'document') {
|
|
||||||
if (RegExp('view/recipe/*').test(url)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
if (RegExp('search/*').test(url)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
if (RegExp('plan/*').test(url)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
registerRoute(
|
|
||||||
matchHtml,
|
|
||||||
new NetworkFirst({
|
|
||||||
cacheName: 'html',
|
|
||||||
plugins: [
|
|
||||||
new ExpirationPlugin({
|
|
||||||
maxAgeSeconds: 60 * 60 * 24 * 30,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
|
@ -32,6 +32,12 @@ module.exports = {
|
|||||||
workboxOptions: {
|
workboxOptions: {
|
||||||
swSrc: './src/sw.js',
|
swSrc: './src/sw.js',
|
||||||
swDest: '../../templates/sw.js',
|
swDest: '../../templates/sw.js',
|
||||||
|
manifestTransforms: [
|
||||||
|
originalManifest => {
|
||||||
|
const result = originalManifest.map(entry => new Object({url: 'static/vue/' + entry.url}))
|
||||||
|
return {manifest: result, warnings: []};
|
||||||
|
}
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
chainWebpack: config => {
|
chainWebpack: config => {
|
||||||
@ -47,6 +53,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//TODO somehow remov them as they are also added to the manifest config of the service worker
|
||||||
/*
|
/*
|
||||||
Object.keys(pages).forEach(page => {
|
Object.keys(pages).forEach(page => {
|
||||||
config.plugins.delete(`html-${page}`);
|
config.plugins.delete(`html-${page}`);
|
||||||
|
Loading…
Reference in New Issue
Block a user