title: Angular Service Worker blocks firestore requests
body: <p>I've been working on a little app, following the steps in a guide such as this one:
  <a href="https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/" rel="nofollow noreferrer">https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/</a></p>
  
  <p>My app was working fine until I introduced the service worker.  On page load, I'm brought to my apps dashboard and firestore is suppoesed to return some data and display it on the page.  It works one time, then on refresh the page is blank.  If I empty the cache and reload, I'll get it back and repeat the cycle on a another reload.</p>
  
  <p>When I look in the applications tab of the chrome dev tools, I can see in the service workers cache that my firestore data is there.  Isn't the servec worker supposed to serve me the cached data?  I've only done the base configuration of my service worker with angular cli, and the configurations are what's in that tutorial, as I'm still learning what I can do with a service worker.</p>
  
  <p>Here is the relevant code.  Mainly the <code>initializeEventFeed()</code> in the service and the <code>event$</code> getter in the component.</p>
  
  <p>Service:</p>
  
  <pre><code>@Injectable()
  export class EventService {
  
    eventCollection: AngularFirestoreCollection&lt;Event&gt;;
    eventCollection$: Observable&lt;Array&lt;Event&gt;&gt;;
  
    constructor(
      private db: AngularFirestore
    ) {
      this.initializeEventFeed();
    }
  
    initializeEventFeed(): void {
      this.eventCollection = this.db.collection('Event', ref =&gt; ref.orderBy('date'));
      this.eventCollection$ = this.eventCollection.valueChanges();
    }
  
    get eventFeed$(): Observable&lt;Array&lt;Event&gt;&gt; {
      return this.eventCollection$;
    }
  
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>@Component({
    selector: 'app-event-feed',
    template: `
    &lt;div *ngFor="let event of events$ | async"&gt;
      &lt;div class="jcard feed-card col-4"&gt;
        &lt;div class="feed-card__picture"&gt;
            &lt;img [src]="event.imageUrl" /&gt;
        &lt;/div&gt;
        &lt;div class="feed-card__description"&gt;
          &lt;h2&gt;{{ event.name}}&lt;/h2&gt;
          &lt;h3 [innerHTML]="formatDate(event.date)"&gt;&lt;/h3&gt;
          &lt;div&gt;{{ event.description }}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  `,
    styleUrls: ['./event-feed.component.scss']
  })
  export class EventFeedComponent implements OnInit {
  
    constructor(
      private eventService: EventService
    ) { }
  
    ngOnInit() {
    }
  
    formatDate(datestring: string): string {
      const monthNames =  ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
      'September', 'October', 'November', 'December'];
      const date = new Date(datestring);
      return monthNames[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear() ;
    }
  
    get events$(): Observable&lt;Array&lt;Event&gt;&gt; {
      return this.eventService.eventFeed$;
    }
  
  }
  </code></pre>
  
  <p>ngsw-config.json:</p>
  
  <pre><code>{
    "index": "/index.html",
    "assetGroups": [{
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }],
    "dataGroups": [{
      "name": "api-freshness",
      "urls": [
        "/new"
      ],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1h",
        "timeout": "10s",
        "strategy": "freshness"
      }
    }, {
      "name": "api-performance",
      "urls": [
        "/",
        "/jobs",
        "/show",
        "/ask"
      ],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "1d",
        "strategy": "performance"
      }
    }]
  }
  </code></pre>
  
  <p>The initialization in app.module:</p>
  
  <pre><code>ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
  </code></pre>
  
  <p>Here is a screenshot of the applications tab.  Looks like my data is cached here:</p>
  
  <p><a href="https://i.stack.imgur.com/6J3BG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6J3BG.png" alt="the Cache"></a></p>