handle notification interactions

[web-dave]

• create a clickNotification.js
• it exports a class and a function code below
• register ClickNotification as a plugin in your ServiceWorker
• register eventhandler for notificationclick and notificationclose
• build and test it.

[web-dave]

touch src/ngsw/plugins/clickNotification.js

[web-dave]

clickNotification.js

export function ClickNotification () {
  return (worker) => new ClickNotificationImpl(worker);
}

export class ClickNotificationImpl {

  setup (ops) {}

  constructor (sw) {}

}

[web-dave]

basic.js

...
import { ClickNotification } from './plugins/clickNotification';
bootstrapServiceWorker({
  manifestUrl: 'ngsw-manifest.json',
  plugins: [
    StaticContentCache(),
    Dynamic([
      new FreshnessStrategy(),
      new PerformanceStrategy(),
    ]),
    ExternalContentCache(),
    RouteRedirection(),
    Push(),
    ClickNotification()
  ],
});

[web-dave]

clickNotification,js

  notificationclick(){
    self.addEventListener('notificationclick', function (event) {
      console.log('notificationclick: ', event);
    });
  }

[web-dave]

clickNotification,js

  notificationclose(){
    self.addEventListener('notificationclose', function (event) {
      console.log('notificationclose');
    });
  }

[web-dave]

clickNotification,js

  constructor(sw) {
    this.notificationclick();
    this.notificationclose();
  }

[web-dave]

npm run build-ngsw