Helpful behaviors in caching and PWAs to know about

Add to bookmarks

Fri May 24 2019

I worked on a PWA recently and got to hit with a few unexpected (and hair pulling) occurrences, they did help me understand the whole offline experience process to help design better experiences easily next time. So, I decided to highlight some of them

Non-duplicate cache requests error on mobile

As you would know you can add items to the browser cache with a sample method below:

caches.open("hello").then(cache => {
  cache.addAll(['offline','/offline.js']);
})

The point here is the addAll method errors out on mobile (chrome for android at least) if there is a duplicate URL among the items in the array being passed. For example, if the current page is post/hello-world and you tried this method:

caches.open("hello").then(cache => {
  cache.addAll(['post/hello-world','']);
})

The code would give an error similar to this (screenshot from chrome remote debug of chrome on my android). alt text But they aren't duplicates? Well, when it resolves the URLs, the empty string is the same as the current page post/hello-world.

Caching external URLs

It's possible to cache assets and pages not located at a URL relative to the domain's URL. Example, `https://external.site.com/avatar.png That's because when items are added to the cache, information like the full link, type of request and more is stored along with the item

Caching Versioned Asset

If a versioned asset i.e app.js?v=12345' was added to the cache, trying to replace the new item with a new version query w.g123456` would lead to both being stored in the cache. This is due to the same reason stated for being able to cache external URLs. A workaround would be to automatically take care of removing and versioning cache would be handled manually by the code, or it would use an external service like Workbox to manage versioned items automatically

### Multiple fetch listeners on the service worker You can have/add more than one fetch event listener on your service worker for different functions. How this works is they are called in the order in which they are registered and the service worker responds with the first listener to have the event.respondWith method on the particular asset being requested. That way you can get your app to respond in different ways (strategies) for a different asset or asset type.

## Conclusion I was able to find some of these while working with caches and services workers, I would continually update the article with more noteworthy behavior found.

CHEERS!