webmaxru

  checkForUpdate() {
    console.log('[App] checkForUpdate started')
    this.swUpdate.checkForUpdate()
      .then(() => {
        console.log('[App] checkForUpdate completed')
      })
      .catch(err => {
        console.error(err);
      })
  }

webmaxru

import { SwUpdate } from '@angular/service-worker';
...

export class ControlBroadcastComponent implements OnInit {

  constructor(private swUpdate: SwUpdate, ...) { }

  ngOnInit() {

    this.swUpdate.available.subscribe(event => {

webmaxru

  showMessages() {

    this.swPush.messages
      .subscribe(message => {

        console.log('[App] Push message received', message)

        let notification = message['notification']

        this.tweets.unshift({

webmaxru

  unsubscribeFromPush() {

    // Get active subscription

    this.swPush.subscription
      .take(1)
      .subscribe(pushSubscription => {

        console.log('[App] pushSubscription', pushSubscription)

webmaxru

{
  "notification": {
    "title": "Ranjeet Kumar",
    "actions": [
      {
        "action": "opentweet",
        "title": "Open tweet"
      }
    ],
    "body": "The latest The Top Javascript Blogs Daily! https://t.co/o3PSNkk9Di Thanks to @LifeWithKathy #makeyourownlane",

webmaxru

import { SwPush } from '@angular/service-worker';
...

  // Injecting SwPush dependency

  constructor(private pushService: PushService, private swPush: SwPush) {}

  subscribeToPush() {

    // Requesting messaging service to subscribe current client (browser)

webmaxru

{
  ...
  "dataGroups": [{
      "name": "api-freshness",
      "urls": [
        "/timeline"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,

webmaxru

{
  ...
  "assetGroups": [
   ...
   {
    "name": "fonts",
    "resources": {
      "urls": [
        "https://fonts.googleapis.com/**",
        "https://fonts.gstatic.com/**"

webmaxru

{
  ...
  "scripts": {
    ...
    "ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
    "ngsw-copy": "cp node_modules/@angular/service-worker/ngsw-worker.js dist/",
    "build-prod-ngsw": "ng build --prod && npm run ngsw-config && npm run ngsw-copy",
    "serve-prod-ngsw": "npm run build-prod-ngsw && http-server dist -p 8080"
  }
}

webmaxru

import { ServiceWorkerModule } from '@angular/service-worker'
import { environment } from '../environments/environment';

...

@NgModule({
  imports: [
    ...
    environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : []
  ],