Vite Ruby combined with vite-plugin-pwa

[sumitngupta]

Hello!

First off, love the library. It has been a breath of fresh air and revitalized our entire frontend dev process here at DoubleLoop. I'll be upfront that I'm pretty inexperienced when it comes to configuring complicated frontend frameworks so this was amazing in its simplicity.

I was looking into how to use service workers to cache the chunks / static assets for users and found the https://github.com/antfu/vite-plugin-pwa library. I was wondering if there is already a documented way to get the two libraries to work well together? I presume using the manifests.

Just wondering if my googling / searching was off target and the documentation already exists. Thanks again for the awesome work you do.

[ElMassimo]

Hi Sumit! @sumitngupta

to cache the chunks / static assets

You can usually configure headers in your CDN to ensure assets are cached forever:

/assets/*
  cache-control: max-age=31536000
  cache-control: immutable

If you are not using a CDN, you would still be able to configure the Cache-Control header in Rails.

Are you sure you need a service worker?

---

Regarding vite-plugin-pwa, it works by injecting the worker scripts in any HTML files that are processed by Vite.

When using Vite Ruby, there is typically no .html entrypoint, so you would need to do that manually.

It's likely that the default configuration is not suitable for a server-rendered app. You might want to consider using workbox directly instead.

[sumitngupta]

I'm feeling dumb on not checking my cache CDN settings. I think I saw the shiny of Service Workers and got really excited (there seems to be a lot to love about it)

Thank you for the details! If I do end up going down the Service Worker / PWA route I'll add some details here in case anyone comes a'lookin

[dombarnes]

I too am looking to add PWA support, mostly to provide an installable app. Having added the PWA plugin, I can see the manifest.webmanifest gets created and dumped in /public/vite so I'm then just adding <link rel="manifest" href="/vite/manifest.webmanifest"> to my erb template for production

What does seem to be missing is support for a local development tag, something to generate the link to, and serve the manifest.webmanifest file. If I manually go to https://localhost:3036/vite-dev/manifest.webmanifest I just get the default vite ruby page