Question

我按照以下指南中的步骤操作了一个小应用程序： https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/

我的应用程序工作正常，直到我介绍了服务工作者。在页面加载时，我带到了我的应用程序仪表板，并且支持firestore返回一些数据并将其显示在页面上。它工作一次，然后刷新页面是空白。如果我清空缓存并重新加载，我会将其恢复并在另一次重新加载时重复该循环。

当我查看chrome dev工具的应用程序选项卡时，我可以在服务工作者缓存中看到我的firestore数据存在。不是服务员应该为我提供缓存数据吗？我只使用angular cli完成了我的服务工作者的基本配置，配置是该教程中的内容，因为我仍然在学习我可以对服务工作者做些什么。

这是相关代码。主要是服务中的initializeEventFeed()和组件中的event$ getter。

服务：

@Injectable()
export class EventService {

  eventCollection: AngularFirestoreCollection<Event>;
  eventCollection$: Observable<Array<Event>>;

  constructor(
    private db: AngularFirestore
  ) {
    this.initializeEventFeed();
  }

  initializeEventFeed(): void {
    this.eventCollection = this.db.collection('Event', ref => ref.orderBy('date'));
    this.eventCollection$ = this.eventCollection.valueChanges();
  }

  get eventFeed$(): Observable<Array<Event>> {
    return this.eventCollection$;
  }

}

组件：

@Component({
  selector: 'app-event-feed',
  template: `
  <div *ngFor="let event of events$ | async">
    <div class="jcard feed-card col-4">
      <div class="feed-card__picture">
          <img [src]="event.imageUrl" />
      </div>
      <div class="feed-card__description">
        <h2>{{ event.name}}</h2>
        <h3 [innerHTML]="formatDate(event.date)"></h3>
        <div>{{ event.description }}</div>
      </div>
    </div>
  </div>
`,
  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<Array<Event>> {
    return this.eventService.eventFeed$;
  }

}

NGSW-config.json：

{
  "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"
    }
  }]
}

app.module中的初始化：

ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),

以下是应用程序选项卡的屏幕截图。看起来我的数据缓存在这里：

Angular Service Worker阻止firestore请求

0 个答案: