Propmix Update Handler

An Angular library that automatically detects and notifies users when a new version of your application is available using Angular Service Worker.

How It Works

1. Initialization - Starts periodic update checks via APP_INITIALIZER
2. Detection - Uses SwUpdate.checkForUpdate() at configured intervals (default: 5 minutes)
3. Notification - Shows Material overlay dialog when new version is available
4. Update - User can choose "Update & Refresh" or "Ignore"
5. Error Handling - Detects chunk-load errors and prompts for update

Installation

npm install @propmix/app-update-handler

Note: The following steps must be completed in your parent application that uses this library.

Setup Parent Application

1. Enable Service Worker:

   ng add @angular/pwa

2. Update ngsw-config.json: Add "navigationRequestStrategy": "freshness" to enable update detection:

   {
     "index": "/index.html",
     "navigationRequestStrategy": "freshness",
     ...
   }

3. Clean up unwanted files and configs

   1. Remove Unwanted PWA Files: Since we're using Service Worker for app updates only (not PWA functionality), remove these files:

      # Remove PWA-specific files
      src/assets/icons/
      src/manifest.webmanifest

   2. Also remove references in angular.json:

      • Remove the manifest.webmanifest entry from assets array
      • Remove any PWA-related configuration

   3. And remove from index.html:

      • Remove <link rel="manifest" href="manifest.webmanifest">
      • Remove <meta name="theme-color" content="...">
      • Remove <link rel="icon" type="image/x-icon" href="...">

4. Update App Module

   Add this to your app's app.module.ts

   import { provideAppUpdateHandler } from '@propmix/app-update-handler';
   
   @NgModule({
     providers: [
       provideAppUpdateHandler(), // Optionally pass `checkInterval` in minutes
     ],
   })
   export class AppModule {}

API Reference

provideAppUpdateHandler(config?: AppUpdateHandlerProviderConfig)

Configuration Options:

| Option | Type | Default | Description | | ------------- | ------ | ------- | ----------------------------- | | checkInterval | number | 5 | Check interval in minutes |

Dependencies

• @angular/service-worker (via ng add @angular/pwa)
• @angular/material - For notification UI
• @angular/cdk - For overlay portal