Add SvelteKit example

[frederikhors]

Add SvelteKit example.

[userquin]

@frederikhors right now this plugin and Svelte Kit are not supported as there are some compatibility issues:

• svelte-kit assets directory and vite public directory issue: see If files.assets === 'public', Vite copies the directory's contents sveltejs/kit#587
• svelte-kit registers its own service worker without being able to configure the scope option, so it would register the sw 2 times in different scope (former from svelte-kit and later from svelte virtual module)
• svelte-kit has its own service worker module, you should use it
• svelte-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: sveltejs/kit#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 the docs 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 ...

[userquin]

@frederikhors maybe on this repo: https://github.com/svelte-society/sveltesociety.dev

[userquin]

@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.

[userquin]

@frederikhors later I'll provide a small guide with changes I made...

[userquin]

@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 entry

As 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):

[userquin]

added rimraf dep and removed build-pwa script: updated build script to delete .svelte-kit and build directories before build project and rebuild pwa.

[userquin]

To run the app npm install and then npm run build && npm run preview (also updated on previous entries).

[userquin]

@frederikhors I'll add it soon, once #167 merged