How do I generate a URL and make it accessible using PWA offline?

Question

I am using this template for my website and was trying to implement PWA but then realized if I use the code that prevents url sharing the PWA does not work offline. I know this is because the url is not Cashed but I cant cash it because it is based off of the time the page is open'd. Does anyone have a fix? The tutorial I was following is here .

If you want to see my site here is the link .

Answer 1

The problem is the hash fragment. This part of the URL is not passed to the server and therefor not passed to the service worker to cache.

The initial solution I would suggest is to create a current or last response object variable in the service worker within your fetch event handler. Keey that in memory and overwrite it as new documents (HTML) is requested (no need to do this for CSS, scripts, images, etc). Then when the user wants to do the action you want to cache the current page you can post a message to the service worker to then cache that request. Because this is not really a true response and tied to a timestamp, I would probably cache the page as data in IndexedDB with a timestamp associated with the record.

Not a simple and clean solution, but your problem requirement is sort of an outlier that would require a more complex solution than most.