feat: add pwa module by @userquin

[userquin]

Description 📖

Adds @island/pwa module via vite-plugin-pwa, also includes:

• include packageManager on root package.json to allow use corepack: check this https://github.com/antfu/contribute
• update Vite to 2.9.9: we should also check if we can update to 3.0.0-alpha-9, release coming soon
• changes on Vite logLevel handling: use the provided logLevel from the configuration, otherwise use warn (using Vite's default, info, is too verbose on îles)
• updated some modules handling old Vite plugins option, the signature changed from Plugin |... to Plugin | ... | Plugin[]
• included PWA with autoUpdate strategy on îles docs site: we should check if we can switch to prompt, should be done before deploying to netlify, switching from autoUpdate to prompt strategy can be a pain once deployed
  • included some security headers on _headers
  • use pwa-manifest.json instead manifest.webmanifest and so we don't need to add netlify.toml with the corresponding [[redirect]] to handle manifest.webmanifest: check for example this configuration file https://github.com/antfu/vite-plugin-pwa/blob/main/docs/netlify.toml#L14
  • added pwa png icons on public folder: generated from the logo svg and optimized
  • added some pwa entries on MetaTags component: also fixed theme-color, it is a meta tag with name not with property
  • added service worker registration logic on base layout component
  • added crossorigin: anonymous to https://unpkg.com/thesemetrics@latest script on app.ts module

There are a few pending things (there are some todo@userquin on the module):

• exclude dynamic routes from the service worker precache manifest
• configure some plugin pwa options before registering the plugin: the pwa configuration must be provided on the îles module, if provided as a Vite plugin, the module will throw an error
• finish docs on guide/plugins entry

Background 📜

Allow îles apps work offline and improve performance.

The Fix 🔨

Add the module and configure the package

Screenshots 📷

Small video with îles docs working offline: https://streamable.com/n4ogwu

Here Lighthouse result:

[nx-cloud[bot]]

Nx Cloud Report

CI is running for commit a56571a5691802655b1fade44a22c71061cdc296.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

---

Sent with 💌 from NxCloud.

[userquin]

on Windows I cannot execute the tests, we need to fix this

[ElMassimo]

@userquin What are the error messages when executing tests in Windows?

[userquin]

@ElMassimo

F:\work\projects\quini\GitHub\antfu\iles-pwa>pnpm run test

> root@ test F:\work\projects\quini\GitHub\antfu\iles-pwa
> packages/iles/bin/iles.js test

"packages" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.
 ELIFECYCLE  Test failed. See above for more details.       

Executing it via (adding node) "test": "node packages/iles/bin/iles.js test":

F:\work\projects\quini\GitHub\antfu\iles-pwa>pnpm run test

> root@ test F:\work\projects\quini\GitHub\antfu\iles-pwa
> node packages/iles/bin/iles.js test

node:events:368
      throw er; // Unhandled 'error' event
      ^

Error: spawn vitest ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn vitest',
  path: 'vitest',
  spawnargs: [
    '--config',
    'F:/work/projects/quini/GitHub/antfu/iles-pwa/packages/iles/config.js'
  ]
}
 ELIFECYCLE  Test failed. See above for more details.

It seems the cli.d.ts is empty...

[userquin]

why not just running it via iles test? I get the same error using node

[ElMassimo]

Gotcha, it's because the command hardcodes the path in a non-cross-platform way.

iles test was not available initially, but it might be a good way to do it now that the command exists.

[userquin]

Let's follow-up on any additional changes, I'm ok if you want to merge this first, and do the switch to prompt in the docs later on, just let me know.

If you merge this PR, beware not deploying docs, or maybe you can merge it on a new branch and so we can play with it here.

[userquin]

uhmm, I need add a hint on the docs, we need also add the module when using vite-plugin-pwa as a Vite plugin to make the app work offline.

[userquin]

Se me olvidaba Máximo, hay que revisar el tema de netlify, en teoría creo que las cabeceras están bien, pero habrá que probarlo, igual puedes habilitar un hook para hacer un preview aquí.