Initializing a plugin
Ember Service Worker plugins are just Ember CLI addons to begin with. Begin with initializing a new Ember addon.
The first step to turn the regular Ember CLI addon into a plugin is to open up
package.json
and add "ember-service-worker-plugin"
as keyword to it. This is
because the ember-service-worker
addon only picks up addons that have this
keyword. An abridged version of package.json
should look like this:
{
"name": "my-ember-service-worker-plugin",
"version": "0.0.0",
"keywords": [
"ember-addon",
"ember-service-worker-plugin"
]
}
Adding Service Worker code
To add code to the generated Service Worker, you need to create a
service-worker
folder in the root of your project. You will also at least need
to have an index.js
file in it, this will be the entry point file that the
generated Service Worker will include.
Importing other JavaScript modules
From within your Service Worker JavaScript files you can freely import code from any other Service Worker plugin, including your own of course. Plugins use native JavaScript modules just like your regular Ember apps and addons.
The pattern to include modules goes like this:
import ... from '<plugin-name>/service-worker/<path-to-module>';
So if you want to import the service-worker/utils/calculate-hash.js
module
from the hashing-cacher
plugin the import statement would be:
import calculateHash from 'hashing-cacher/service-worker/utils/calculate-hash';
Adding Service Worker registration code
Adding code to the Service Worker registration script works just like adding
code to the Service Worker script, except that the code needs to be in the
service-worker-registration
folder instead.
Programmaticaly customizing the output
If you need to modify or transform your service worker (registration) code, you
can do that using the treeForServiceWorker
and
treeForServiceWorkerRegistration
hooks in the index.js
file that is in the
root of the project.
The first argument to the hooks is the tree containing the contents of your
service-worker
or service-worker-registration
directory. The second argument
is the tree that contains the fully built app.
An example:
var mergeTrees = require('broccoli-merge-trees');
var Config = require('./lib/config');
module.exports = {
name: 'my-ember-service-worker-plugin',
treeForServiceWorker(serviceWorkerTree, appTree) {
var options = this.app.options['my-service-worker-plugin'];
var configTree = new Config([appTree], options);
return mergeTrees([serviceWorkerTree, configTree]);
}
};