PWA: Pre-cache application assets

[meganindya]

The following asset files are generated during the build but aren't picked up by the PWA plugin due to certain rules mentioned in https://vite-pwa-org.netlify.app/guide/static-assets.html.

We need to find a way to insert these into the precacheAndRoute list in sw.js so they can be cached for PWA/offline.

build-53e87ed8.svg
close-444dc9a6.svg
code-74870b2e.svg
exportDrawing-aee43b5d.svg
help-a0383ce2.svg
logo-3080f493.png
mouse-46cf41ce.svg
pin-8515e01d.svg
reset-a8de2102.svg
run-123f2282.svg
saveProjectHTML-e442bff6.svg
startRecording-5dec9e0d.svg
stop-aa193098.svg
stopRecording-48f9a011.svg
unpin-427cfcc6.svg

[ABHINAV-JHA-27]

Hey @meganindya, I am unable to locate sw.js file in the codebase.
can you tell me where to look ?

[Karan-Palan]

We can first customise the Vite PWA config like this

// vite.config.js

import VitePWA from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      includeAssets: [
        'build-53e87ed8.svg',
        'close-444dc9a6.svg',
        'code-74870b2e.svg',
        'exportDrawing-aee43b5d.svg',
        'help-a0383ce2.svg',
        'logo-3080f493.png',
        'mouse-46cf41ce.svg',
        'pin-8515e01d.svg',
        'reset-a8de2102.svg',
        'run-123f2282.svg',
        'saveProjectHTML-e442bff6.svg',
        'startRecording-5dec9e0d.svg',
        'stop-aa193098.svg',
        'stopRecording-48f9a011.svg',
        'unpin-427cfcc6.svg',
      ],
    }),
  ],
};

We can the adjust the service worker.

Does this approach seem appropriate @walterbender @meganindya

[dipaksinha1]

Hi ,I encountered an issue where certain asset files generated during the build are not picked up by the PWA plugin. The provided precaching logic in the Vite configuration doesn't seem to include these assets.

Could you please review and provide feedback on Pull Request #380?

[Optimus-cloud]

Hi, I’d like to work on this issue 🚀

I have experience with HTML, CSS, and JavaScript, and I’m learning about service workers to implement caching strategies.

Could you please guide me with:

1. Any specific steps for implementation?
2. Relevant references or examples I should follow?

Thank you! 😊