0

I have this Vue application that I wish to cache all files using service workers but every time I build the application to deploy and test, the filename for the js files created by vue are different:

enter image description here

is there a way to automatically add all this to a caching list (toCache)

sw.js

console.info('Service worker is running')

const toCache = [
    'images/favicon.ico',
    'manifest.json',
    'images/icons/icon-128x128.png',
    'images/icons/icon-144x144.png',
    'images/icons/icon-152x152.png',
    'images/icons/icon-192x192.png',
    'images/icons/icon-512x512.png',
    'images/icons/icon-72x72.png',
    'images/icons/icon-96x96.png',
    'sw.js',
    'reg_sw.js'
]

const assetCache = "asset";
const contentCache = "content";

self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open(assetCache).then(function (cache) {
            return cache.addAll(toCache);
        })
    );
});

self.addEventListener('fetch', event => {
    const req = event.request
    if (toCache.find(v => req.url.endsWith(v))) {
        event.respondWith(
            caches.open(assetCache)
                .then(cache => cache.match(req))
        )
        return
    }

    event.respondWith(
        fetch(req)
            .then(resp => {
                const copy = resp.clone()
                event.waitUntil(
                    caches.open(assetCache)
                        .then(cache => cache.put(req, copy))
                )
                return resp
            })
            .catch(err => {
                if (req.headers.get('Accept').includes('text/html')) {
                    return caches.open(assetCache)
                        .then(cache => cache.match(req))
                        .then(resp => {
                            if (!!resp)
                                return resp
                            return caches.open(assetCache)
                                .then(cache => cache.match(req))
                        })
                }
                return caches.match(req)
                
            }) 
    ) 
})

reg_sw.js

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js')
        .then(reg => {
            console.info('Service worker reg ', reg)
        })
        .catch(err => {
            console.error('Fail to register service worker ', err)
        })

} else {
    console.info('Service worker is not supported')
}

Thank you very much!

Jerome Palayoor
  • 31
  • 1
  • 1
  • 9
  • From the question is unclear what's your service worker and how it can be changed it to do it the way you want. Please, provide https://stackoverflow.com/help/mcve in question body, it has to be understandable when external links becomes unavailable – Estus Flask Apr 24 '23 at 08:18
  • i added my service worker code, thanks for the feedback! is there anything else you need? im using vue.js 3 also – Jerome Palayoor Apr 24 '23 at 15:38
  • It's very specific to how you build your app, which is unknown. The list of files is known at the time of build, so service worker needs to be integrated with your build tool somehow. There are precache plugins for vite, etc. Notice that this https://stackoverflow.com/questions/46208326/for-serviceworker-cache-addall-how-do-the-urls-work similar question mentions Workbox, that's what you'll probably end up using, directly or via a plugin – Estus Flask Apr 24 '23 at 18:04

0 Answers0