在 Angular 应用中注册 Service Worker：
首先，在你的 Angular 应用中注册 Service Worker。你可以使用 Angular CLI 提供的 ng add @angular/pwa 命令，该命令会自动配置 Service Worker。
ng add @angular/pwa
在 Service Worker 中处理消息：
在 Service Worker 中，你可以监听 message 事件，以便在接收到消息时执行相应的操作。
// ngsw-worker.js
self.addEventListener('message', (event) => {
const { data } = event;
if (data && data.type === 'custom_message') {
// 处理自定义消息
console.log('Received custom message:', data.payload);
}
});
在 Angular 组件中与 Service Worker 通信：
在 Angular 组件中，你可以使用 ServiceWorkerController 接口来发送消息给 Service Worker。
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button (click)="sendMessageToSW()">Send Message to SW</button>
`,
})
export class AppComponent {
sendMessageToSW() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.controller?.postMessage({
type: 'custom_message',
payload: 'Hello from Angular!',
});
}
}
}
在上述例子中，当用户点击按钮时，sendMessageToSW 方法会向 Service Worker 发送一个自定义消息。
在 Service Worker 中响应消息：
Service Worker 收到消息后，会触发 message 事件，从而执行相应的逻辑。
注意事项：
1. 确保你的 Service Worker 文件（通常是 ngsw-worker.js）中包含了对 message 事件的监听。
2. 由于 Service Worker 是在不同线程中运行的，所以在消息传递过程中需要使用纯数据（Plain Data）。
3. 在实际应用中，可以使用更复杂的消息传递模式，例如通过 Promise 进行回调，以处理异步操作。
通过以上步骤，你就可以在 Angular 应用和 Service Worker 之间建立简单的通信。这种通信机制可以用于触发离线缓存更新、处理推送通知等任务。
转载请注明出处：http://www.zyzy.cn/article/detail/4988/Angular