Angular 6 Service worker 拒绝缓存资产，因为未正确获取 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 获取请求。尽管 fetchLatestManifest returns 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"});

``` 我从 fetch 的 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 作为我的 web/reverse 代理服务器的 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 如何检查被请求文件的路径。它们按从左到右的顺序进行评估。

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

Angular 6 Service worker refuses to cache assets as the ngsw.json is not fetched correctly

service-worker

angular

angular-service-worker

pwa

当前行为

环境