broccoli-serviceworker's Introduction

broccoli-serviceworker

ServiceWorker generator for Broccoli and Ember.js. Derived from broccoli-manifest.

For more details on ServiceWorker check out the following:

Usage for Ember Cli

npm install --save-dev broccoli-serviceworker

//app/config/environment.js

ENV.serviceWorker = {
  enabled: true,
  serviceWorkerFile: "service-worker.js",
  excludePaths: ['tests/', 'online.html',],
  includePaths: ['/'],
  fallback: [
    '/online.html offline.html'      
  ],
  dynamicCache: [
    '/api/todos'
  ]
};

Upgrade your index.html (see below) and you are done.

Usage for Broccoli.js

npm install --save broccoli-serviceworker

Use broccoli-serviceworker as your last filter in the Brocfile.js like this

var writeServiceWorker = require('broccoli-serviceworker');

...

var completeTree = mergeTrees([appJs, appCss, publicFiles]);

module.exports = mergeTrees([completeTree, writeServiceWorker((completeTree)]);

Options

You can pass some options as the second argument to writeServiceWorker:

writeServiceWorker(completeTree, {
  serviceWorkerFile: "service-worker.js",
  excludePaths: ['tests/', 'online.html',],
  includePaths: ['/'],
  fallback: [
    '/online.html offline.html'      
  ],
  dynamicCache: [
    '/api/todos'
  ]
});

Files can be filtered using regular expressions.

{
  excludePaths: ['index.html', new RegExp(/.\.map$/)],
  includePaths: ['']
}

Upgrade your index.html

In order to use the generated serviceworker, you will need to register the serviceworker. You can do so with the following code:

<!DOCTYPE html>
<html>
  ...
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js', {scope: './'})
          .catch(function(error) {
              alert('Error registering service worker:'+error);
          });
    } else {
        alert('service worker not supported');
    }      
  </script>
</html>

Recommend Projects