Question

我正在尝试让我的service-worker.js在新的服务工作者上载时执行skipWaiting。但是，即时通讯无法成功执行此操作。请注意，我的主要框架是reactjs

尝试按照本指南（https://deanhume.com/displaying-a-new-version-available-progressive-web-app/）进行修改，使代码适合我的，但也没有成功。

目前，Im仅能接收新服务工作者可用的通知，这也在浏览器开发工具下得到了观察和确认。

这是我的代码： index.js

import "@babel/polyfill";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

function check() {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js').then(reg => {
            reg.addEventListener('updatefound', () => {
                // A wild service worker has appeared in reg.installing!
                const newWorker = reg.installing;
                newWorker.addEventListener('statechange', () => {
                    // Has network.state changed?
                    switch (newWorker.state) {
                        case 'installed':
                            if (navigator.serviceWorker.controller) {
                                // new update available
                                window.serviceWorkerCallback('new_version')
                                newWorker.postMessage({ action: 'skipWaiting' });
                                console.log("New Version!")
                            }
                            // No update available
                            break;
                    }
                });
            });
        });
    };
}

check();

window.serviceWorkerCallback('new_version')中的

index.js激活_serviceWorkerCallback下的App.js功能，该功能触发了我的重新加载命令。刷新页面后，我可以看到新的服务程序仍在等待。下面是我的重载命令代码：

App.js：

    _serviceWorkerCallback = (state) => {
        if (state === 'new_version') {
            this.setState({
                hasNewVersion: true
            });
        }
    }

    _renderNewVersion = () => {
        return (
            <Snackbar
                style={{ marginBottom: 16 }}
                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
                open={this.state.hasNewVersion}
                message={<span>A new version is available</span>}
                action={<Button color="secondary" size="small" onClick={this._handleRefresh}>Refresh</Button>}
            />
        );
    }

    _handleRefresh = (value) => {
        this.setState({
            hasNewVersion: false,
        });
        window.location.reload();
    }

这里是service-worker.js：

self.addEventListener('message', event => {
    console.log('Skipping');
    if (event.data.action === 'skipWaiting') {
        self.skipWaiting();
    }
});

self.addEventListener('fetch', function (event) {
    console.log('Fetching');
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});

_handleRefresh = (value) => {
    this.setState({
        hasNewVersion: false,
    });
    window.location.reload();
}

我希望newWorker.postMessage({ action: 'skipWaiting' });会触发event.data.action === 'skipWaiting'，但是什么也没有发生，并且从控制台未观察到日志消息。

两个文件都位于同一目录下。

Answer 1

在您链接的教程中，代码包含一个重新加载页面的调用，但我看不到您的页面。

重新加载很重要，因为一旦页面调用注册，它就可使新激活的服务工作程序成为活动工作程序。或者，您可以使用Clients.claim()来让您的新服务人员立即控制现有页面。

service-worker.js没有收到消息

1 个答案: