Finally, when you are building a #PWA & setting up a service worker, this is how i feel your fetch event handler should be to handle a myriad of edge cases:
Part 1:
This part shows a CACHE FIRST LOOKUP. Also notice when the app is offline. Setup fetch to work with the HTTP cache
Part 1:
This part shows a CACHE FIRST LOOKUP. Also notice when the app is offline. Setup fetch to work with the HTTP cache
Part 2:
This part show a NETWORK NEXT LOOKUP. We detect errors with the fetch request first and return early. Then detect server-sent events and return too. Then split the by content type: html,css,js,svg responses gets put in the cache and json responses gets put in IndexedDB.
This part show a NETWORK NEXT LOOKUP. We detect errors with the fetch request first and return early. Then detect server-sent events and return too. Then split the by content type: html,css,js,svg responses gets put in the cache and json responses gets put in IndexedDB.
Notice this area: it helps us handle cache eviction gotchas that might hit us when developing a PWA
Don't worry the navigator object is very well accessible inside both Web Workers & Service Workers.
Notice how persist the cache after updating with `cache.put()`
Don't worry the navigator object is very well accessible inside both Web Workers & Service Workers.
Notice how persist the cache after updating with `cache.put()`
Part 3:
This final part deals with error handling for when a fetch request fails (especially if we have a network error e.g. 502, 503, 504 status).
`getFromLocal` is a function that gets data from IndexedDB. `objectStoreNamesMap` is a dictionary that maps req url to store names.
This final part deals with error handling for when a fetch request fails (especially if we have a network error e.g. 502, 503, 504 status).
`getFromLocal` is a function that gets data from IndexedDB. `objectStoreNamesMap` is a dictionary that maps req url to store names.
The End!!!
unroll @threadreaderapp
