Awesome

ember-service-worker-update-notify

Adds a service-worker-update-notify service and <ServiceWorkerUpdateNotify /> component which displays a reload link if the service-worker has found an update.

Usage

Using the component

The component will show a message to the user when the availability of an update has been detected. Overwrite the default message using the component in block form:

<ServiceWorkerUpdateNotify>
  <a class="service-worker-update-notify" href={{this.router.currentURL}}>
    A new version is available, click here to update.
  </a>
</ServiceWorkerUpdateNotify>

Using the service

The service allows you to react to an app update in a more programmatic manner, e.g. you could force reload the app. The service emits an update event once an update has been detected. Here is an example of an application route that reloads the app automatically:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service
  serviceWorkerUpdateNotify;
  
  beforeModel() {
    this.serviceWorkerUpdateNotify.on('update', () => {
      window.location.reload();
    });
  }
}

Configuration

The poll interval can be configured in your config/environment.js with:

module.exports = function(environment) {
  let ENV = {
    'ember-service-worker-update-notify': {
      pollingInterval: 1200000 // Default is 20min
    }
  };

 return ENV;
};

Testing in Your App

Testing this in your app should mainly be concerned with presence and and what it looks like.

During testing, the polling will be disabled, and the reveal of the "New version available" content is controlled by a promise set on the window. In your tests, two helpers will aid you in asserting presence and appearance: setupServiceWorkerUpdater, and hasServiceWorkerUpdate.

// ...
import {
  setupServiceWorkerUpdater,
  hasServiceWorkerUpdate
} from 'ember-service-worker-update-notify/test-support/updater';

module('Application | Index', function(hooks) {
  setupApplicationTest(hooks);
  setupServiceWorkerUpdater(hooks);

  test('the update is shown', async function(assert) {
    // assert that the content is not shown

    await serviceWorkerUpdate();

    // assert that the content is shown

  });
});

Installation

yarn add --dev ember-concurrency # peer-dependency
yarn add --dev ember-service-worker-update-notify

Local installation

• git clone <repository-url> this repository
• cd ember-service-worker-update-notify
• npm install

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.