Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use webManifestUrl on injectDevManifest #300

Merged
merged 6 commits into from
Jun 7, 2022
Merged

feat: use webManifestUrl on injectDevManifest #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
707d6ad
feat: use `webManifestUrl` on `injectDevManifest`
userquin Jun 6, 2022
2ef6cd9
fix: include webmanifest on denylist + add its content type
userquin Jun 7, 2022
92c81c2
docs: include webmanifest entry on development
userquin Jun 7, 2022
26e4dd9
chore: add webmanifest to denylist on custom sw + fix sveltekit lates…
userquin Jun 7, 2022
72b25e3
chore: use old `esno` version
userquin Jun 7, 2022
3384da3
chore: wording
userquin Jun 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions docs/guide/development.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,21 @@ export interface DevOptions {
* **WARNING**: this option will only be used when using `injectManifest` strategy.
*/
navigateFallback?: string
/**
* On dev mode the `manifest.webmanifest` file can be on other path.
*
* For example, **SvelteKit** will request `/_app/manifest.webmanifest`.
*
* @default `${vite.base}${pwaOptions.manifestFilename}`
*/
webManifestUrl?: string
}
```

## manifest.webmanifest

Since version `0.12.1` the `manifest.webmanifest` is also served on development mode: you can now check it on `dev tools`.

## generateSW strategy

When using this strategy, the `navigateFallback` on development options will be ignored. The PWA plugin will check if
Expand Down Expand Up @@ -98,6 +110,19 @@ devOptions: {

> **Warning**: when building the application, the PWA Plugin will always register your service worker with `type: 'classic'` for compatibility with all browsers.

> **Warning**: if using version `0.12.1+`, you will need to exclude the `manifest.webmanifest` from the service worker precache manifest if you want to check it using the browser (on `dev tools` it will be ok):
> ```ts
> let denylist: undefined | RegExp[]
> if (import.meta.env.DEV)
> denylist = [/^\/manifest.webmanifest$/]
>
> // to allow work offline
> registerRoute(new NavigationRoute(
> createHandlerBoundToURL('index.html'),
> { denylist }
> ))
> ```

When using this strategy, the plugin will delegate the service worker compilation to `Vite`, so if you're using `import` statements
instead `importScripts` in your custom service worker, you should configure `type: 'module'` on development options.

Expand Down Expand Up @@ -138,3 +163,7 @@ To run the example, you must build the PWA plugin (`pnpm run build` from root fo
(`cd examples/vue-router`) and run it:
- `generateSW` strategy: `pnpm run dev`
- `injectManifest` strategy: `pnpm run dev-claims`

Since version `0.12.1`, you also have the development scripts for all other frameworks as well.

The instructions for running the `dev` or `dev-claims` scripts are the same as for `vue-router` but running them in the corresponding framework directory.
9 changes: 8 additions & 1 deletion examples/preact-router/src/claims-sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
// clean old assets
cleanupOutdatedCaches()

let denylist: undefined | RegExp[]
if (import.meta.env.DEV)
denylist = [/^\/manifest.webmanifest$/]

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
registerRoute(new NavigationRoute(
createHandlerBoundToURL('index.html'),
{ denylist },
))

self.skipWaiting()
clientsClaim()
9 changes: 8 additions & 1 deletion examples/react-router/src/claims-sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
// clean old assets
cleanupOutdatedCaches()

let denylist: undefined | RegExp[]
if (import.meta.env.DEV)
denylist = [/^\/manifest.webmanifest$/]

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
registerRoute(new NavigationRoute(
createHandlerBoundToURL('index.html'),
{ denylist },
))

self.skipWaiting()
clientsClaim()
9 changes: 8 additions & 1 deletion examples/solid-router/src/claims-sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
// clean old assets
cleanupOutdatedCaches()

let denylist: undefined | RegExp[]
if (import.meta.env.DEV)
denylist = [/^\/manifest.webmanifest$/]

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
registerRoute(new NavigationRoute(
createHandlerBoundToURL('index.html'),
{ denylist },
))

self.skipWaiting()
clientsClaim()
10 changes: 9 additions & 1 deletion examples/svelte-routify/src/claims-sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,16 @@ precacheAndRoute(self.__WB_MANIFEST)
// clean old assets
cleanupOutdatedCaches()


let denylist: undefined | RegExp[]
if (import.meta.env.DEV)
denylist = [/^\/manifest.webmanifest$/]

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
registerRoute(new NavigationRoute(
createHandlerBoundToURL('index.html'),
{ denylist },
))

self.skipWaiting()
clientsClaim()
4 changes: 2 additions & 2 deletions examples/sveltekit-pwa/src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="theme-color" content="#ffffff">
%svelte.head%
%sveltekit.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
<div id="svelte">%sveltekit.body%</div>
</body>
</html>
10 changes: 9 additions & 1 deletion examples/sveltekit-pwa/src/claims-sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,16 @@ precacheAndRoute(self.__WB_MANIFEST)
// clean old assets
cleanupOutdatedCaches()


let denylist: undefined | RegExp[]
if (import.meta.env.DEV)
denylist = [/^\/_app\/manifest.webmanifest$/]

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('/')))
registerRoute(new NavigationRoute(
createHandlerBoundToURL('/'),
{ denylist },
))

self.skipWaiting()
clientsClaim()
9 changes: 8 additions & 1 deletion examples/vue-router/src/claims-sw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ precacheAndRoute(self.__WB_MANIFEST)
// clean old assets
cleanupOutdatedCaches()

let denylist: undefined | RegExp[]
if (import.meta.env.DEV)
denylist = [/^\/manifest.webmanifest$/]

// to allow work offline
registerRoute(new NavigationRoute(createHandlerBoundToURL('index.html')))
registerRoute(new NavigationRoute(
createHandlerBoundToURL('index.html'),
{ denylist },
))

self.skipWaiting()
clientsClaim()
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
"@types/workbox-build": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"eslint": "^8.17.0",
"esno": "^0.16.3",
"esno": "^0.14.1",
"kolorist": "^1.5.1",
"pnpm": "^7.1.8",
"preact": "^10.7.3",
Expand Down
74 changes: 29 additions & 45 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions src/dev.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,16 @@ export async function loadDev(id: string, options: ResolvedVitePWAOptions, viteC
// the sw precache (self.__SW_MANIFEST) will be empty since we're using `dev-dist` folder
// we only need to add the navigateFallback if configured
const navigateFallback = options.workbox.navigateFallback
// we need to exclude the manifest.webmanifest from the sw precache: avoid writing it to the dev-dist folder
const webManifestUrl = options.devOptions.webManifestUrl ?? `${options.base}${options.manifestFilename}`
const { filePaths } = await generateServiceWorker(
Object.assign(
{},
options,
{
workbox: {
...options.workbox,
navigateFallbackDenylist: [new RegExp(`^${webManifestUrl}$`)],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to escape regex here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, using the constructor will replace with the escaped literal: /manifest.webmanifest => ^\/manifest.webmanifest$.

I check it.

Copy link
Member Author

@userquin userquin Jun 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait, I can double check...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is ok:

imagen

runtimeCaching: options.devOptions.disableRuntimeConfig ? undefined : options.workbox.runtimeCaching,
// we only include navigateFallback
additionalManifestEntries: navigateFallback ? [navigateFallback] : undefined,
Expand Down
3 changes: 2 additions & 1 deletion src/html.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export function injectServiceWorker(html: string, options: ResolvedVitePWAOption

export function injectDevManifest(html: string, options: ResolvedVitePWAOptions) {
const crossorigin = options.useCredentials ? ' crossorigin="use-credentials"' : ''
const manifest = options.manifest ? `<link rel="manifest" href="${options.base}${options.manifestFilename}"${crossorigin}>` : ''
const name = options.devOptions.webManifestUrl ?? `${options.base}${options.manifestFilename}`
const manifest = options.manifest ? `<link rel="manifest" href="${name}"${crossorigin}>` : ''

return html.replace(
'</head>',
Expand Down
4 changes: 2 additions & 2 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,9 @@ export function VitePWA(userOptions: Partial<VitePWAOptions> = {}): Plugin[] {
if (!options.disable && options.manifest && options.devOptions.enabled) {
const name = options.devOptions.webManifestUrl ?? `${options.base}${options.manifestFilename}`
server.middlewares.use((req, res, next) => {
const url = req.url
if (url === name) {
if (req.url === name) {
res.statusCode = 200
res.setHeader('Content-Type', 'application/manifest+json')
res.write(generateWebManifestFile(options), 'utf-8')
res.end()
}
Expand Down