Angular PWA离线IndexDB存储及在线API同步问题求助

问题1：离线状态下无法将数据存储至IndexDB #

• 排查Service Worker拦截逻辑：确认ngsw-config.json中的dataGroups和assetGroups仅配置API请求与静态资源的缓存规则，不要误拦截IndexDB的本地操作——IndexDB是浏览器本地存储机制，无需通过网络请求，Service Worker不应干预其读写流程。
• 使用主线程处理IndexDB操作：避免在Service Worker线程中直接操作IndexDB，封装独立的本地存储服务在主线程执行存储逻辑，示例代码：

  import { Injectable } from '@angular/core';
  import { openDB, DBSchema, IDBPDatabase } from 'idb';
  
  interface OfflineDB extends DBSchema {
    pending_sync: {
      key: number;
      value: { payload: any; created_at: number };
    };
  }
  
  @Injectable({ providedIn: 'root' })
  export class OfflineStoreService {
    private db: Promise<IDBPDatabase<OfflineDB>>;
  
    constructor() {
      this.db = openDB<OfflineDB>('angular_pwa_offline', 1, {
        upgrade(db) {
          db.createObjectStore('pending_sync', { keyPath: 'key', autoIncrement: true });
        },
      });
    }
  
    async saveForSync(payload: any): Promise<void> {
      const instance = await this.db;
      await instance.add('pending_sync', { payload, created_at: Date.now() });
    }
  }
  

• 验证浏览器环境：确认用户浏览器未禁用本地存储权限，且支持IndexDB（现代主流浏览器均支持）。

问题2：在线后同步IndexDB数据至API #

• 监听网络状态并触发同步：通过window:online事件监听网络恢复，结合初始化检查实现自动同步，示例代码：

  import { Injectable, HostListener } from '@angular/core';
  import { OfflineStoreService } from './offline-store.service';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({ providedIn: 'root' })
  export class SyncManagerService {
    constructor(
      private offlineStore: OfflineStoreService,
      private http: HttpClient
    ) {
      // 应用初始化时检查网络状态，在线则立即同步
      if (navigator.onLine) {
        this.syncPendingData();
      }
    }
  
    @HostListener('window:online')
    async onNetworkOnline() {
      await this.syncPendingData();
    }
  
    private async syncPendingData() {
      const db = await this.offlineStore['db']; // 需在OfflineStoreService中暴露db实例或封装查询方法
      const pendingItems = await db.getAll('pending_sync');
  
      for (const item of pendingItems) {
        try {
          // 替换为你的实际API请求
          await this.http.post('/api/sync', item.payload).toPromise();
          // 同步成功后删除本地缓存数据
          await db.delete('pending_sync', item.key);
        } catch (err) {
          // 同步失败，暂停流程并设置重试机制
          console.error('数据同步失败:', err);
          setTimeout(() => this.syncPendingData(), 60000);
          break;
        }
      }
    }
  }
  

• 处理同步冲突：若API端有数据版本控制，同步时需携带本地数据的时间戳，与服务器数据版本比对，避免覆盖最新数据。
• 兜底重试机制：可在同步失败时标记数据状态，或设置指数退避重试策略，确保最终数据能同步成功。

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