Question

使用webpack作为构建系统的反应PWA。对于服务工作者，我们使用workbox版本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时，在缓存存储下没有创建缓存 apis 。因此它也不能脱机工作，请参阅No cache "apis" 验证了以下内容，

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

API：http://localhost:5000/dist/abc/123

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

我对serviceworker / workbox很新。任何方向都非常感谢。

Answer 1

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

如mdn docs https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

中所述

使用工作箱启用服务工作者

1 个答案: