Overview¶

The entry point to setting up PWA (Progressive Web App) in this project begins with configuring the vite.config.ts file. This configuration is simplified using the @vite-pwa/sveltekit plugin.

Vite Config¶

The SvelteKitPWA plugin is used for generating the PWA configuration. It is highly recommended to thoroughly review the available documentation to understand all the configuration options. While most of the configuration has default values, the following options require special attention:

• strategies: Since we use a custom service worker, it is crucial to set the strategy to injectManifest. The alternative option, generateSW, generates a default service worker, which does not suit our use case.
• injectManifest: This option specifies which files should be included or excluded in the service worker. The file patterns mentioned here are part of the intermediate output generated during the SvelteKit build step, typically found in the .svelte-kit/output directory.

Cloudflare Adapter Configuration¶

The .svelte-kit/output directory is used by the Cloudflare adapter to generate the final Cloudflare output in .svelte-kit/cloudflare. It is essential to ensure that the adapter generates a proper _routes.json file for the Cloudflare Pages project. Specifically, it is important to exclude files generated by the PWA plugin, such as /manifest.webmanifest, /offline-sw.js, and /pwa*, in the excludes field. This ensures that function invocations are skipped and these files are directly rendered as static files.