Service Worker 没有使用缓存、Aws S3 + CloudFront?

Question

Service Worker 没有使用缓存

项目场景:

项目基于vite-plugin-pwa，存储和部署使用 aws s3 和 cloudfront

aws s3: 文件存放在 /test/dist/ 目录下
cloudfront: 配置了域名并将index.html指向了 /test/dist/index.html

registerSW.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/test/dist/sw.js', { scope: '/test/dist/' })
  })
}

现象:

通过 Application -> Storage -> Cache Storage 可以查看到已经缓存了文件资源，但刷新页面通过 Network 查看文件并没有来自 Service Worker

希望：
刷新页面资源通过 Service Worker.

注意项目如果直接部署在服务器上表现正常，目前迁移至AWS S3 和 Cloudfront出现异常

已解决:

修改scope为 /，同时cloudfront添加一条行为，针对 sw.js 配置相应头Service-Worker-Allowed: /

Answer 1

已解决

修改 scope 作用域为 /，同时cloudfront 要针对sw.js 设置请求头 Service-Worker-Allowed: /

Answer 2

对于请求来说，不关心你服务器资源上面的存储路径，只关心请求资源定位的路径，你用的 /index.html 访问资源的时候是不是页面中相对资源也都指向了根路径，这样即使你在 /test/dist/上面存了一份，在这个页面也用不到。