Overview

SvelteKit-Adapter-Versioned-Worker is a SvelteKit adapter that enables the generation of service workers for SvelteKit sites, allowing them to work offline. This adapter simplifies the process of dealing with caching headers, provides a reload opportunity and resumable state system for seamless updates, and supports various update priorities to avoid unnecessary disruptions for users. It also offers an easy-to-use hooks system for virtual routes and more, and supports different file modes, including stale-while-revalidate and “semi-lazy”.

Features

• No need to deal with caching headers or durations: The adapter handles caching headers and durations automatically, eliminating the need for manual configuration.
• Reload opportunity and resumable state system: Enables more seamless updates by providing a reload opportunity and a resumable state system.
• Different update priorities: Supports different update priorities to avoid unnecessarily bothering users during updates.
• Easy-to-use hooks system: Provides an easy-to-use hooks system for virtual routes and other features, making it convenient for developers.
• Supports multiple file modes: Supports different file modes, including stale-while-revalidate and “semi-lazy”, allowing for flexible caching strategies.
• Dynamically prefetch data in the worker: Enables dynamic prefetching of data in the worker while the page loads, improving performance.
• Update on reload: Automatically updates the service worker on reload, ensuring the latest version is used.
• Small worker builds: The worker builds are optimized for size, starting at approximately 4KB brotli’d.

Installation

1. Make sure you have the following peer dependencies installed:

   • @sveltejs/adapter-static 2.x.x
   • typescript 5.x.x (even if you’re just using JavaScript)
   • tslib 2.x.x (even if you’re just using JavaScript)

2. Update the following dependencies (if you already have them installed):

   • @sveltejs/kit ^1.22.0
   • svelte 4.x.x
   • vite 4.x.x

3. Install the peer dependencies and the SvelteKit adapter with the following command:

   npm install --save-dev @sveltejs/adapter-static@2.x.x typescript@5.x.x tslib@2.x.x
   npm install --save-dev svelte@4.x.x vite@4.x.x
   npm install --save @addaleax/versioned-worker-adapter
   

4. In your src/routes/+layout.ts (or .js) file, ensure that SvelteKit is configured to prerender all routes.

5. In your svelte.config.js file, import and use the versionedWorkerAdapter package as your SvelteKit adapter:

   import { versionedWorkerAdapter } from '@addaleax/versioned-worker-adapter';
   
   export default {
     kit: {
       adapter: versionedWorkerAdapter(),
       // other SvelteKit config options...
     },
   };
   

6. Specify the location of the versionedWorker.json file for Versioned Worker to use.

   • For development, specify the file location on the local disk:

   import { GetLast } from '@addaleax/versioned-worker-adapter';
   
   export function getLast(InfoProvider: GetLast): LastInfoProvider {
     return new InfoProvider({
       filename: 'path_to_build_directory/versionedWorker.json',
     });
   }
   

   • For production, specify the file location over HTTP(S) by modifying the package.json file:

   {
     "scripts": {
       "getLast": "<command_to_download_versionedWorker_json>"
     },
     "sveltekit": {
       "adapter": {
         "getLast": "npm run getLast"
       },
       "preview": "npm run getLast && svelte-kit preview"
     }
   }
   

   Make sure to replace <command_to_download_versionedWorker_json> with the actual command to download the versionedWorker.json file.

7. Install the required packages for production with the following command:

   npm install --save-dev <command_to_install_required_packages>
   

   Make sure to replace <command_to_install_required_packages> with the command to install the required packages.

8. Add the ServiceWorker component to your src/routes/+layout.svelte file so that it is used:

   <script>
     import { ServiceWorker } from '@addaleax/versioned-worker-adapter';
   
     // other code...
   </script>
   
   <!-- rest of the layout code -->
   
   <ServiceWorker />
   

Summary

SvelteKit-Adapter-Versioned-Worker is a useful adapter for SvelteKit sites that enables the generation of service workers, allowing for offline functionality. It simplifies the handling of caching headers, provides seamless updates with a reload opportunity and resumable state system, and supports various update priorities. With an easy-to-use hooks system, support for different file modes, and dynamic data prefetching, this adapter enhances the performance and offline experience of SvelteKit sites. However, it currently requires compatibility with @sveltejs/adapter-static.