Prodtyping

The process on turning ideas into reality

December 31st 2018

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.

Checkout the quick start guides to get an app up and running (https://guides.emberjs.com/release/getting-started/quick-start/).

First, we need to serve up our application:

$ ember serve

and then go to http://localhost:4200/ in the browser

You'll know everything is working fine if you see the friendly tomster welcome page:

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!