Question

我正在使用swPrecache来加载我的PWA的静态资产，以支持离线模式。它工作得很好。我的设置类似于：

https://www.myexampledomain.com/myapp/加载静态index.html，然后加载使用swPrecache加载静态资产，如JS，Images，CSS等。请注意，这些都是从同一个域加载的，例如www.myexampledomain.com/myapp/js/file1.js

但我的swprecache列表包含相当数量的文件，并且需要一些时间才能在较慢的互联网连接上下载。仅供参考，我已经将服务工作者注册延迟到“加载”事件。

所以这就是我现在正在尝试的。我需要有人来验证这是否可行：

https://www.myexampledomain.com/myapp/像以前一样加载静态html文件。
让swPrecache拦截转到app域的静态请求（例如https://www.myexampledomain.com/myapp/js/file1.js），而是将这些请求提取到CDN端点？（例如https://some.cloudfront.com/myapp/js/file1.js）。
下载后，swPrecache会继续正常工作。

所以基本上我希望让swPrecache代理静态资产请求到CDN，以便在初始加载期间更快地下载。

对此的任何评论/指示都会有所帮助。

Answer 1

您可以使用assets/中的stripPrefixMulti option更改写入服务工作文件的网址。但是，它是相当暴力的，所以如果有一个共同前缀由CDN提供的所有资产共享，它会有所帮助。

例如，如果将从CDN提供的所有内容都存储在本地https://my-cdn.com/assets/目录中，并且CDN上的路径将以{ stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'}, // ... other sw-precache options... }开头，则可以使用

{{1}}

您希望确保在本地文件作为构建过程的一部分发生更改时，CDN上的文件副本也会立即更改，否则您将面临生成版本控制信息的风险因为本地文件与CDN上的内容不同步。

Answer 2

是的，您可以使用

{
   stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'},
   // ... other sw-precache options...
 }

但我相信你会遇到新的CORS问题。我也在努力

swPrecache和CDN作为代理？

2 个答案: