fix: cache problem with builtin SvelteKit's PWA

[ical10]

This PR includes:

• fix caching issue by using community-standard Vite PWA plugin

Summary by CodeRabbit

• New Features

  • Progressive Web App (PWA) support now enabled with automatic updates, offline functionality, and optimized image asset caching to provide an enhanced app-like user experience with improved performance

• Style

  • Updated card overlay background styling for improved visual presentation and consistency throughout the application

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This pull request integrates Progressive Web App support using the Vite PWA plugin, replacing manual service worker registration with automated plugin-based setup. The change includes PWA manifest configuration, image asset caching strategy, plugin installation, and simplified card overlay styling.

Changes

Cohort / File(s)	Summary
PWA Plugin & Configuration package.json, vite.config.ts	Added vite-plugin-pwa v^1.2.0 to devDependencies. Configured VitePWA plugin in Vite with autoUpdate enabled, development mode options, Workbox caching strategy for image assets (PNG, JPG, JPEG, SVG, GIF) using CacheFirst, and PWA manifest with app name, short name, and icon.
Service Worker Registration src/app.html	Removed inline service worker registration script that previously registered '/sw.js' on window load via navigator.serviceWorker.register() with error handling. Plugin now handles automatic registration.
Visual Styling src/lib/components/CardCarousel.svelte	Updated card overlay background from gradient classes (bg-linear-to-br from-black via-card to-black) to solid black (bg-black).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify VitePWA plugin version compatibility with the project's Vite version
• Confirm caching strategy (CacheFirst for images) aligns with performance goals
• Validate PWA manifest configuration includes all required fields for proper PWA functionality

Poem

🐰 Our PWA wings now take flight,
With Vite's plugin shining bright,
No inline scripts cluttering the way,
Offline browsing—hip-hip-hooray! ✨
Cached images swift and clean,
Best progressive web I've seen! 🚀

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: replacing SvelteKit's built-in PWA implementation with vite-plugin-pwa to fix caching issues. The changes show removal of manual service worker registration and addition of the VitePWA plugin with caching configuration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/cache-problem

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for gnosis-split ready!

Name	Link
🔨 Latest commit	dde0982
🔍 Latest deploy log	https://app.netlify.com/projects/gnosis-split/deploys/69353eb07448cb0008e9a36a
😎 Deploy Preview	https://deploy-preview-3--gnosis-split.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

🚀 Deployed on https://69353ee83ed019c828b59a31--gnosis-split.netlify.app

[github-actions]

🚀 Deployed on https://gnosis-split.netlify.app
Commit: 2ce4994

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

vite.config.ts (1)

23-33: Enhance PWA manifest configuration.

The manifest configuration is minimal and has several areas for improvement:

1. Icon configuration concerns:

   • Using sizes: 'any' with a JPEG is non-standard. Specify actual dimensions (e.g., 192x192, 512x512).
   • JPEG icons lack transparency support. Consider using PNG format for better compatibility.
   • PWAs typically require multiple icon sizes for different devices and contexts.

2. Missing recommended manifest properties:

   • theme_color: Browser UI color when app is installed
   • background_color: Splash screen background
   • display: App display mode (e.g., standalone, fullscreen)
   • start_url: Entry point when launched
   • description: Brief app description

Example enhancement:

 manifest: {
   name: 'Gnosis Split',
   short_name: 'GnoSplit',
+  description: 'Split expenses with Gnosis Safe',
+  theme_color: '#000000',
+  background_color: '#000000',
+  display: 'standalone',
+  start_url: '/',
   icons: [
     {
-      src: '/gnosis-split-meta.jpg',
-      sizes: 'any',
-      type: 'image/jpeg'
+      src: '/icon-192x192.png',
+      sizes: '192x192',
+      type: 'image/png'
+    },
+    {
+      src: '/icon-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+      purpose: 'any maskable'
     }
   ]
 }

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bb576c3 and dde0982.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (4)

• package.json (1 hunks)
• src/app.html (0 hunks)
• src/lib/components/CardCarousel.svelte (1 hunks)
• vite.config.ts (1 hunks)

💤 Files with no reviewable changes (1)

• src/app.html

🔇 Additional comments (3)

src/lib/components/CardCarousel.svelte (1)

19-19: LGTM! Overlay styling simplified.

The change from a gradient to solid black overlay simplifies the visual styling. This is a straightforward visual update with no functional impact.

vite.config.ts (2)

4-4: LGTM! Plugin integration is correct.

The VitePWA plugin is properly imported and integrated into the plugins array alongside the existing plugins.

Also applies to: 7-9

---

15-21: This concern is incorrect. Local images are already cached via the globPatterns configuration, which pre-caches all .svg and .png files at install time. The runtimeCaching rule with the external HTTPS-only pattern is intentional and appropriate—it handles external image URLs separately. No changes needed.

Likely an incorrect or invalid review comment.