angular pwa: how to implement pwa for angular application

References

• How to add pwa for your angular app
• Explain pwa in pure
• How to add install button to your app

Implement PWA for Angular Application

• Step 1: Create angular project
• Step 2: Make it pwa
• Step 3: Run and Test your website
• Step 4: Create your own bussiness login with PwaService
  • Force Update
  • Create your own install pattern

Step 1: Create angular project

ng new angular-pwa-demo

Step 2: Make it pwa

ng add @angular/pwa

Step 3: Run and test your website

# build
npm run build 

# serving your web
# npm install -g http-server
http-server -p 8080 -c-1 dist/angular-pwa-demo -o

Warning: For some reason I don't know why, but trust me, you can avoid so much wasting time asking Google =))

• You can see it on
• http://127.0.0.1:8080 # work => remember to use this
• http://192.168.1.17:8080 # not work
• http://172.17.0.1:8080 # not work

Step 4: Create your own bussiness login with PwaService

import { HostListener, Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class PwaService {
  readyInstall$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  installed$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  deferredPrompt: any = null;

  constructor(private swUpdate: SwUpdate) {
    // force update
    this.swUpdate.available.subscribe((event) => {
      window.location.reload();
    });

    window.addEventListener(
      'beforeinstallprompt',
      this.onBeforeInstallPrompt.bind(this)
    );
    window.addEventListener('appinstalled', this.onAppInstalled.bind(this));
  }

  onBeforeInstallPrompt(event: any): void {
    console.log('🚀 onBeforeInstallPrompt');
    // Prevent the mini-info bar from appearing on mobile
    event?.preventDefault();
    // Stash the event so it can be triggered later.
    this.deferredPrompt = event;
    this.readyInstall$?.next(true);
  }

  onAppInstalled(event: any): void {
    console.log('🚀 onAppInstalled');
    this.deferredPrompt = null;
    this.installed$.next(true);
  }

  async install() {
    const promptEvent = this.deferredPrompt;
    console.log('install', promptEvent);
    if (!promptEvent) {
      return;
    }
    promptEvent.prompt();

    const result: boolean = await promptEvent.userChoice;
    console.log(result);
    if (result) {
      this.deferredPrompt = null;
      this.readyInstall$.next(false);
    }
  }
}