如何读取 Angular 中当前 PWA 的版本哈希？

Question

我希望能够读取我的 Angular PWA 当前活动的哈希值。但是我看不到任何这样做的机制。

SwUpdate 对象提供可观察量，允许您在新版本激活或可用时读取当前版本的哈希值，但似乎没有公开任何静态方法来获取当前版本的哈希值。

class SwUpdate {
  available: Observable<UpdateAvailableEvent>
  activated: Observable<UpdateActivatedEvent>
  unrecoverable: Observable<UnrecoverableStateEvent>
  isEnabled: boolean
  checkForUpdate(): Promise<void>
  activateUpdate(): Promise<void>
}

我希望能够读取类似

SwUpdate.current

 的内容来读取当前哈希值（例如 

a518f9f1ab65954c2eafa02fec134fa54b391651

），而不必等待 

available

 或 

activated

 事件。这可能吗？

Answer 1

您可以使用

SwUpdate

 中的 

@angular/service-worker

 来执行此操作。例如，您可以像这样在 

app.component.ts

 上检查：

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private swUpdate: SwUpdate) {}

  checkForUpdate() {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe((event) => {
        console.log('Update is available!');
        console.log('Current version: ' + event.current.hash);
        console.log('New available version: ' + event.available.hash);
      });
    }
  }

  ngOnInit() {
    this.checkForUpdate();
  }
}

Answer 2

我遇到了同样的问题，但在互联网上找不到答案。我仍然不明白为什么 Angular 不直接提供这些信息。所以，我开始尝试，直到找到可行的方法。应用程序信息及其版本存储在缓存中：

具体来说，最新保存版本的hash是在/latest路径下找到的，可以这样获取：

caches.open('ngsw:/:db:control').then((cache) => {
  cache.match('/latest').then((res) => {
    res?.json().then((body) => {
      console.log(body.latest)
    }
  }
}

我也对获取版本日期感兴趣，所以我查看了该版本的清单，为了避免它作为承诺传播，我使用 rxjs 中的“from”运算符将其转换为可观察值：

    import { from } from 'rxjs';

    getAppVersion() {
        return from(
          caches.open('ngsw:/:db:control').then((cache) => {
            return cache.match('/latest').then((resLts) => {
              return resLts?.json().then((bodyLts) => {
                return cache.match('/manifests').then((resManifests) => {
                  return resManifests?.json().then((manifests) => {
                    return {
                      hash: bodyLts.latest,
                      timestamp: manifests[bodyLts.latest].timestamp,
                    };
                  });
                });
              });
            });
          })
        );
      }

据我所知，我对结果感到满意，尽管它存在以下问题：在网站第一次加载时，缓存尚不存在并且不会返回任何内容。也许可以定期查询，直到找到信息，但我不确定它是否有效。

我看到的另一个问题是，这可能是一个临时解决方案，因为 Angular 文档中没有任何官方内容表明这些缓存路由将保持不变。

好吧，虽然这个问题已经有好几年了，但我认为分享很重要，以防对其他人有用。