Skip to content

Instantly share code, notes, and snippets.

@plinionaves
Forked from jeffposnick/service-worker.js
Created September 22, 2020 14:41
Show Gist options
  • Save plinionaves/9dc1f89d75e5f1331f0e9d67599b9f07 to your computer and use it in GitHub Desktop.
Save plinionaves/9dc1f89d75e5f1331f0e9d67599b9f07 to your computer and use it in GitHub Desktop.
Example of InjectManifest in Workbox v5
// Add any other logic here as needed.
import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';
import { CacheFirst } from 'workbox-strategies/CacheFirst';
import { createHandlerForURL } from 'workbox-precaching/createHandlerForURL';
import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
import { NavigationRoute } from 'workbox-routing/NavigationRoute';
import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
import { registerRoute } from 'workbox-routing/registerRoute';
precacheAndRoute(self.__WB_MANIFEST);
registerRoute(
new NavigationRoute(createHandlerForURL('react/dist/index.html'), {
blacklist: [/\/activate\b/]
})
);
registerRoute(
/^https:\/\/mylibrary\.io\/graphql\?.+cache%22:1/,
new CacheFirst({
cacheName: 'short-cache',
matchOptions: {
ignoreVary: true
},
plugins: [
new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 300,
purgeOnQuotaError: true,
}),
new CacheableResponsePlugin({
statuses: [0, 200]
}),
]
}));
registerRoute(
/^https:\/\/mylibrary\.io\/graphql\?.+cache%22:5/,
new CacheFirst({
cacheName: 'medium-cache',
matchOptions: {
ignoreVary: true,
},
plugins: [
new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 86400,
purgeOnQuotaError: true,
}),
new CacheableResponsePlugin({
statuses: [0, 200]
}),
],
})
);
registerRoute(
/^https:\/\/mylibrary\.io\/graphql\?.+cache%22:9/,
new CacheFirst({
cacheName: 'max-cache',
matchOptions: {
ignoreVary: true,
},
plugins: [
new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 63072e3,
purgeOnQuotaError: true,
}),
new CacheableResponsePlugin({
statuses: [0, 200]
})]
})
);
registerRoute(/^https:\/\/s3.amazonaws.com\/my-library-cover-uploads/, new CacheFirst({
cacheName: 'local-images1',
matchOptions: {
ignoreVary: true,
},
plugins: [new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 63072e3,
purgeOnQuotaError: true,
}), new CacheableResponsePlugin({
statuses: [0, 200]
})]
}));
registerRoute(/^https:\/\/my-library-cover-uploads.s3.amazonaws.com/, new CacheFirst({
cacheName: 'local-images2',
matchOptions: {
ignoreVary: true,
},
plugins: [new ExpirationPlugin({
maxEntries: 500,
maxAgeSeconds: 63072e3,
purgeOnQuotaError: true,
}), new CacheableResponsePlugin({
statuses: [0, 200]
})]
}));
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
const path = require('path');
const {InjectManifest} = require('workbox-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js'
},
plugins: [
new InjectManifest({
swSrc: './service-worker.js',
swDest: 'service-worker.js',
// Any other config if needed.
}),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment