if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw-test/sw.js')
  .then((reg) => {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch((error) => {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/logo.jpg',
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

self.addEventListener('push', function(event) {
  const title = 'PWA man!';
  const options = {
    body: 'Hey Devoxxians!',
    icon: 'images/devoxx.png'
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

{
  "name": "my-pwa",
  "short_name": "pwa",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    }
    ...
  ]
}

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/logo.jpg',
      ]);
    })
  );
});

ng add @angular/pwa

Installed packages for tooling via yarn.
CREATE ngsw-config.json (585 bytes)
CREATE src/manifest.webmanifest (1063 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3574 bytes)
UPDATE package.json (1350 bytes)
UPDATE src/app/app.module.ts (604 bytes)

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register(
      'ngsw-worker.js', 
      { enabled: environment.production }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@Injectable()
export class updateService {
  
  constructor(updates: SwUpdate, toastr: ToastrService) {
    
    updates.available.subscribe(event => {
      toastr.refresh('A new version is available');
    });
    
  }
  
}

constructor(private swPush: SwPush) {}  

subscribeToNotification() {
  this.swPush.requestSubscription({
    serverPublicKey: this.VAPID_PUBLIC_KEY
  })
  .then(sub => this.sendSubcriptionToBackend(sub))
}  

handleNotification() {
  this.swPush.notificationClicks.subscribe( event => {
    const dataFromBackend = event.notification.data;
    doSemthing(dataFromBackend);
  });
}

function pokemon_name(pokemon) {
  return pokemon.getName();
}

ng add apollo-graphql

CREATE src/app/graphql.module.ts (628 bytes)
UPDATE package.json (1728 bytes)
UPDATE tsconfig.json (572 bytes)
UPDATE src/app/app.module.ts (1702 bytes)

const uri = 'https://myapp.io/graphql';
export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({uri}),
    cache: new InMemoryCache(),
  };
}

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

const GET_USERS = gql`users { email firstName lastName }`;

constructor(private apollo: Apollo) { }
getUsers() {
  this.apollo
    .watchQuery({
      query: GET_USERS,
    })
    .valueChanges
    .subscribe(result => {
      this.data = result.data && result.data.users;
      this.loading = result.loading;
      this.error = result.error;
    });
}

const CREATE_USER = gql`mutation createUser(user: CreateUserInput!) {
    createUser(user: $user) {id email firstName lastName}
}`;

constructor(private apollo: Apollo) { }
createUser({ email, firstName, lastName }) {
  this.apollo.mutate({
    mutation: CREATE_USER,
    variables: {
      user: { email, firstName, lastName }
    }
  })
  .subscribe(
    user => this.user = user
  );
}

const CREATE_USER = gql`subscription {onUpdateTopic { id name active }}`;

constructor(private apollo: Apollo) { }
subscribeToUpdate({ email, firstName, lastName }) {
  return this.apollo
   .subscribe({
     query: gql`${subscription}`,
   })
   .subscribe(
     topic => this.topic = topic
   );
}

export const environment = {
  production: true,
  aws: {
    aws_project_region: 'eu-west-1',
    aws_appsync_graphqlEndpoint: 'https://xxx.region.amazonaws.com/graphql',
    aws_appsync_apiKey: 'da2-xxx',
  }
};

npm install aws-appsync

import { AUTH_TYPE, AWSAppSyncClient } from 'aws-appsync';
import { environment } from 'src/environments/environment';

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
})
export class GraphQLModule {
  constructor(apollo: Apollo) {
    const client: any = new AWSAppSyncClient({
      url: environment.aws.aws_appsync_graphqlEndpoint,
      region: environment.aws.aws_project_region,
      auth: {
        type: AUTH_TYPE.API_KEY,
        apiKey: environment.aws.aws_appsync_apiKey
      }
    });
    apollo.setClient(client);
  }
}