时间戳

首页 > 解决方案 > Angular 6 Service Worker 拒绝缓存资产，因为 ngsw.json 未正确获取

angular - Angular 6 Service Worker 拒绝缓存资产，因为 ngsw.json 未正确获取

问题描述

当前行为

我做到了ng add @angular/pwa，我在生产构建中遇到了这个错误

    Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
        at Driver.<anonymous> (ngsw-worker.js:2297)
        at Generator.next (<anonymous>)
        at fulfilled (ngsw-worker.js:1752)

截图来自 2018-07-12 16-13-32 我做了一些研究，发现 /ngsw.json?ngsw-cache-bust=0.08769372894975769GET 请求存在问题。虽然 fetchLatestManifest 返回 200 状态码，但响应实际上不是 JSON ，而是它的无脚本版本index.html

您可以看到响应状态为 200/ngsw.json?ngsw-cache-bust=0.08769372894975769 截图来自 2018-07-12 16-18-33

但实际响应不是所需的 JSON 截图来自 2018-07-12 16-19-14

我尝试在 chrome Actual ``` 中复制作为 fetch 选项

fetch("https://officehawk.com/ngsw.json?ngsw-cache-bust=0.7927584506157848", {"credentials":"omit","headers":{},"referrer":"https://officehawk.com/ngsw-worker.js","referrerPolicy":"no-referrer-when-downgrade","body":null,"method":"GET","mode":"cors"});

``` 我?ngsw-cache-bust=0.7927584506157848从 fetch 的 URL 部分中删除了，我可以看到响应是 JSON。

编辑了```

fetch("https://officehawk.com/ngsw.json", {"credentials":"omit","headers":{},"referrer":"https://officehawk.com/ngsw-worker.js","referrerPolicy":"no-referrer-when-downgrade","body":null,"method":"GET","mode":"cors"});

``` 这样你现在就可以看到 ngsw.json 的内容了 截图来自 2018-07-12 16-35-24

我怀疑它必须在这个函数中处理？ https://github.com/angular/angular/blob/0b4d85e9f19246af68a75140afc4db3d97f9ddfd/packages/service-worker/worker/src/driver.ts#L645

环境

角度版本：6.0.0

浏览器：- [x] Chrome（桌面）版本 67

标签： angularservice-workerpwaangular-service-worker

解决方案

我最近在使用 Nginx 作为我的网络/反向代理服务器的 Angular PWA 上遇到了这个错误。

我在 Nginx 的虚拟服务器配置中解决了我的问题。我从这里更改了我的位置块：

location / {
    root $root_path;
    index index.html;
    try_files $uri$args $uri$args/ index.html =404;

    error_page 404 =200 /index.html;
}

对此：

location / {
    root $root_path;
    index index.html;
    try_files $uri $uri$args $uri$args/ index.html =404;

    error_page 404 =200 /index.html;
}

不同之处在于 try_files 行。基本上，这一行告诉 Nginx 如何检查被请求文件的路径。它们按从左到右的顺序进行评估。

推荐阅读