Service Worker 中的后台同步在 android 上的 chrome 中不起作用

Question

我已将 PWA 添加到角度应用程序中。

下面是 service worker 内部的代码，它监听同步事件。一旦 Service Worker 检测到 Internet 连接，它就会触发此同步事件。

self.addEventListener('sync', function (event) {
 console.log('syncing started.');
event.waitUntil(getAllrecordsAndPost());
});

在组件中：

同步事件注册：

navigator.serviceWorker.ready.then(function(swRegistration) {
      return swRegistration.sync.register('myFirstSync');
    });

这在桌面的 chrome 中工作正常，但在 android chrome 上，后台同步事件不起作用。

仅供参考：我使用的是最新的 chrome 版本 (79)。

编辑：

经过进一步调查，我发现同步事件正在被触发，但在该同步事件中写入了一个获取代码，这给出了错误，这就是后台同步不起作用的原因。下面是侦听同步事件并命中 API 的代码。

 (function () {
        'use strict';

        self.addEventListener('sync', function (event) {
        event.waitUntil(postUrl());
        });

        function postUrl() {
            let url = 'http://mytesturl.com/testAPI';
            let data = {name:'test',age:10};
            fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: data
            }).then((result)=>{
                console.log('successful');
            }).catch((x)=>{
                console.log('error ' + x);
            })
        }
     }());

在控制台中，我收到错误： error TypeError: Failed to fetch

Answer 1

一旦检测到互联网连接，服务工作线程的后台同步就会被触发。

因此，同步事件内的任何内容也将立即执行（发布请求）。无论互联网连接的稳定性如何，为了避免这种情况，我添加了 3 秒的超时。现在它按预期工作。

在 Service Worker 内同步事件监听器：

 self.addEventListener('sync', function (event) {
    event.waitUntil(setTimeout(function(){getAllrecordsAndPost()},3000));
    });