Skip to content

Instantly share code, notes, and snippets.

@Raywire

Raywire/package.json

Last active September 9, 2021 01:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Raywire/4b42cf0c9409419adf812b2c5ebc951c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Raywire/4b42cf0c9409419adf812b2c5ebc951c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Raywire revised this gist Sep 9, 2021. 2 changed files with 19 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    {
    "scripts": {
    "build": "vue-cli-service build && workbox injectManifest workbox-config.js",
    },
    "dependencies": {

    },
    "devDependencies": {
    "workbox-cli": "^6.0.2"
    }
    }
    8 changes: 8 additions & 0 deletions workbox-config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    module.exports = {
    'globDirectory': 'dist/',
    'globPatterns': [
    '**/*.{css,ico,png,jpg,svg,html,js,json}'
    ],
    'swDest': 'dist/service-worker.js',
    'swSrc': 'service-worker.js'
    }
  2. Raywire created this gist Sep 9, 2021.
    106 changes: 106 additions & 0 deletions service-worker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    /* 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'
    )