Angular Service Worker 的完全指南-JavaScript中文网-JavaScript教程资源分享门户

Angular Service Worker 是一个轻量级的 JavaScript 应用程序，用于管理离线缓存、网络请求和更新等功能。它是一个能够为 Web 应用程序带来优异离线体验的工具。本指南将为前端开发人员详细介绍 Angular Service Worker，包括如何安装和配置、如何处理缓存和网络请求、如何进行应用程序更新，以及如何调试和优化服务工作者等内容。

安装和配置 Angular Service Worker

首先，需要确保已经在应用程序中安装了最新版本的 Angular CLI。安装完成后，在终端中进入应用程序的根目录，并运行以下命令：

ng add @angular/pwa

该命令将自动生成一些获取 Progressive Web App 好处的支持代码，其中就包括 Service Worker。

随后，在应用程序的根目录中找到 app.module.ts，并添加如下代码：

// javascriptcn.com 代码示例
import { environment } from '../environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ]
})
export class AppModule { }

此处，register 方法告诉 Angular 找到 Service Worker 脚本的位置。默认情况下，Angular Service Worker 中使用的脚本是 ngsw-worker.js，它会输出并自动缓存应用程序的所有内容。

处理缓存与网络请求

Angular Service Worker 充当着请求缓存系统的角色，因此你可以使用它来处理缓存和网络请求。比如，你可以使用下面的示例代码将 HTTP 响应缓存到 Service Worker 中：

// javascriptcn.com 代码示例
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData() {
    const url = 'https://api.myjson.com/bins/15psn9';
    const cacheKey = 'data-cache';

    return this.http
      .get(url, { observe: 'response' })
      .pipe(
        map(response => {
          const data = response['body'];
          const dataHash = JSON.stringify(data);

          localStorage.setItem(cacheKey, dataHash);
          return data;
        }),
        catchError(error => {
          const cachedData = localStorage.getItem(cacheKey);
          if (cachedData) {
            return of(JSON.parse(cachedData));
          }

          return throwError(error);
        })
      );
  }
}

值得注意的是，当您访问这些资源时，Service Worker 将自动从缓存中返回。这意味着即使在离线情况下，您的应用程序仍然能够重新访问已缓存的内容。

进行应用程序更新

在 Angular Service Worker 中进行应用程序更新是一个相对简单的过程。首先，您需要在您的 Service Worker 中开启 updater 功能。然后，当您的 Service Worker 接收到 activateUpdate 事件时，就可以完成更新了。以下是更新 Service Worker 的示例代码：

// javascriptcn.com 代码示例
import { SwUpdate } from '@angular/service-worker';

export class AppComponent {
  public constructor(private swUpdate: SwUpdate) {
    if (swUpdate.isEnabled) {
      swUpdate.available.subscribe(() => {
        if (confirm('New version available. Load new version?')) {
          window.location.reload();
        }
      });
    }
  }
}

在这个示例中，若主窗口接收到 activateUpdate 事件，则返回新版本应用的刷新指令，这将导致页面重新加载并更新。

调试和优化服务工作者

最后，您可能希望在您的应用程序中调试和优化 Service Worker。这可以通过在 Chrome 开发者控制台中使用 Lighthouse 工具来进行。以下是优化代码的示例：

// javascriptcn.com 代码示例
import { SwPush } from '@angular/service-worker';

export class AppComponent {
  public constructor(swPush: SwPush) {
    if (swPush.isEnabled) {
      swPush.requestSubscription({
          serverPublicKey: 'NG9acV7JMcDPIZsLzZsNtZEeVz8QWDWnObY3rEaTX9s'
        })
        .then(sub => console.log('Push subscription was successful', sub))
        .catch(err => console.error('Could not subscribe to push notifications', err));
    }
  }
}

在这个示例中，当您要开启推送通知时，SwPush 会在您的浏览器中添加一个新的 Push 订阅，以便在推送消息时接收通知。

总结

Angular Service Worker 使得为 Web 应用程序添加可选的和高级离线体验变得非常简单和可靠。本指南介绍了 Angular Service Worker 的安装和配置、如何处理缓存和网络请求、如何进行应用程序更新、以及如何调试和优化服务工作者。希望这个指南对您的前端开发带来帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65479ca77d4982a6eb1f6675