開発者ドキュメント

Angular Service Worker：アップデートへの対応

getdocs

@angular / service-workerパッケージを使用してアプリのサービスワーカーを設定した場合、エンドユーザー向けに古いバージョンのアプリを処理する方法について疑問に思われるかもしれません。 。 新しいバージョンのServiceWorkerはページのリロード時にのみアクティブ化されるため、これは簡単に問題になる可能性があります。

ありがたいことに、 @ angle /service-workerにはSwUpdateクラスがあり、利用可能な更新を簡単に確認できます。

利用可能なアップデートの購読

availableobservableをサブスクライブするUpdateサービスを作成して、SwUpdateの基本的な使用法を調べてみましょう。このサービスは、ServiceWorkerの更新が利用可能になると発行されます。

update.service.ts
import { Injectable } from '@angular/core';

import { SwUpdate } from '@angular/service-worker';

単純なページのリロードは、新しいService Workerをアクティブ化するためのトリックを実行するため、更新ロジックはスナックバーコンポーネントのようなものを使用して、ユーザーにページのリロードを促すことができます。 Angular Material には、次のように使用できる優れたスナックバーコンポーネントがあります。

update.service.ts
import { Injectable } from '@angular/core';

import { MatSnackBar } from '@angular/material';
import { SwUpdate } from '@angular/service-worker';
@Injectable()
export class UpdateService {
  constructor(private swUpdate: SwUpdate, private snackbar: MatSnackBar) {
    this.swUpdate.available.subscribe(evt => {
      const snack = this.snackbar.open('Update Available', 'Reload');
  snack
    .onAction()
    .subscribe(() => {
      window.location.reload();
    });

  snack.setTimeout(() => {
    snack.dismiss();
  }, 6000);
});

次に、 Update サービスがアプリモジュールで提供され、アプリコンポーネントに挿入されていることを確認する必要があります。

app.component.ts
import { Component } from '@angular/core';

import { UpdateService } from './update.service';

基本的な更新メカニズムは以上です。 次に、SwUpdateクラスの一部として使用できるいくつかのプロパティとメソッドを見てみましょう。

有効化および有効化

SwUpdate には、 available observableと同様のactivate observableがあり、正常なServiceWorkerアクティベーションにフックするためにサブスクライブできます。

さらに、ServiceWorkerが現在有効になっている場合にtrueを返すisEnabledプロパティがあります。

import { Injectable } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Injectable()
export class UpdateService {
  constructor(private swUpdate: SwUpdate) {
    if (!this.swUpdate.isEnabled) {
      console.log('Nope 🙁');
    }
  }
}

checkForUpdate（）＆activateUpdate（）

SwUpdate クラスには、ServiceWorkerの更新をより詳細に制御できる2つのメソッドもあります。

モバイルバージョンを終了