/ WhatILearned

Offline Service worker with Polymer Apps

Making your web app offline is a really neat feature of separating your client from the server. A lot of dynamic websites are normally setup with the server generating the page and then sending it dynamically to the user. With the current trend of separating the view/presentation layer from the server/backend you can have a division of labour and responsibility.

Currently there's this feature called Service Workers. Service workers are a way to run things in the background[1]. This is a big deal/advance because previously with websites on the browser, they typically only do one thing. You can run things asynchronously but this is different from running code in the background. Because asynchronous means that the main thread of the program will stop what it's doing and attend to whatever needs attention and then resume where it left off after it's done paying attention to stuff.

With "Polymer Apps" and the Polymer Starter Kit, there's an element to setup and run a service to help you cache things for offline. In theory, the Service Worker will intercept all requests sent to your server and if the server is unavailable, send stuff from the cache (a temporary storage place usually accessible offline by your browser).

I write "in theory", because if you run the code on Chrome the service worker will register and the toast will pop up showing that it's indeed cached. However, if you try the same on Firefox (current version 41), it doesn't work as well. This is because Web Workers are generally compatible with most browsers[1:1] but the Service Worker in the Polymer Starter Kit requires the use of the an extra library called the Cache API.

As of Firefox 41, the Cache API is not included[1:2] which means while you can use ServiceWorkers for background processing, you cannot use them for caching.

  1. https://blog.wanderview.com/blog/2015/06/18/service-workers-will-not-ship-in-firefox-41/ ↩︎ ↩︎ ↩︎