Closed frederikhors closed 2 years ago
@frederikhors right now this plugin and Svelte Kit
are not supported as there are some compatibility issues:
svelte-kit assets directory
andvite public directory
issue: see https://github.com/sveltejs/kit/issues/587svelte-kit
registers its ownservice worker
without being able to configure the scope
option, so it would register the sw 2 times in differentscope
(former from svelte-kit
and later from svelte virtual module
)svelte-kit
has its ownservice worker module
, you should use itsvelte-kit
doesn't expose routes on service worker module
(similar problem with vitesse template
and vite-ssg
solved recently)All the tests carried out have been in vain, for the moment I recommend that you take a look at this repo: https://github.com/FunMiles/SveltekitPWA, that has some limitations like offline support (you need to register routes manually and since service worker module
only includes a buid timestamp
instead a hash for routes, the sw will provide all routes as changed each time you build your app).
You can see this issue for more info: https://github.com/sveltejs/kit/issues/1792
We are working to try to include it within svelte-kit
, but this is not up to us, when we contact the svelte-kit
team to try to integrate it, we do not know how they will respond (like vitepress
integration).
You can try to disable the service worker module
of svelte-kit
and after doing the build include a script that uses the rollup intercommunication api
provided by this plugin and call it manually: you can see how to use it in thedocs script : build
and docs/scripts/build.ts
(we haven't tested it yet, we haven't had time).
If you provide a repo to start testing with (with service worker module disabled), as soon as we have time we will do some tests ...
@frederikhors maybe on this repo: https://github.com/svelte-society/sveltesociety.dev
@frederikhors I can generate the service worker using the approach described on my first response, I'll try to add the pwa icons and the prompt for update behavior (and trying also adding offline support), I'll push changes on my main branch of my fork.
@frederikhors later I'll provide a small guide with changes I made...
@frederikhors I have it working, also with offline support, there are some entries not working (internal server error: 500) when requesting recipes
and events
pages (maybe there are more pages not working, I don't navigate the entire app: the page renders, the error appears inside the page where the api call will render the api call). Maybe can be changed to show offline or maybe add a background sync
manager or maybe using static fetch on build...
The main problem is that the structure doesn't fit well with vite
structure: for example, when building, since we have the static-node
adapter, there are 2 directories, that is, .svelte-kit
and build
directories, former with the js and css assets (output/client
directory) plus the server logic (output/server
directory) and the later for static
assets (images + fonts) and static html generated pages.
I push the changes to the main
branch on my fork here: https://github.com/userquin/sveltesociety.dev
Since there is no svelte-kit service worker module
, the manifest.webmanifest
file should be included using /_app/manifest.webmanifest
on main layout svelte:head
.
I added 3 images on static/images
directory, using logo.svg
on Favicon Generator
: apple-touch-icon.png
, pwa-192x192.png
and pwa-512x512.png
.
Also added the src/lib/components/ReloadPrompt/index.svelte
component and modified the default layout to include it via onmount
hook, since we need to load the virtual module
and svelte-kit
resolves directly async
components to the app.js
module (cannot use async component loading tag ({# await ...}
).
Update app.html
template to add logo.svg
as svg favicon: also added apple-touch-icon
, mask-icon
, msapplication-TileColor
and theme-color
head entries.
Added 2 new top modules to configure pwa
and rebuild pwa
after svelte-kit
build: pwa.js
and pwa-configuration.js
: I have included . build-pwa
script on package.json
svelte.config.js
use the pwaConfiguration
from pwa-configuration.js
.
I have updated TypeScript
stuff to include some pwa plugin configuration
: tsconfig.json
and src/global.d.ts
.
You should delete .svelte-kit
and build
directories between builds: vite-plugin-pwa
will take care for versioning the files, if something changes, then the assets will be versioned via hash, so no problem. If you don't delete both directories, the plugin will include all assets, news and old, but svelte-kit
will not be able to serve old assets since they are removed from the manifest.json
file and then a 404 for each old assets included in the sw
precahe.
If you forget to delete previous directories, you will need to remove the service worker and then delete directories and rebuild the project again. Maybe including rimraf
dep and deleting both directories before build
.
To run the app, just run npm install
and then npm run build && npm run preview
.
You can see the pwa-configuration.js
module to see the configuration of the pwa plugin
.
/cc @FunMiles
Once tested, you can cleanup the pwa-configuration.js
module, removing these entries:
mode: 'development'
and the same option on workbox
entry.console.log
statements from manifestTransforms
on workbox
entryAs you can see, it is hard to configure properly: when using other adapter
we need to check where is the static content generated. If the adapter (if one configured) will no generate static html pages or if it is ommited, then, we should remove globDirectory
on workbox
entry on pwa-configruation.js
module instead using globDirectory: './build/'
(we also need to change srcDir: './build'
to srcDir: './.svelte-kit/output/client'
).
With the static-node
adapter, we use the ./build
directory as globDirectory
of workbox
just because all html will be traversed and so we can transform the entries before sw
generation.
Cheers.
Files changed/added (blue files were changed, green ones added):
added rimraf
dep and removed build-pwa
script: updated build
script to delete .svelte-kit
and build
directories before build
project and rebuild pwa
.
To run the app npm install
and then npm run build && npm run preview
(also updated on previous entries).
@frederikhors I'll add it soon, once #167 merged
Add SvelteKit example.