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

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"验证以下内容，

• 请求更正URL
• 代码流在服务工作者安装阶段命中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所述