cachingservice-workeroffline-cachingofflineappsdexie

how can i use the same page as an edit and an add and cache them offline with simple url change as in description


hi there so i have a link lets say it is https://example.com/exp the exp page is my add page and it is cached in my service worker and works offline now when i open my list and choose to edit a record it opens in https://example.com/exp?id=2 when i open this page it doesn't work offline if i remove the id part then it works but then it is an add i want my edit page to be offline as-well how do i fix this?

please help

my code**

// give your cache a name
const cacheName = 'my-cache';
// alert('hi')
// put the static assets and routes you want to cache here
const filesToCache = [
  
  
  '/',

 'https://example.com/exp',

];

// the event handler for the activate event
self.addEventListener('activate', e => self.clients.claim());

// the event handler for the install event 
// typically used to cache assets
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName)
    .then(cache => cache.addAll(filesToCache))
  );
});

// the fetch event handler, to intercept requests and serve all 
// static assets from the cache
self.addEventListener('fetch', e => {

  e.respondWith(
    caches.match(e.request)
    .then(response => response ? response : fetch(e.request))
  )


});

Solution

  • okay so cache and serviceworkers website can only work offline with the exact link. Change it a bit and it brakes you have to cache the id if you want to cache a edit view you have to also use something like Dexie/indexedDB for an offline data/storage handler and then based on your data you fetch you have to for loop the ids and stringify them with your url and then add them - i have the code to show how it works if anyone wants it