Cache issues after deploying updated entry.worker.ts

[felipetodev]

Hello remix-pwa community!

I'm having an issue I can't figure out. Every time I deploy and update the version of my entry.worker.ts, my application doesn't update correctly. It's as if the previous cache persists, and only some parts of my application change or update.

I'm using the following deps versions:

@remix-pwa/sw: ^3.0.10
@remix-pwa/worker-runtime: ^2.1.4

this is my entry.worker file:

/// <reference lib="WebWorker" />

import {
  clearUpOldCaches,
  EnhancedCache,
  isDocumentRequest,
  isLoaderRequest,
  Logger,
  NavigationHandler,
  type DefaultFetchHandler,
} from '@remix-pwa/sw'

export {};

declare let self: ServiceWorkerGlobalScope;

const version = 'v7';

const DOCUMENT_CACHE_NAME = `document-cache`;
const ASSET_CACHE_NAME = `asset-cache`;
const DATA_CACHE_NAME = `data-cache`;


const logger = new Logger({
  prefix: '[Log.js Service Worker]',
})

self.addEventListener('install', event => {
  logger.log('Service worker installed');

  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', event => {
  logger.log('Service worker activated')

  event.waitUntil(Promise.all([
    clearUpOldCaches([DOCUMENT_CACHE_NAME,DATA_CACHE_NAME,ASSET_CACHE_NAME], version),
    self.clients.claim(),
  ]))
})

const documentCache = new EnhancedCache(DOCUMENT_CACHE_NAME, {
  version,
  strategy: 'CacheFirst',
  strategyOptions: {
    maxEntries: 64,
  }
})

const assetCache = new EnhancedCache(ASSET_CACHE_NAME, {
  version,
  strategy: 'CacheFirst',
  strategyOptions: {
    maxAgeSeconds: 3_600 * 24,
    maxEntries: 100,
  }
})

const dataCache = new EnhancedCache(DATA_CACHE_NAME, {
  version,
  strategy: 'NetworkFirst',
  strategyOptions: {
    networkTimeoutInSeconds: 10,
    maxEntries: 72,
  }
})

export const defaultFetchHandler: DefaultFetchHandler = async ({ context }) => {
  const request = context.event.request
  const url = new URL(request.url)
 
  if (isDocumentRequest(request)) {
   return documentCache.handleRequest(request)
  }
 
  if (isLoaderRequest(request)) {
   return dataCache.handleRequest(request)
  }
 
  if (self.__workerManifest.assets.includes(url.pathname)) {
   return assetCache.handleRequest(request)
  }
 
  return fetch(request)
 }

 const messageHandler = new NavigationHandler({
  cache: documentCache
})

self.addEventListener('message', (event: ExtendableMessageEvent) => {
  event.waitUntil(messageHandler.handleMessage(event))
})

I’m using an object as a dictionary to manage a configuration in my app, and when I add a new option, update the version, and deploy, this change is not reflected in my app.

I'm surely doing something wrong, but I can't identify or resolve it with the documentation. Any help would be greatly appreciated!

[ShafSpecs]

When you migrate your cache, do you intend to migrate previous data there, or delete it all together and start again in a new cache? And what's the current behaviour like? @felipetodev

[felipetodev]

I need a new cache when deploying with new features (a new version) and to ensure that my users see the updated app without any mismatch between the latest deployment and the previous one. @ShafSpecs

e.g., error:

e.g., of how it should be

this is the project btw: https://github.com/felipetodev/log.js

[felipetodev]

another error example in prod ._.

[ShafSpecs]

Okay, I would debug your project to check out the current cache behavior, if I understand correctly, when you create a new cache version, items don't get cached correctly. They get missing entries

[felipetodev]

exactly! @ShafSpecs. Thanks for your help! ❤️

[ShafSpecs]

exactly! @ShafSpecs. Thanks for your help! ❤️

Does it work in dev tho? And could you please send public link?

[felipetodev]

try https://logjs.vercel.app