LF-5230 Make farm note images available offline

[kathyavini]

Description

This adds runtime caching of images to the Farm Notes feature in a new dedicated cache farm-notes-images. To keep this cache from accumulating stale images and growing out of control, the workbox-expiration plugin was used, and the cache images set to:

1. expire in 30 days
2. keep only up to 50 entries (oldest will get purged first)
3. purgeOnQuotaError <-- documentation has nothing to say on what this is exactly, but Claude says

If the browser hits its storage quota limit (the maximum amount of data the origin is allowed to store across all caches, IndexedDB, etc.), it's OK to delete this entire cache to free up space.

So that sounds like exactly what we want -- these images are the least important part of our cache compared to the request queue and workbox-precache application code.

With the imaginary compressed images, I was seeing quite small image files, and 50 entries is unlikely to be more than 3-5MB of total data 🙂 I'll add new cache-checking code below

Jira link: https://lite-farm.atlassian.net/browse/LF-5230

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

I ran pnpm build and pnpm preview to create the cache on localhost:4173. As usual you can then go offline and reload to see the images subsequently served from cache.

Here is also new cache-inspecting code for the browser console which tallies per cache:

 (async () => {
    const names = await caches.keys();
    for (const name of names) {
      const cache = await caches.open(name);
      const keys = await cache.keys();
      let totalBytes = 0;
      for (const req of keys) {
        const res = await cache.match(req);
        const blob = await res.blob();
        totalBytes += blob.size;
      }
      console.log(`${name}: ${keys.length} entries, ${(totalBytes / 1024 / 1024).toFixed(2)} MB`);
    }
  })();

With that I was finding a very modest cache size for my note images! 🎉

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
• I have added the GNU General Public License to all new files

[kathyavini]

The change to the if/else brackets made this look like a much bigger diff than it actually is... changes were:

Removed this:

if (import.meta.env.VITE_ENV === 'development') {
  if (subscribed) {
    setMediaUrl(fileUrl);
  }
} else {

instead did this:

if (import.meta.env.VITE_ENV !== 'development') {
  url.hostname = 'images.litefarm.workers.dev';
}

so that fetch() is used for both dev as well as in beta/prod, so the service worker can intercept the request and cache it. This was necessary to see the farm-note-image cache created in development.

[SayakaOno]

Looks great! 🎉