feat(docs): add pwa with auto update strategy #573

userquin · 2022-01-18T17:47:00Z

This PR includes:

fix a11y and SEO problems: there are anchors without rel="noopener noreferrer"
pwa with auto update strategy: to include prompt strategy we need to switch to @vue/theme or add a custom theme
png icons added to use them on the pwa manifest
netlify stuff to use correct cache and also adding some security entries on netlify.toml (also added: we need to review it)
added a few dev dependencies: localhost-https added to test pwa on local
added some scripts on root and on docs to allow build and serve the docs using https (localhost-https)
added scripts/build-pwa.ts module to rebuild the pwa once vitepress finish: also added esno to run the module => I run it using esno instead esmo because it never finish, I don't know what's happing with it

Pending tasks, will not be fixed here, see #580

netlify · 2022-01-18T17:47:07Z

✔️ Deploy Preview for vitest-dev ready!

🔨 Explore the source changes: f378a55

🔍 Inspect the deploy log: https://app.netlify.com/sites/vitest-dev/deploys/6213477dd96d6900082d91f9

😎 Browse the preview: https://deploy-preview-573--vitest-dev.netlify.app

userquin · 2022-01-18T17:55:49Z

Run pnpm i before starting preview docs locally, there are new dev dependencies.

To run locally just pnpm run docs:https from root , localhost-https will ask you to create and install a new ssl/tls certificate for localhost if necessary (it will be also reused in another projects using localhost-https, the ssl/tls certificate will be stored on your profile folder, just read the dep docs).

If you don't want to test the pwa, just run pnpm run docs:build && pnpm run docs:serve from root.

~~To test the pwa, try it on chrome canary, lighthouse is still broken on chromium based browsers.~~ It seems to be fixed on latest version, at leat on chrome.

I mean, to test pwa with lighthouse, the pwa works on any browser.

# Conflicts: # docs/package.json # pnpm-lock.yaml

antfu · 2022-01-20T21:05:21Z

docs/netlify.toml

+[[headers]]
+  for = "/manifest.webmanifest"
+  [headers.values]
+    Content-Type = "application/manifest+json"


We have a root-level one. Is this neccessary?

Upps, I don't see it, sorry, we can use the top one adding the webmanifest entry.

Should we use 301 instead 302 on new redirection?
/cc @patak-dev

I prefer 302

antfu · 2022-01-20T21:07:22Z

docs/scripts/assets.ts

