registration.showNotification 不是一个函数

Question

我正在使用serviceworker-webpack-plugin在我的 reactjs 应用程序中创建一个服务工作者。

我已经按照示例在主线程中注册了服务工作者。我了解到这Html5 Notification不适用于 Android chrome，所以我使用registration.showNotification('Title', { body: 'Body.'});而不是new Notification('...')推送通知。但是当我在桌面 chrome 上测试它时，它抛出了这个错误

registration.showNotification is not a function

registration.showNotification 是否仅在 Android chrome 上可用而在桌面上不可用？

public componentDidMount(){

    if ('serviceWorker' in navigator &&
        (window.location.protocol === 'https:' || window.location.hostname === 'localhost')
    ) {
        const registration = runtime.register();

        registerEvents(registration, {
            onInstalled: () => {

                registration.showNotification('Title', { body: 'Body.'});
            }
        })
    } else {
        console.log('serviceWorker not available')
    }
}

Answer 1

runtime.register()返回一个 JavaScript Promise，这就是您收到not a function错误的原因，因为 Promise 没有showNotification()方法。

相反，您必须将回调链接.then()到它才能获取实际registration对象（或使用 async/await，这也很酷）。

runtime.register().then(registration => {
    registration.showNotification(...);
})