如何实现Angular应用仅在独立PWA模式启用Service Worker？

完全可行，你可以通过运行时检测独立PWA模式来条件注册Service Worker，同时针对性处理更新提示逻辑。以下是具体实现步骤：

1. 检测独立PWA模式 #

浏览器提供两种方式判断当前是否为独立运行的PWA：

• 标准适配（Android/桌面端）：window.matchMedia('(display-mode: standalone)').matches
• iOS兼容（Safari添加到主屏幕场景）：(window.navigator as any).standalone

封装成工具函数：

private isStandalonePWA(): boolean {
  const isStandaloneMedia = window.matchMedia('(display-mode: standalone)').matches;
  const isIOSStandalone = (window.navigator as any).standalone;
  return isStandaloneMedia || isIOSStandalone;
}

2. 条件注册Service Worker #

移除AppModule中ServiceWorkerModule的自动注册（或保留但设置enabled: false），改为在组件初始化时手动控制：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 非独立模式下注销已存在的SW，避免遗留缓存影响
    this.unregisterSWIfNotStandalone();
    // 独立模式下注册SW
    this.registerSWIfStandalone();
  }

  private isStandalonePWA(): boolean {
    const isStandaloneMedia = window.matchMedia('(display-mode: standalone)').matches;
    const isIOSStandalone = (window.navigator as any).standalone;
    return isStandaloneMedia || isIOSStandalone;
  }

  private registerSWIfStandalone(): void {
    if (!this.isStandalonePWA() || !environment.production) return;

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ngsw-worker.js')
        .then(registration => {
          // 仅在独立模式下监听更新事件并提示用户
          registration.addEventListener('updatefound', () => {
            const newWorker = registration.installing;
            newWorker?.addEventListener('statechange', () => {
              if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                // 自定义更新提示逻辑，比如弹窗
                if (confirm('应用已更新，是否刷新获取新版本？')) {
                  window.location.reload();
                }
              }
            });
          });
        })
        .catch(err => console.error('SW注册失败:', err));
    }
  }

  private unregisterSWIfNotStandalone(): void {
    if (this.isStandalonePWA()) return;

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(regs => {
        regs.forEach(reg => reg.unregister());
      });
    }
  }
}

3. 保留原有缓存配置 #

ngsw-config.json的缓存策略无需修改，仅在SW注册生效后才会触发，普通浏览器模式下完全无影响。

核心效果 #

• 普通浏览器：不会注册Service Worker，无缓存、无更新提示，完全符合你的需求
• 独立PWA：正常注册SW，支持离线功能，且仅该场景下显示更新提示
• 兼容性：覆盖Android、iOS、桌面端的独立PWA运行场景

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