feat: SvelteKit Vite Plugin support
#327
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for vite-plugin-pwa ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Closed
benmccann
reviewed
Jul 8, 2022
benmccann
reviewed
Jul 8, 2022
benmccann
reviewed
Jul 8, 2022
benmccann
reviewed
Jul 8, 2022
benmccann
reviewed
Jul 8, 2022
benmccann
reviewed
Jul 12, 2022
antfu
reviewed
Jul 13, 2022
src/modules.ts
Outdated
| // Uses require to lazy load. | ||
| // "workbox-build" is very large and it makes config loading slow. | ||
| // Since it is not always used, load this when it is needed. | ||
|
|
||
| return require('workbox-build') | ||
| try { | ||
| return await import('workbox-build') |
There was a problem hiding this comment.
Do we need interop default here?
There was a problem hiding this comment.
I will check it again but it works, I can split it to check for default
userquin
commented
Jul 13, 2022
userquin
commented
Jul 13, 2022
benmccann
reviewed
Jul 13, 2022
Still need the sequential, but yeah, finally removed. @antfu: it seems that |
benmccann
reviewed
Jul 13, 2022
Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Ben McCann <[email protected]>
|
@benmccann removed the sequential plugin (adapter plugin from integrations), awaiting merging sveltejs/kit#5678 and new kit release: rn the sveltekit example stops working, we only need the new version |
chore: add kit outDir option (`.svelte-kit` can be configured in kit)
|
Maybe this can help 🤞 : vitejs/vite#9326 |
Closed
benmccann
reviewed
Sep 6, 2022
|
|
||
| Since `SvelteKit` uses `SSR / SSG`, we need to add the `ReloadPrompt` component using `dynamic import`. `Vite Plugin PWA` will only register the service worker on build, it is aligned with the current behavior of [SvelteKit service worker module](https://kit.svelte.dev/docs#modules-$service-worker). | ||
| To update your project to use the new `vite-plugin-pwa` for SvelteKit, you only need to change the Vite config file (you don't need oldest `pwa` and `pwa-configuration` modules): |
There was a problem hiding this comment.
It'd probably make sense to write this aimed primarily towards people setting up new projects rather than those upgrading from older versions
Suggested change
| To update your project to use the new `vite-plugin-pwa` for SvelteKit, you only need to change the Vite config file (you don't need oldest `pwa` and `pwa-configuration` modules): | |
| To update your project to use the new `vite-plugin-pwa` for SvelteKit, you only need to add the plugin in the Vite config file (if you're upgrading from a prior version, you no longer need the `pwa` and `pwa-configuration` modules): |
benmccann
reviewed
Sep 6, 2022
Comment on lines
+26
to
+27
| // import { VitePWA } from 'vite-plugin-pwa' <== replace this import | ||
| import { ViteSvelteKitPWA } from 'vite-plugin-pwa' // <== with this import |
There was a problem hiding this comment.
We can just show how it should be configured. The replace suggestion won't apply for new users
Suggested change
| // import { VitePWA } from 'vite-plugin-pwa' <== replace this import | |
| import { ViteSvelteKitPWA } from 'vite-plugin-pwa' // <== with this import | |
| import { ViteSvelteKitPWA } from 'vite-plugin-pwa' |
benmccann
reviewed
Sep 6, 2022
|
|
||
| ## SvelteKit Pages | ||
|
|
||
| If you want your application can work offline, you should remove `hydrate: false` from all your pages, it will prevent to inject the layout and so will not work offline. |
There was a problem hiding this comment.
content looks good. just a minor wording suggestion
Suggested change
| If you want your application can work offline, you should remove `hydrate: false` from all your pages, it will prevent to inject the layout and so will not work offline. | |
| If you want your application to work offline, you should ensure you have not set `hydrate: false` on any of your pages since it will prevent injecting JavaScript into the layout for offline support. |
benmccann
reviewed
Sep 6, 2022
Comment on lines
+41
to
+53
| ## Plugin Configuration | ||
|
|
||
| `vite-plugin-pwa` has been modified to automatically detect SvelteKit plugin: once detected, it will add a set of default configuration options to your `vite-plugin-pwa` options: | ||
| - allows you to configure the SvelteKit build output folder: defaults to `.svelte-kit`, but you can change it with `svelteKitOptions.outDir` plugin option (([SvelteKit outDir](https://kit.svelte.dev/docs/configuration#outdir))). | ||
| - configures the `globDirectory` with SvelteKit build output folder: `globDirectory: '.svelte-kit/output'` (using previous `svelteKitOptions.outDir` option). | ||
| - adds `.svelte-kit/output/client` and `.svelte-kit/output/prerendered` folders to the `globPatterns`: `globPatterns: ['prerendered/**/*.html', 'client/**/*.{js,css,ico,png,svg,webp}']`. | ||
| - configures default Rollup assets naming convention: `dontCacheBustURLsMatching: /-[a-f0-9]{8}\./` (by default, `vite-plugin-pwa` will use Vite assets naming convention: `/\.[a-f0-9]{8}\./`). | ||
| - excludes adding manifest icons: `includeManifestIcons: false` (Vite will copy all `publicDir` content to the SvelteKit output folder before `vite-plugin-pwa` runs, and so, you will end up with duplicated entries in the service worker's precache manifest). | ||
| - allows you to configure `trailingSlash` option: `vite-plugin-pwa` will use it in its internal Workbox `manifestTransform` callback ([SvelteKit trailingslash](https://kit.svelte.dev/docs/configuration#trailingslash)). | ||
| - allows you to configure `fallback` adapter option: `vite-plugin-pwa` will configure it in the `workbox.navigateFallback` option, only when using `generateSW` strategy ([adapter-static fallback](https://github.com/sveltejs/kit/tree/master/packages/adapter-static#fallback)). | ||
|
|
||
| Some of the above options will be excluded if you already provide them or if you provide options where there may be a conflict between them: you can view the source code of the [SvelteKit PWA configuration module](https://github.com/antfu/vite-plugin-pwa/tree/main/src/integrations/sveltekit/config.ts) to verify that there are no conflicts. | ||
|
|
There was a problem hiding this comment.
This is internal implementation details that users should not need to worry about. It makes it sound a lot more complicated than it really is to setup the plugin
Suggested change
| ## Plugin Configuration | |
| `vite-plugin-pwa` has been modified to automatically detect SvelteKit plugin: once detected, it will add a set of default configuration options to your `vite-plugin-pwa` options: | |
| - allows you to configure the SvelteKit build output folder: defaults to `.svelte-kit`, but you can change it with `svelteKitOptions.outDir` plugin option (([SvelteKit outDir](https://kit.svelte.dev/docs/configuration#outdir))). | |
| - configures the `globDirectory` with SvelteKit build output folder: `globDirectory: '.svelte-kit/output'` (using previous `svelteKitOptions.outDir` option). | |
| - adds `.svelte-kit/output/client` and `.svelte-kit/output/prerendered` folders to the `globPatterns`: `globPatterns: ['prerendered/**/*.html', 'client/**/*.{js,css,ico,png,svg,webp}']`. | |
| - configures default Rollup assets naming convention: `dontCacheBustURLsMatching: /-[a-f0-9]{8}\./` (by default, `vite-plugin-pwa` will use Vite assets naming convention: `/\.[a-f0-9]{8}\./`). | |
| - excludes adding manifest icons: `includeManifestIcons: false` (Vite will copy all `publicDir` content to the SvelteKit output folder before `vite-plugin-pwa` runs, and so, you will end up with duplicated entries in the service worker's precache manifest). | |
| - allows you to configure `trailingSlash` option: `vite-plugin-pwa` will use it in its internal Workbox `manifestTransform` callback ([SvelteKit trailingslash](https://kit.svelte.dev/docs/configuration#trailingslash)). | |
| - allows you to configure `fallback` adapter option: `vite-plugin-pwa` will configure it in the `workbox.navigateFallback` option, only when using `generateSW` strategy ([adapter-static fallback](https://github.com/sveltejs/kit/tree/master/packages/adapter-static#fallback)). | |
| Some of the above options will be excluded if you already provide them or if you provide options where there may be a conflict between them: you can view the source code of the [SvelteKit PWA configuration module](https://github.com/antfu/vite-plugin-pwa/tree/main/src/integrations/sveltekit/config.ts) to verify that there are no conflicts. |
benmccann
reviewed
Sep 6, 2022
| onMount(async () => { | ||
| !dev && browser && (ReloadPrompt = (await import('$lib/components/ReloadPrompt.svelte')).default) | ||
| if (!dev && browser) { |
There was a problem hiding this comment.
you probably don't need && browser. onMount only runs on the browser and is generally tree-shaken away on the server, I believe
Suggested change
| if (!dev && browser) { | |
| if (!dev) { |
|
included in the new integration repo |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR also fix the
sveltekit-pwaexample.supersedes #319 (ESM part): ESM already included in another PRcloses #324