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

Question

我想使用离线优先方法将我的react应用程序转换为PWA，

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

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

我想到的场景是：

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

我知道有一个Background Sync API，但是它对浏览器的支持仍然非常有限，所以我想知道两件事：

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

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

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);