+    <link rel="preconnect" crossorigin="anonymous" href="${jsdelivr}">
+    <link rel="preconnect" crossorigin="anonymous" href="${github}">
+    <link rel="preconnect" crossorigin="anonymous" href="${avatars}">
+`


Can we automate this? I am not so confident of duplicating (It would make future changes much harder)

We can include some module with the site data, including all stuff there: avatars, links, contributors, fonts...

I'll be back next Tuesday, we can merge and then change it, but proceed as you wish

# Conflicts: # pnpm-lock.yaml

# Conflicts: # docs/package.json # pnpm-lock.yaml

userquin · 2022-01-27T19:19:48Z

~~upps, I need to check offline support, it seems the avatars will not load.~~
It works, but we need to review a few thinks: since I use img loading="lazy" on all avatars and sponsors, on chromium browsers the images are not downloaded until you scroll down, and so, if we just await to install the sw and then go offline, pressing F5 will fail since the avatars are not yet stored since them are not requested.
I will check if we can force precaching them without prefetching.

patak-dev · 2022-01-27T20:10:15Z

Looks awesome @userquin!

The only detail I see is that avatar images are downscaled too much now and they are seen blurry on my monitor:

Compared to the current one:

Maybe we can use a bit higher resolution for them? Same for the team avatars, you can also see the diff with our sponsor images

antfu · 2022-01-27T22:24:51Z

scripts/update-contributors.ts

      'content-type': 'application/json',
    },
  })
  const data = await res.json() as Contributor[] || []
-  collaborators.push(...data.map(i => i.login))
+  collaborators.push(...data.map(({ login, avatar_url }) => {
+    // optimize the avatar size: check avatar and contributors components


The size doesn't matter much, let's keep the codebase simple

I don't think so, just compare these 2:

Your avatar using https://github.com/antfu.png

And your avatar using https://github.com/antfu.png?size=125 or https://avatars.githubusercontent.com/u/11247099?v=4&s=125:

Demivan · 2022-01-28T06:57:48Z

I don't know why it is failing, on my windows machine running nr ci the error is:

Looks like snapshot needs updating

userquin · 2022-01-28T22:01:33Z

I've disabled the PWA, it seems there is some problem with the sw and the images on home page: we only need to change pwaDisabled on docs/docs-data.ts to enable it again.

I've changed all avatars (core team members and contributors) and sponsors images to be loading="lazy" if the PWA is disabled, I need to check what's happenning.

With these latest changes, the docs will work as the current docs deployed on netlify with some performance added: lazy load images.

I think we can merge with the PWA disabled and then fix the images problem: we'll be able also to start adding the new vitepress theme.

To test the docs on the preview you will need to remove the service worker previously installed:

Navigate to https://deploy-preview-573--vitest-dev.netlify.app
Open dev tools (Option + ⌘ + J on macOS, Shift + CTRL + J on Windows/Linux)
Go to Application > Storage, you should check following checkboxes:
- Application: [x] Unregister service worker
- Storage: [x] Local and session storage
- Cache: [x] Cache storage and [x] Application cache
Click on Clear site data button
Go to Application > Service Workers and check the current service worker is missing or has the state deleted.
Hard refresh on https://deploy-preview-573--vitest-dev.netlify.app

userquin · 2022-01-28T23:32:35Z

reverting last commit, pnpm problem when updating, points to wrong scripts when using nvm

This reverts commit c4520eb.

userquin · 2022-01-29T13:13:02Z

Since the sponsors images can be changed I revert fixed size: there will be some jank.

userquin · 2022-01-29T20:08:01Z

PWA with injectManifest strategy: GoogleChrome/workbox#3023

EDIT: I need to change pwa plugin to include vite:json plugin when building the custom service worker via rollup.

# Conflicts: # docs/package.json # docs/src/components/Home.vue # pnpm-lock.yaml

userquin · 2022-02-18T15:57:27Z

The PWA is disabled until we fix the contributors avarts CORS problem: to enable PWA we only need to change pwaDisabled = false on docs/docs-data.ts module.

# Conflicts: # docs/src/components/FeaturesList.vue

patak-dev · 2022-02-20T12:55:20Z

Images are working well, I was seeing them blurry because the old SW was getting in the middle. I think we should merge this one

docs/src/contributors.ts

userquin added 4 commits January 18, 2022 12:59

chore: fix seo and a11y

d1ff669

deps: add esno and pwa plugin

7ec0be8

chore: configure netlify stuff

7a143b5

feat(docs): add pwa with auto update strategy

1d48d64

chore: update keywords

8dd90a5

userquin added 8 commits January 18, 2022 19:15

docs: fix typo

2452e6f

chore: update netlify deployment

6f188de

Merge branch 'main' into userquin/docs-add-pwa

f7c9316

# Conflicts: # docs/package.json # pnpm-lock.yaml

fix: add favicon.ico and fix pwa 512 icon

7366ba6

chore: add favicon.ico and move stuff to top

a78ae10

chore: add footer copyright + update some entries

b545baa

chore: add favicon.ico

4eab2eb

chore: update deps

4a90139

userquin mentioned this pull request Jan 19, 2022

docs(vitepress): pending tasks #580

Closed

5 tasks

userquin marked this pull request as ready for review January 19, 2022 10:12

chore: typo

f46c8df

antfu reviewed Jan 20, 2022

View reviewed changes

userquin added 7 commits January 26, 2022 17:51

Merge branch 'main' into userquin/docs-add-pwa

b6803d8

# Conflicts: # pnpm-lock.yaml

chore: update deps

96e8fef

chore: use root netlify.toml

2c38740

chore: collect docs data + png optimized

b1b78a0

Merge branch 'main' into userquin/docs-add-pwa

2a26e23

# Conflicts: # docs/package.json # pnpm-lock.yaml

chore: update deps

fa3a639

chore: cleanup

64eb1d8

userquin requested a review from antfu January 27, 2022 19:12

antfu reviewed Jan 27, 2022

View reviewed changes

chore: simplify logic + unify sponsors

8469880

This comment has been minimized.

Sign in to view

chore: disable PWA + make home images lazy

bb03f0f

chore: update h2 styles on home to have old h3 style

340fbe0

userquin requested a review from antfu January 28, 2022 23:07

chore: update deps

c4520eb

userquin added 2 commits January 29, 2022 00:32

Revert "chore: update deps"

3ac4380

This reverts commit c4520eb.

chore: revert sponsors images with fixed size

5808a7a

userquin added 4 commits January 29, 2022 21:18

Merge branch 'main' into userquin/docs-add-pwa

ee3ac0a

chore: add algolia

3e99a07

Merge branch 'main' into userquin/docs-add-pwa

94f6d4b

# Conflicts: # docs/package.json # docs/src/components/Home.vue # pnpm-lock.yaml

deps: updated deps after merge main

717cb12

userquin added 2 commits February 20, 2022 13:32

chore: restore original image behavior

a88213d

Merge branch 'main' into userquin/docs-add-pwa

507be6a

# Conflicts: # docs/src/components/FeaturesList.vue

patak-dev approved these changes Feb 20, 2022

View reviewed changes

userquin added 2 commits February 20, 2022 14:01

chore: add again image widths and lazy loading

bc83c89

chore: update minimal algolia styles for dark theme

18e8b23

Aslemammad reviewed Feb 20, 2022

View reviewed changes

docs/src/contributors.ts Outdated Show resolved Hide resolved

fix: change name (aslemammad)

f378a55

patak-dev merged commit f5189fd into main Feb 21, 2022

patak-dev deleted the userquin/docs-add-pwa branch February 21, 2022 08:16

chaii3 pushed a commit to chaii3/vitest that referenced this pull request May 13, 2022

feat(useFetch): set content type only if it is json (vitest-dev#573)

5fbe541

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(docs): add pwa with auto update strategy #573

feat(docs): add pwa with auto update strategy #573

userquin commented Jan 18, 2022 •

edited

netlify bot commented Jan 18, 2022 •

edited

userquin commented Jan 18, 2022 •

edited

antfu Jan 20, 2022

userquin Jan 20, 2022 •

edited

antfu Jan 21, 2022

antfu Jan 20, 2022

userquin Jan 20, 2022 •

edited

userquin commented Jan 27, 2022 •

edited

patak-dev commented Jan 27, 2022

antfu Jan 27, 2022

userquin Jan 28, 2022

userquin Jan 28, 2022

This comment has been minimized.

Demivan commented Jan 28, 2022

userquin commented Jan 28, 2022 •

edited

userquin commented Jan 28, 2022

userquin commented Jan 29, 2022 •

edited

userquin commented Jan 29, 2022 •

edited

userquin commented Feb 18, 2022

patak-dev commented Feb 20, 2022

feat(docs): add pwa with auto update strategy #573

feat(docs): add pwa with auto update strategy #573

Conversation

userquin commented Jan 18, 2022 • edited

netlify bot commented Jan 18, 2022 • edited

userquin commented Jan 18, 2022 • edited

antfu Jan 20, 2022

Choose a reason for hiding this comment

userquin Jan 20, 2022 • edited

Choose a reason for hiding this comment

antfu Jan 21, 2022

Choose a reason for hiding this comment

antfu Jan 20, 2022

Choose a reason for hiding this comment

userquin Jan 20, 2022 • edited

Choose a reason for hiding this comment

userquin commented Jan 27, 2022 • edited

patak-dev commented Jan 27, 2022

antfu Jan 27, 2022

Choose a reason for hiding this comment

userquin Jan 28, 2022

Choose a reason for hiding this comment

userquin Jan 28, 2022

Choose a reason for hiding this comment

This comment has been minimized.

Demivan commented Jan 28, 2022

userquin commented Jan 28, 2022 • edited

userquin commented Jan 28, 2022

userquin commented Jan 29, 2022 • edited

userquin commented Jan 29, 2022 • edited

userquin commented Feb 18, 2022

patak-dev commented Feb 20, 2022

userquin commented Jan 18, 2022 •

edited

netlify bot commented Jan 18, 2022 •

edited

userquin commented Jan 18, 2022 •

edited

userquin Jan 20, 2022 •

edited

userquin Jan 20, 2022 •

edited

userquin commented Jan 27, 2022 •

edited

userquin commented Jan 28, 2022 •

edited

userquin commented Jan 29, 2022 •

edited

userquin commented Jan 29, 2022 •

edited