Angular 6 Service worker 拒绝缓存 Assets ，因为未正确获取 ngsw.json

Question

当前行为

我做了 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)

我做了一些研究，发现有问题/ngsw.json?ngsw-cache-bust=0.08769372894975769 GET 请求。尽管 fetchLatestManifest 返回 200 状态代码，响应实际上不是 JSON ，而是 index.html

的无脚本版本

您可以看到 /ngsw.json?ngsw-cache-bust=0.08769372894975769 的响应状态为 200

但实际响应不是所需的 JSON

我尝试在 chrome 中复制为获取选项实际的```

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"});

```我从获取的 URL 部分删除了 ?ngsw-cache-bust=0.7927584506157848，我可以看到响应是 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 的内容

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

环境

Angular 版本:6.0.0

浏览器:- [x] Chrome(桌面)版本 67

Answer 1

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

我在 Nginx 的虚拟服务器配置中解决了我的问题。我从此更改了我的位置 block :

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 如何检查被请求文件的路径。它们按从左到右的顺序进行评估。