{"id":13729191,"url":"https://github.com/JanMalch/ngx-mat-sw-update","last_synced_at":"2025-05-08T01:31:56.470Z","repository":{"id":65922550,"uuid":"151843008","full_name":"JanMalch/ngx-mat-sw-update","owner":"JanMalch","description":"Angular library to setup a notification for Service Worker updates.","archived":true,"fork":false,"pushed_at":"2020-06-08T20:47:43.000Z","size":3087,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-04T02:08:32.867Z","etag":null,"topics":["angular","angular6","library","material-angular","service-worker"],"latest_commit_sha":null,"homepage":"https://janmalch.github.io/ngx-mat-sw-update","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JanMalch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-06T13:32:46.000Z","updated_at":"2023-01-28T14:02:40.000Z","dependencies_parsed_at":"2023-02-16T11:46:05.872Z","dependency_job_id":null,"html_url":"https://github.com/JanMalch/ngx-mat-sw-update","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JanMalch%2Fngx-mat-sw-update","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JanMalch%2Fngx-mat-sw-update/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JanMalch%2Fngx-mat-sw-update/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JanMalch%2Fngx-mat-sw-update/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JanMalch","download_url":"https://codeload.github.com/JanMalch/ngx-mat-sw-update/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224688938,"owners_count":17353288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular6","library","material-angular","service-worker"],"created_at":"2024-08-03T02:00:56.597Z","updated_at":"2024-11-14T20:30:37.215Z","avatar_url":"https://github.com/JanMalch.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Notification"],"readme":"[![npm version](https://badge.fury.io/js/ngx-mat-sw-update.svg)](https://badge.fury.io/js/ngx-mat-sw-update) \n\n# ngx-mat-sw-update\n  \n`ngx-mat-sw-update` is a small Angular library that helps you to quickly setup a notification for the user,  \nwhen there's a new update for your website available. Please read more on Service Workers [here](https://angular.io/guide/service-worker-intro).  \n\n\u003e [Mocked Demo](https://janmalch.github.io/ngx-mat-sw-update)  \n\n## Installation  \n  \n```  \nng add @angular/pwa  \nnpm install ngx-mat-sw-update  \n```  \n  \nCurrently `ngx-mat-sw-update` offers two ready to use notification variants (use one of them or [implement your own](#change-behaviour)):  \n   \n\u003eYou can test out all included variations on [janmalch.github.io/ngx-mat-sw-update](https://janmalch.github.io/ngx-mat-sw-update).  \n\n#### English SnackBar notification \u0026 check once on startup\n\n```typescript  \n@NgModule({  \n  imports: [  \n    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),  \n    MatSnackBarModule\n  ], \n  providers: [\n    { provide: MatSwUpdate, useClass: MsuSnackBarEn }\n  ]\n})  \nexport class AppModule {  \n  constructor(matUpdates: MatSwUpdate) {  \n    matUpdates.checkForUpdate();  \n  }  \n}  \n```  \n\n#### English Dialog notification \u0026 check in interval\n\n```typescript  \n@NgModule({  \n  imports: [  \n    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),  \n    MsuDialogModule.forRoot(MsuPaddedImageDialogComponent,\n      'https://firebase.google.com/images/homepage/grow_2x.png',\n      { disableClose: true }\n    )\n  ], \n  providers: [\n    { provide: MatSwUpdate, useClass: MsuDialogEn }\n  ]\n})  \nexport class AppModule {  \n  constructor(matUpdates: MatSwUpdate) {  \n    interval(15 * 60 * 1000).subscribe(() =\u003e matUpdates.checkForUpdate());  \n  }  \n}  \n``` \n\n\u003ePlease consult the [docs](https://angular.io/guide/service-worker-communications#checking-for-updates), when to check for updates.\n\n## `mat-sw-update` directive\n\n```typescript  \nimports: [  \n  ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),  \n  MsuDirectiveModule,\n  // ...\n``` \n\nYou can use the `mat-sw-update` directive, to easily show update information in your templates.\n\nUsage:\n\n```html\n\u003cng-container *mat-sw-update=\"let available$; let ctrl = controller\"\u003e\n  \u003cbutton (click)=\"ctrl.checkForUpdate()\"\u003eCheck for Update\u003c/button\u003e\n  \u003cbutton (click)=\"ctrl.forceNotification()\"\u003e\n    {{ !!(available$ | async) ? 'Update available' : 'No update available' }}\n  \u003c/button\u003e\n\u003c/ng-container\u003e\n``` \n\n`ctrl.forceNotification` will only show the notification, if an update is available.\n\nThe directive provides the following context:\n\n```typescript\ninterface MsuDirectiveContext {\n  $implicit: Observable\u003cUpdateAvailableEvent\u003e; // emits the update event when an update is available. Won't emit if no update is available.\n  controller: {\n    runOnAction: (response?: boolean) =\u003e void;\n    forceNotification: () =\u003e void;\n    checkForUpdate: () =\u003e void;\n  };\n}\n```\n\nIf you call `runOnAction` without arguments it defaults to `true`.\n\n## Change behaviour  \n  \n`ngx-mat-sw-update` aims to be quickly ready to use but also offer the possibility to adjust to your needs.  \n  \nTo achieve this the library has an **abstract** `MatSwUpdate` at its core. It offers a simple API to change individual parts of the update process.  \nThe flow is as follows:  \n  \n| Step | Action | `abstract` |\n|--|--|--|\n| `checkForUpdate(): void` | Checks for updates and the following steps will start, if an update is available. ||\n| `doShow(data: UpdateAvailableEvent): boolean`| Determines if a notification should be displayed | :heavy_check_mark: |\n| `showNotification(data: UpdateAvailableEvent): Observable\u003cboolean\u003e`| Shows the notification and returns an observable that indicates if the user confirmed the update | :heavy_check_mark: | \n| `onAction(response: boolean, data: UpdateAvailableEvent): void`| Receives the response from above and acts upon it. Defaults to activating the update and reloading the page afterwards. || \n| `activateUpdate(): Observable\u003cvoid\u003e`| Activates the update ||\n| `reloadPage(force?: boolean): void`| Reloads the page via `document.location.reload(force);`||\n  \nWith the separate `doShow` method you can decide, based on the update data, if you want to show a notification (for example if it's a crucial update). \nIf you always want to show the notification just `return true`.  \n\nTo show different messages based on the update data, you have to write a custom implementation of `MsuSnackBar` or `MsuDialog`.\nSee [i18n](#i18n) and the [appData section](https://angular.io/guide/service-worker-config#appdata) on the angular.io page.\n\n### Using custom implementations\n\nTo use a custom implementation simply provide it in your core module, like above.\n\n```typescript  \n@NgModule({  \n  imports: [  \n    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),\n    MatSnackBarModule\n  ],\n  providers: [\n    {\n      provide: MatSwUpdate,\n      useClass: MyCustomMsu\n    }\n  ]\n})  \nexport class AppModule {  \n  constructor(matUpdates: MatSwUpdate) { // this can stay the same \n    matUpdates.checkForUpdate();  \n  }  \n}  \n```\n\nYou have to inject certain dependencies in the base class. Example for `MsuSnackBar`:\n\n```typescript\nexport class MyCustomMsu extends MsuSnackBar {\n  constructor(updates: SwUpdate,\n              snackBar: MatSnackBar) {\n    super(updates, snackBar);\n  }\n  // ...\n```\n\n## Test notification\n\nUsually you can't properly test Service Worker updates with `ng serve` or `ng serve --prod`. \nTo check if your notification looks fine, you can provide the included `SwUpdateMock` class for `SwUpdate`.\nEvery time you call `checkForUpdate` on `MatSwUpdate` an update will be found, thus triggering the flow.\nThis will also work in dev mode!\n\n```typescript\nproviders: [\n  { provide: SwUpdate, useClass: SwUpdateMock },\n  // ...\n]\n```\n\n## i18n\n\nAs there are many different ways to realize i18n in your app, the library does not to enforce any particular way so that you don't end up with multiple strategies.\nCurrently only an english version exists: `MsuSnackBarEn` and `MsuDialogEn`. \n\nTo use custom translations and messages, you have to create your own subclass of `MsuSnackBar`, `MsuDialog` or `MatSwUpdate`.\nBoth `MsuSnackBar` and `MsuDialog` have an abstract method to change the text.\n\n#### `MsuSnackBar`\n`getTranslation(data: UpdateAvailableEvent): { description: string, reloadBtn: string }` \n→ return an object with the snackbar text and the text for the reload button\n\n#### `MsuDialog`\n`getDialogInput(data: UpdateAvailableEvent): DialogInput` \n→ return an object with the title, message, reload button and cancel button label\n\n## Class Overview\n\nHere's an overview over all contained classes and at what point which methods are implemented.\n\n:heavy_check_mark: = method is implemented\n\n:x: = method is `abstract`\n\n| `MatSwUpdate` | `MsuDialog` | `MsuDialogEn` | `MsuSnackBar` | `MsuSnackBarEn` |\n|--|--|--|--|--|--|\n|`abstract class`  | :heavy_check_mark: | :heavy_check_mark: | :x:| :heavy_check_mark: |:x:|\n|`ngOnInit(): void`|:heavy_check_mark:|*inherited* |*inherited* |*inherited* |*inherited* |\n|`doShow(data: UpdateAvailableEvent): boolean`|:x:|:x:|:heavy_check_mark:|:x:|:heavy_check_mark:|\n|`showNotification(data: UpdateAvailableEvent): Observable\u003cboolean\u003e`|:x:|:heavy_check_mark:|*inherited*|:heavy_check_mark:|*inherited*|\n|`onAction(response: boolean, data: UpdateAvailableEvent): void`|:heavy_check_mark:|*inherited*|*inherited*|:heavy_check_mark:|*inherited*|\n|`activateUpdate(): Observable\u003cvoid\u003e`|:heavy_check_mark:|*inherited* |*inherited* |*inherited* |*inherited* |\n|`reloadPage(force?: boolean): void`|:heavy_check_mark:|*inherited* |*inherited* |*inherited* |*inherited* |\n|`getDialogInput(data: UpdateAvailableEvent, locale: string): DialogInput`||:x: |:heavy_check_mark: |||\n|`getTranslation(data: UpdateAvailableEvent, locale: string): { description: string, reloadBtn: string }`||||:x: |:heavy_check_mark: |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJanMalch%2Fngx-mat-sw-update","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJanMalch%2Fngx-mat-sw-update","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJanMalch%2Fngx-mat-sw-update/lists"}