Offline First Prember Apps with Service Workers

ember-service-worker is an amazing Ember addon, that makes adding service workers, and offline first support, to your Ember app a breeze. It always “just worked” out of the box for my vanilla Ember apps, but once I started making static sites with Prember, I ran into some unique challenges. The main difference is, a normal Ember app just has one index.html, but a Prember app has one per route. This makes caching the html, with service workers, much harder, and it will be our next topic in the series on Static Blogs with Prember and Markdown.

Installation

Just like a normal app, you’ll want to start by installing ember-service-worker itself.

ember install ember-service-worker

ember-service-worker supports plugins, so I decided to write one for Prember support, ember-service-worker-prember. It is also just a simple install away.

ember install ember-service-worker-prember

This plugin is set to run after Prember, and searches through the output generated by Prember, looking for html files. It then reads those files, and generates a hash, based on the html content, which is used as the key for the html file in the service worker cache. As long as the content does not change, the hash will remain the same, and the cached version will be loaded, but if the content changes, the hash will change, the cache will be busted, and the html will be loaded fresh again, and a new version will be cached. This technique, and implementation are heavily based upon this amazing article, which really helped me wrap my head around these concepts.

Configuration

Configuration should be entirely optional, but service workers are sometimes tricky, and you want to manually bust your cache, and be double sure everything pulls the latest version. If you want to do that, you can bump the version in your ember-cli-build.js.

ember-service-worker now defaults to versionStrategy: 'every-build', which should bust your cache each time you build, and it also allows you to register your service worker inline. I typically configure it with both options explicitly.

// ember-cli-build.js
var app = new EmberApp(defaults, {
  'esw-prember': {
    // Changing this version number will bust the cache, but you probably do not
    // want to be doing this manually, but rather using `versionStrategy` as
    // explained here http://ember-service-worker.com/documentation/configuration/#versioning
    version: '1'
  },
  'ember-service-worker': {
    registrationStrategy: 'inline',
    versionStrategy: 'every-build'
  }
});

Hopefully, this will work out of the box, with a simple ember install for most people, and not need any configuration. Service workers are tricky though, so please let me know if you encounter any issues. Stay tuned for the remainder of this blog series in the coming weeks!

Offline First Prember Apps with Service Workers