Skip to content

Instantly share code, notes, and snippets.

@Raywire

Raywire/package.json

Last active September 9, 2021 01:50
Show Gist options
  • Save Raywire/4b42cf0c9409419adf812b2c5ebc951c to your computer and use it in GitHub Desktop.
Save Raywire/4b42cf0c9409419adf812b2c5ebc951c to your computer and use it in GitHub Desktop.
Download ZIP
A service worker template for workbox
Raw
package.json
{
"scripts": {
"build": "vue-cli-service build && workbox injectManifest workbox-config.js",
},
"dependencies": {
},
"devDependencies": {
"workbox-cli": "^6.0.2"
}
}
Raw
service-worker.js
/* eslint-disable no-undef */
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js')
const { registerRoute, NavigationRoute } = workbox.routing
const { StaleWhileRevalidate, NetworkOnly, CacheFirst, NetworkFirst } = workbox.strategies
const { ExpirationPlugin } = workbox.expiration
const { precacheAndRoute, createHandlerBoundToURL, PrecacheFallbackPlugin } = workbox.precaching
const { CacheableResponsePlugin } = workbox.cacheableResponse
const { BackgroundSyncPlugin } = workbox.backgroundSync
const bgSyncPlugin = new BackgroundSyncPlugin('updateEventQueue', {
maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes)
})
workbox.googleAnalytics.initialize()
precacheAndRoute(self.__WB_MANIFEST)
// This assumes /index.html has been precached.
const handler = createHandlerBoundToURL('index.html')
const navigationRoute = new NavigationRoute(handler)
registerRoute(navigationRoute)
registerRoute(
({ request }) => request.mode === 'navigate',
new NetworkOnly({
plugins: [
new PrecacheFallbackPlugin({
fallbackURL: '/offline.html'
})
]
})
)
registerRoute(
new RegExp('https://jsonplaceholder.typicode.com/posts'),
new NetworkFirst({
cacheName: 'posts-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 7 * 24 * 60 * 60,
maxEntries: 20
}),
new CacheableResponsePlugin({
statuses: [0, 200]
})
]
})
)
registerRoute(
new RegExp('https://jsonplaceholder.typicode.com/comments'),
new NetworkFirst({
cacheName: 'comments-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 7 * 24 * 60 * 60,
maxEntries: 5
}),
new CacheableResponsePlugin({
statuses: [0, 200]
})
]
})
)
registerRoute(
new RegExp('https://jsonplaceholder.typicode.com/users'),
new StaleWhileRevalidate({
cacheName: 'users-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 7 * 24 * 60 * 60,
maxEntries: 5
}),
new CacheableResponsePlugin({
statuses: [0, 200]
})
]
})
)
registerRoute(
new RegExp('https://jsonplaceholder.typicode.com/photos'),
new CacheFirst({
cacheName: 'photos-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 7 * 24 * 60 * 60,
maxEntries: 50,
purgeOnQuotaError: true
}),
new CacheableResponsePlugin({
statuses: [0, 200]
})
]
})
)
registerRoute(
new RegExp('https://jsonplaceholder.typicode.com/todos'),
new NetworkOnly({
plugins: [bgSyncPlugin]
}),
'PUT'
)
Raw
workbox-config.js
module.exports = {
'globDirectory': 'dist/',
'globPatterns': [
'**/*.{css,ico,png,jpg,svg,html,js,json}'
],
'swDest': 'dist/service-worker.js',
'swSrc': 'service-worker.js'
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment