Service Workers with Ember.js

Adding service workers to an Ember application is easy thanks to addons. To get started have an Ember app ready to go. For this tutorial, I followed the quickstart guides to get an Ember app up and running.

Quick Start - Getting Started - Ember Guides

First, we need to serve up our application:

ember serve

Nothing fancy here just an awesome little Tomster

Now let's implement service worker support for offline caching by using the ember-service-worker addons:

• ember-service-worker is the base addon that registers a service worker with the browser.
• ember-service-worker-index caches the Ember app’s index.htmlfile.
• ember-service-worker-asset-cache caches an Ember app’s asset files. By default, it will cache anything in the /assets/ folder, but can be configured to cache additional assets.
• ember-service-worker-cache-fallback resorts to a cached fallback version of a network response when a network request fails.

Run these addons and then rebuild the Ember app.

$ ember install ember-service-worker
$ ember install ember-service-worker-index
$ ember install ember-service-worker-asset-cache
$ ember install ember-service-worker-cache-fallback

These plugins will take care of caching the index.html page and any static assets. Now if you turn off your internet and try to refresh the page the app will still load! Cool right?