Offline Storage: When 7 KB Equals 7 MB

Gerardo Rodriguez from Cloudfour:

While testing a progressive web app for one of our clients, I bumped into a suspicious error in the browser console: DOMException: Quota exceeded.

After browsing the app a few more times, it became clear the error would occur after a small number of images were added to the cache storage by the service worker. Looking in the Chrome DevTools Application tab, the cache storage was indeed over capacity.

How could this be? There were only ~15 images in the cache storage. Something was off.

The culprit? Opaque Responses.

When 7 KB Equals 7 MB →

Implementing “Save For Offline” with Service Workers

Una Kravets implemented “Save For Offline” on her blog, using Service Workers. She described the reasoning, process, and code to implement.

With “Save For Offline”, if someone is reading your blog on the subway, and loses their Internet connection, they won’t lose their place. If they accidentally click and the browser refreshes, they won’t lose their place. If they want to save your article to read on an airplane or at at a café in a foreign country where they have no internet plan, they can do that. And if they just want to save battery and be on airplane mode, that’s cool too.

✨Magic.✨

Jeremy also did something similar, to make his Resilient Web Design work offline.

Implementing “Save For Offline” with Service Workers →
Making Resilient Web Design work offline →

The ServiceWorker is coming, look busy!

Look at the apps on your homescreen. Why are they native? Why aren’t they just on the web? Its usually some combination of push messaging, background sync, offline & performance.

When native has something the web doesn’t, we should consider it a bug. Let’s have a look at the fixes, focusing on the ServiceWorker.

By Jake Archibald. Slides and transcript also available.

C&A Fashion Like

C&A Brazil:

A new initiative called Fashion Like allows people to ‘like’ certain items of clothing on the company’s Facebook page, and these clicks are collated and displayed on the relevant clothes rack in real-time. Customers are thereby able to view the item’s online popularity in the real world to help them make their decision.

Clever.

Real-time Facebook ‘likes’ displayed on Brazilian fashion retailer’s clothes racks →