To get started with Ember Service Worker, install the addon in your exisiting Ember.js project:
If you now rebuild and visit your Ember app it should install a Service Worker when the page loads.
Let’s now add some plugins to make the app offline first. This is done by installing some aditional addons:
These plugins will take care of caching your
index.html page and static
assets. If you again restart rebuild and visit your Ember app, it caches
index.html file and static assets. If you now disconnect your internet
connection (or turn on ‘offline’ mode in your browser’s dev tools) and refresh
the page, your app should still load!
There might be a small gotcha though, that is it doesn’t cache any non-static resources, like requests to an API. To do this, we need to install another plugin:
This plugin will cache any request that you configure it to do so, but will only
serve the contents from the cache when the resource won’t load.
To configure which resources it should cache we need to add some configuration to
ember-cli-build.js file that should be in the root of your Ember.js
project. The configuration depends on what kind of resources your app loads.
Here’s an example configuration:
patterns property in the
esw-cache-fallback configuration should be an
array of regular expressions that describe the URLs it can cache. In the example
it’s configured to cache anything resource of which the URL starts with
Update the configuration to your liking and then rebuild and visit your app again. Now browse around your app for a few moments while online to prime the fallback cache, afterwards put your browser into offline mode and try to load a page you have visited before. If everything went well, it should now also serve your API responses from the cache.
Congratulations! Your app is now offline first.