kmaraz

@Injectable({
  providedIn: 'root'
})
export class ThingsEffects {

  fetchThings$ = createEffect(() => this.actions$.pipe(
    ofType(ThingsActions.fetchThings),
    switchMap(() => this.api.things.fetch()
      .pipe(
        map((data) => ThingsActions.update(data.items))

kmaraz

initialize() {
  if ('serviceWorker' in navigator && 'BroadcastChannel' in window) {
    // ...
    // Subscribe to broadcast channel from worker
    const apiUpdates = new BroadcastChannel(BROADCAST_CHANNEL);
    apiUpdates.addEventListener('message', (event: any) => {
      if (event.data.type === CACHE_UPDATED) {
        const { cacheName, updatedURL } = event.data.payload;
        this.retrieveAndSendData(cacheName, updatedURL);
      }

kmaraz

workbox.routing.registerRoute(
  new RegExp('/things$'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'api-things',
    plugins: [
      new workbox.broadcastUpdate.Plugin({
        channelName: 'api-updates',
        headersToCheck: ['x-checksum'], // Or other headers
      }),
      new workbox.expiration.Plugin({

kmaraz

workbox.routing.registerRoute(
  /^https:\/\/fonts\.googleapis\.com/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'google-fonts-stylesheets',
  })
);

kmaraz

workbox.routing.registerRoute(
  new RegExp('/assets/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'assets',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60,
        purgeOnQuotaError: true
      }),

kmaraz

@Injectable({
  providedIn: 'root'
})
export class WorkerService {

  initialize() {
    if ('serviceWorker' in navigator && 'BroadcastChannel' in window) {
      // Initialize worker
      this.getWorkboxInstance()
        .subscribe((Workbox) => {

kmaraz

{"lastUpload":"2019-12-28T20:01:28.887Z","extensionVersion":"v3.4.3"}

kmaraz

	JIT	AOT	Result
Application raw size	2.9MB	3.3MB	Increase
Vendors raw size	2.67MB	2.38MB	Decrease
Initial load time	~6s	~2s	Significant decrease

kmaraz

// MUST BE IN THIS ORDER!
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import * as angular from 'angular';

kmaraz

import { platformBrowser } from '@angular/platform-browser';
 // This file will be available during the compilation
import { AppModuleNgFactory } from './app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);