Angular Service Worker：正确添加EventListener的位置在哪？

为什么你的代码不生效？ #

你在SyncService里调用addEventListener('periodicSync')是绑定在主线程的，但periodicSync事件是在Service Worker独立线程触发的，主线程根本接收不到这个事件，所以监听器完全不会执行。另外，Service Worker和Angular应用主线程是隔离的，没法直接调用Angular的服务实例，这也是你不能在Service Worker里直接用apiService的原因。

正确的实现方式（两种方案） #

方案一：通过消息传递，用Angular服务处理逻辑（推荐） #

核心思路：在Service Worker里监听periodicSync事件，然后给主线程发消息；主线程（Angular服务）收到消息后，调用已有的服务完成业务逻辑。

1. 编写自定义Service Worker脚本

在src目录下创建custom-sw.ts（可以用TypeScript，编译后生成js）：

/// <reference lib="webworker" />

declare const self: ServiceWorkerGlobalScope;

// 监听periodicSync事件
self.addEventListener('periodicSync', (event: PeriodicSyncEvent) => {
  if (event.tag === 'download-stammdaten') {
    // 等待异步操作完成，避免Service Worker提前终止
    event.waitUntil(
      // 找到所有活跃的窗口客户端
      self.clients.matchAll({ type: 'window' }).then(clients => {
        clients.forEach(client => {
          // 给主线程发消息
          client.postMessage({
            type: 'PERIODIC_SYNC_TRIGGERED',
            tag: event.tag
          });
        });
      })
    );
  }
});

2. 配置Angular合并自定义脚本

修改src/ngsw-config.json，添加自定义脚本到Service Worker中：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [/* 你的现有配置 */],
  "additionalScripts": ["/custom-sw.js"]
}

注意：如果用TypeScript编写custom-sw.ts，需要配置tsconfig编译成js，或者直接写custom-sw.js文件。

3. 修改SyncService监听消息并处理逻辑

import { Injectable } from '@angular/core';
import { IndexedDbService } from './indexed-db.service';
import { ApiService } from './api.service';

@Injectable({ providedIn: 'root' })
export class SyncService {
  constructor(
    private indexedDbService: IndexedDbService,
    private apiService: ApiService
  ) {
    // 监听来自Service Worker的消息
    navigator.serviceWorker.addEventListener('message', (event) => {
      if (event.data.type === 'PERIODIC_SYNC_TRIGGERED' && event.data.tag === 'download-stammdaten') {
        this.handleSync();
      }
    });
  }

  async registerSyncStuff() {
    const registration = await navigator.serviceWorker.ready;
    try {
      await registration.periodicSync.register('download-stammdaten', {
        minInterval: 30 * 1000,
      });
      console.log('周期同步已注册');
    } catch (err) {
      console.log('无法注册周期同步', err);
    }
  }

  private async handleSync() {
    try {
      const stuffToStore = await this.apiService.getStuff(); // 假设getStuff是异步方法
      await this.indexedDbService.storeStuff(stuffToStore);
      console.log('数据存储成功');
    } catch (err) {
      console.error('同步处理失败', err);
    }
  }
}

方案二：直接在Service Worker里完成同步逻辑（无需Angular服务） #

如果你的同步逻辑不需要依赖Angular服务（比如直接用fetch请求后端、操作IndexedDB），可以直接在Service Worker里完成：

/// <reference lib="webworker" />

declare const self: ServiceWorkerGlobalScope;

self.addEventListener('periodicSync', (event: PeriodicSyncEvent) => {
  if (event.tag === 'download-stammdaten') {
    event.waitUntil(
      fetch('/api/stuff')
        .then(res => res.json())
        .then(stuff => {
          // 直接在Service Worker里操作IndexedDB
          return new Promise((resolve, reject) => {
            const openRequest = self.indexedDB.open('MyDatabase');
            openRequest.onsuccess = (e) => {
              const db = (e.target as IDBOpenDBRequest).result;
              const transaction = db.transaction('stuffStore', 'readwrite');
              const store = transaction.objectStore('stuffStore');
              store.put(stuff);
              transaction.oncomplete = resolve;
              transaction.onerror = reject;
            };
            openRequest.onerror = reject;
          });
        })
        .catch(err => console.error('同步失败', err))
    );
  }
});

关键注意点 #

• Service Worker是独立线程，和主线程完全隔离，不能直接访问Angular的依赖注入系统或服务实例。
• 所有Service Worker里的异步操作必须用event.waitUntil()包裹，确保Service Worker不会在操作完成前终止。
• 周期同步需要HTTPS环境（localhost除外），且浏览器支持PeriodicSync API（目前Chrome等Chromium内核浏览器支持）。

内容的提问来源于stack exchange，提问作者dturnschek