Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/topaxi/ember-service-worker-update-notify
Update notification for service workers
https://github.com/topaxi/ember-service-worker-update-notify
ember pwa serviceworker
Last synced: 3 months ago
JSON representation
Update notification for service workers
- Host: GitHub
- URL: https://github.com/topaxi/ember-service-worker-update-notify
- Owner: topaxi
- License: mit
- Created: 2017-09-01T09:17:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-30T23:51:56.000Z (6 months ago)
- Last Synced: 2024-07-19T07:54:49.604Z (4 months ago)
- Topics: ember, pwa, serviceworker
- Language: JavaScript
- Size: 790 KB
- Stars: 28
- Watchers: 4
- Forks: 17
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-service-worker-update-notify - Update notification for service workers. (Packages / Service Workers)
README
# ember-service-worker-update-notify
Adds a `service-worker-update-notify` service and ``
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:
```handlebars
A new version is available, click here to update.
```
### 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:
```js
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:
```js
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`.
```js
// ...
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
```bash
yarn add --dev ember-concurrency # peer-dependency
yarn add --dev ember-service-worker-update-notify
```
### Local installation
- `git clone ` 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](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
## License
This project is licensed under the [MIT License](LICENSE.md).