0

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

在我介绍服务人员之前，我的应用程序运行良好。在页面加载时，我被带到我的应用程序仪表板，并且 Firestore 应该返回一些数据并将其显示在页面上。它工作一次，然后刷新页面是空白的。如果我清空缓存并重新加载，我会将其取回并在另一个重新加载时重复循环。

当我查看 chrome 开发工具的应用程序选项卡时，我可以在服务人员缓存中看到我的 firestore 数据在那里。servec 工作人员不应该为我提供缓存的数据吗？我只使用 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}),

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

缓存

4

0 回答 0