Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Celtian/ngx-update-app

Angular directive for updating app via service workers
https://github.com/Celtian/ngx-update-app

angular library

Last synced: 1 day ago
JSON representation

Angular directive for updating app via service workers

Awesome Lists containing this project

README

        



NgxAppVersion

[![npm version](https://badge.fury.io/js/ngx-update-app.svg)](https://badge.fury.io/js/ngx-update-app)
[![Package License](https://img.shields.io/npm/l/ngx-update-app.svg)](https://www.npmjs.com/ngx-update-app)
[![NPM Downloads](https://img.shields.io/npm/dm/ngx-update-app.svg)](https://www.npmjs.com/ngx-update-app)
[![Snyk](https://snyk.io//advisor/npm-package/ngx-update-app/badge.svg)](https://snyk.io//advisor/npm-package/ngx-update-app)
[![stars](https://badgen.net/github/stars/celtian/ngx-update-app)](https://github.com/celtian/ngx-update-app/)
[![forks](https://badgen.net/github/forks/celtian/ngx-update-app)](https://github.com/celtian/ngx-update-app/)
[![HitCount](http://hits.dwyl.com/celtian/ngx-update-app.svg)](http://hits.dwyl.com/celtian/ngx-update-app)

> Angular directive for updating app via service workers

> ✓ _Angular 18 compatible_

Here's the [demo](http://celtian.github.io/ngx-update-app/)

- Lightweight
- No dependencies!
- Directive way
- Customizable [options](#options)...

## 🛠️ Install

```terminal
yarn add ngx-update-app
```

## 🚀 Quick start

1. Provide config

```typescript
import { provideUpdateApp } from 'ngx-update-app';

export const appConfig: ApplicationConfig = {
providers: [
provideUpdateApp({
interval: 1000 * 60, // check new version every minute
dryRun: false, // set to true if zou want to see alert on init
onUpdateFactory: () => {
// you can use inject() here
return () => alert('Should update');
}
}),
provideServiceWorker('ngsw-worker.js', {
enabled: !isDevMode(),
registrationStrategy: 'registerWhenStable:30000'
})
]
};
```

2. Use directive in root component

```typescript
import { NgxUpdateAppDirective } from 'ngx-update-app';

@Component({
standalone: true,
hostDirectives: [NgxUpdateAppDirective]
})
export class AppComponent {}
```

## 🛠️ Options

| Option | Type | Default | Description |
| ------------------- | -------- | --------- | --------------------------------------------- |
| **interval** | number | undefined | interval to check new version in milliseconds |
| **dryRun** | boolean | false | force update action once on init |
| **onUpdateFactory** | function | undefined | function which will be called on update |

## 🔧 Compatibility

| Angular | ngx-fixed-footer | Install |
| ------- | ---------------- | --------------------------- |
| >= 18 | 1.x | `yarn add ngx-update-app` |
| >= 17 | 0.x | `yarn add ngx-update-app@0` |

## 📦 Dependencies

_None_

## 🪪 License

Copyright © 2023 - 2024 [Dominik Hladik](https://github.com/Celtian)

All contents are licensed under the [MIT license].

[mit license]: LICENSE