在服务工作者中收听“同步”事件时未触发回调答案

【问题标题】：Call Back not fired when listening to 'sync' event in service worker在服务工作者中收听“同步”事件时未触发回调
【发布时间】：2019-06-12 19:07:52
【问题描述】：

我正在收听我的 service worker 文件中的 'sync' 事件，但没有任何反应。甚至我的console.log 也不会触发

我确保我在 waitUntil() 函数中返回了一个承诺。

这就是我的 main.js 文件的样子

finalOrder.addEventListener('submit', function(event) {
    event.preventDefault();
    var body = domArrayToObject(event.target)
    showForm();
    if ('serviceWorker' in navigator && 'SyncManager' in window) {
        (navigator.serviceWorker.ready
        .then(worker => {
            return worker.sync.register('write-req')
            .then(function(s){
                localStorage.setItem('req', JSON.stringify(body));
            }).catch(err => console.log(err))
        }).catch(err => console.log(err)))
    } else {
        sendMails(body);
    }
})

这是我的 sendMails 函数（urlstring 是一个 firebase 函数端点）

function sendMails(body) {
     return (Promise.all([fetch('urlstring', {
        method: 'POST',
        body: JSON.stringify(body),
        headers:{
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(response => console.log(res))
    .catch(err => console.log(err)),
    fetch('urlstring', {
        method: 'POST',
        body: JSON.stringify(body),
        headers:{
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(response => console.log(res))
    .catch(err => console.log(err))]).catch(err => console.log(err)))
}

这是我的服务工作者文件

self.addEventListener('sync', ev => {
    console.log('[Yaay Internet Connection]', ev)
    if (ev.tag == 'write-req') {
        console.log('[Service Worker] Syncing new Posts');
        var body = localStorage.getItem('req');
        ev.waitUntil(sendMails(body)
        .then((res) => {
            self.registration.showNotification('Order has been placed!!!', 
            {
                body: 'Your Order has been placed. You will hear from us soon',
                image: '',
                icon: '',
                badge: '',
                actions: [
                    { action: 'add', title: 'add', icon: ''}
                ]
            })
        }));
    }
})

我想监听“同步”事件并触发回调。如果已经建立连接或重新建立连接，则将请求发送到端点。

【问题讨论】：

需要注意的一点是您不能在服务人员中使用localStorage。 Service Worker 仅支持异步 API。

标签： javascript service-worker progressive-web-apps

【解决方案1】：

原来我所要做的就是使用 indexedDB

【讨论】：