Skip to content

Add offline support using a service worker#27

Open
takempf wants to merge 2 commits intomainfrom
feature/offline-support
Open

Add offline support using a service worker#27
takempf wants to merge 2 commits intomainfrom
feature/offline-support

Conversation

@takempf
Copy link
Owner

@takempf takempf commented Jun 9, 2025

This commit introduces a service worker to enable offline functionality for the game.

Key changes:

  • Added src/service-worker.js: This file contains the service worker logic, which caches all static assets and application files. It employs a "network falling back to cache" strategy to prioritize updates when an internet connection is available.
  • Registered the service worker in src/routes/+layout.js: The service worker is now registered on window load.
  • Updated vite.config.ts: Configured the build process to include the service worker in the docs output directory using rollup-plugin-copy.
  • Added rollup-plugin-copy as a dev dependency.

The application assets are now cached, allowing the game to be played even when you are offline. When online, the service worker will attempt to fetch the latest version of the files.

This commit introduces a service worker to enable offline functionality for the game.

Key changes:
- Added `src/service-worker.js`: This file contains the service worker logic, which caches all static assets and application files. It employs a "network falling back to cache" strategy to prioritize updates when an internet connection is available.
- Registered the service worker in `src/routes/+layout.js`: The service worker is now registered on window load.
- Updated `vite.config.ts`: Configured the build process to include the service worker in the `docs` output directory using `rollup-plugin-copy`.
- Added `rollup-plugin-copy` as a dev dependency.

The application assets are now cached, allowing the game to be played even when you are offline. When online, the service worker will attempt to fetch the latest version of the files.
This commit refactors the PWA implementation to use `vite-plugin-pwa`, replacing the previous manual service worker setup. This provides a more robust, maintainable, and automated solution for offline capabilities and asset caching.

Key changes:
- Removed the manually created `src/service-worker.js` and its registration in `src/routes/+layout.js`.
- Uninstalled `rollup-plugin-copy` and removed its configuration from `vite.config.ts`.
- Installed `vite-plugin-pwa` as a dev dependency.
- Configured `vite-plugin-pwa` in `vite.config.ts`:
    - Enables `autoUpdate` for the service worker.
    - Automatically injects the service worker registration.
    - Defines Workbox `globPatterns` for comprehensive precaching of application assets.
    - Implements runtime caching strategies:
        - `NetworkFirst` for navigation requests to prioritize fresh content.
        - `CacheFirst` for static assets (images, fonts).
        - `StaleWhileRevalidate` for JS and CSS files.
    - Configures a PWA manifest (`manifest.webmanifest`) with application details and icons.
    - Enables PWA functionality in the development environment for easier testing.

This approach ensures that the service worker is automatically generated and updated with each build, correctly caching application assets for offline use and providing a better update experience for you.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant