0

使用 webpack 作为构建系统的 react PWA。对于服务工作者，我们使用的是工作箱版本 2.1.2。

  • 拥有一个以 JSON 响应的 GET api http://localhost:5000/dist/abc/123/。注册了路线

    'use strict';
 importScripts('workbox-sw.prod.js');
 const workboxSW = new WorkboxSW({
    clientsClaim: true,
    skipWaiting: true
 });
 workboxSW.LOG_LEVEL = 'debug';
 workboxSW.precache([]);
 workboxSW.router.registerRoute(
          'http://localhost:5000/dist/abc/123',
           workboxSW.strategies.staleWhileRevalidate({
                 cacheName: 'apis',
                 cacheExpiration: {
                     maxEntries: 50,
                     maxAgeSeconds: 30 * 24 * 60 * 60
                 },
                 cacheableResponse: {statuses: [0, 200]}
            })
         );
self.addEventListener('install', () => {
   self.skipWaiting();
});

确保加载新的服务人员。当 API 调用返回状态为 200 时，缓存存储下没有创建缓存api。因此它也不能离线工作，请参阅No cache "apis" 验证以下内容，

  • 请求更正 URL
  • 代码流在服务工作者安装阶段命中 registerRoute
  • 没有错误消息。调试消息也没有给出任何线索。有什么方法可以启用更多调试吗？
  • 服务工作者在适当的范围内注册，调试消息Service Worker registration successful with scope: http://localhost:8081/dist/，

接口：http://localhost:5000/dist/abc/123

调用的 API，http://localhost:5000/dist/abc/123/. 请注意，它是跨站点调用，调用的基本页面是http://localhost:8000. 如前所述，API 调用成功并返回状态为 200 的响应。

我对 serviceworker/workbox 很陌生。对此的任何指示都非常感谢。

4

1 回答 1

1

您应该尝试使用 https 运行您的应用程序，并在您的选项中传递 cors 参数

如 mdn 文档中所述https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

于 2017-12-27T06:22:58.487 回答