PWA 离线优先，连接检测策略

Question

我想通过离线优先方法将我的 React 应用程序转变为 PWA，其中：

1. 使用 CacheAPI 缓存静态资源
2. 数据存储在 IndexedDB 中

我想介绍用户在离线模式下创建/更新/删除数据的具体情况。

我想到的场景是：

1. 用户打开应用
2. 从 IndexedDB 加载数据
3. 用户失去连接
4. 用户创建新实体
5. 连接恢复
6. 数据应该发送到服务器

我知道有一个后台同步 API，但它的浏览器支持似乎仍然非常有限，所以我想知道两件事：

1. 检测连接开启/关闭的最佳机制是什么？
2. 这种方法是否意味着客户端为实体生成 guid 并在本地跟踪同步的内容和未同步的内容？

如果有人能对通常的架构概述有所了解，那就太好了。

Answer 1

//ON PAGELOAD  
  window.addEventListener('online', function (e) {
    this.IsOnline = true;
     this.employees = fetchFromLocalIndexDB();
     this.employees.forEach(function (item) {          
      if (item.FlagStatus == Status.Insert) {
         //CALL WEB API AND SEND TO REMOTE DATABASE
         myAPI.Post(url + item);
       });
      //GET ALL EMPLOYEES FROM THE REMOTE SQL DATABASE
        this.employees = myAPI.Get();

      //LOAD LOCAL DATABASE WITH EMPLOYEEES FROM THE REMOTE SQL DATABASE
        loadLocalDatabaseArray(this.employees);
      } 
    }, false);