feat: use `ManifestTransform` when using `@islands/pwa`

[userquin]

Description 📖

This PR uses workbox ManifestTransform when pwa is configured via @islands/pwa plugin/module: this way we can control the sw precache manifest, adding or removing entries.

Also includes the configuration based on prettyUrls on workbox.navigateFallback entry: will use the Vite base or / when not configured.

If the pwa plugin is configured via Vite instead using @islands/pwa plugin/module, using prettyUrls: false will produce an error on runtime when registering the sw, since it will have the html entries twice in the sw precache manifest: you have a comment about not adding the addRoutes entries on line 195 (the comment is about prettyUrls: true, since we'll end with the html file and also the route name, but registering the sw will work).

TODO:

• the iles.config.ts docs file has a comment about excluding the html entries, we can remove it before merging this PR (the html entries on the globPatterns added, the new logic will remove all html entries and recalculate the revision for all routes provided in the SSG callback).
• remove the console.log on the pwa module, I added a few logging and so you can check the result.

Background 📜

This was happening because I talk about it with ElMassimo ;)

The Fix 🔨

By changing the Vite PWA Plugin options to include the workbox ManifestTransform to regenerate the manifest entries after SSG build.

Screenshots 📷

Nopes

[nx-cloud[bot]]

☁️ Nx Cloud Report

We didn't find any information for the current pull request with the commit 218a86815e38b02402afa7035953b6ff62a81f03. You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[userquin]

We need to talk about dynamic pages, should be excluded from the sw precache manifest: a lot of work to be done on server side and also including a custom sw (read https://github.com/antfu/vitesse/discussions/169 and a simple implementation here https://github.com/antfu/vitesse/issues/252#issuecomment-1046085093).

[userquin]

@ElMassimo we can wait, we're releasing a few things on pwa repo, I'll update this PR when pwa 0.12.2 released (2/3 hours)

[ElMassimo]

Great, thanks Joaquin!

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	218a868
Status:	✅  Deploy successful!
Preview URL:	https://9b00d3fc.iles.pages.dev
Branch Preview URL:	https://userquin-feat-pwa-use-pretty.iles.pages.dev

View logs

[userquin]

@ElMassimo updated, I have another PR to add ESM support and fix some dev bug and: I think we should remove the support here adding the pwa plugin via vite.plugins entry

[ElMassimo]

Looks great! Throwing an error if the user provides the plugin in vite.plugins sounds good 👍

[userquin]

we have to clean up some internal types of the plugin that are not needed anymore

[userquin]

doing some cleanup