4

我正在开发一个有角度的 PWA 应用程序。所以我添加了一个 npm 包ng add @angular/pwa。它添加成功，没有错误。

生成的清单工作正常。但我面临着服务人员的问题。当应用程序上线时，它会存储所有缓存（请参阅附件），但每当应用程序下线时，它不会提供来自服务工作者的请求，而是显示错误 - HTTP ERROR 504

这是我的ngsw-config.json -

   {
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": ["assets/images/favicon.ico", "/index.html", "/*.css", "/*.js"]
        }
      },
      {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/assets/**",
            "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
          ]
        }
      }
    ]
  }

任何帮助将是可观的......

在此处输入图像描述

在此处输入图像描述

4

2 回答 2

12

为什么会出现错误 504？

504 错误不是来自您的服务器，而是来自充当代理的服务人员。

您在 PWA 中发出的每个 HTTP 请求都会通过服务工作者 (SW)，可能会发生两件事：

  • 如果请求的资源在 SW 缓存上，则返回缓存的内容
  • 如果请求的资源不在 SW 缓存中，则 SW 向服务器执行请求

因此，如果您处于离线状态并且资源不在 SW 缓存中，则 SW 将尝试向服务器发出请求，但是，当您处于离线状态时，该请求将失败，并且 SW 将返回 504 错误。您可以在您发布的最后一张图片中看到这实际上正在发生：顶部的 http 响应是您从 SW 获得的带有错误 504 的响应，下面的请求（请参见左侧的轮子图标）是 SW 执行的请求到服务器并失败。

为什么缓存不匹配？

现在，您可能想知道，为什么 SW 没有在其缓存中找到资源？

嗯，Angular Service Worker 是一个很棒的工具，但它非常敏感，以至于最小的改变就会使它不起作用。您需要知道的第一件事是它使用的缓存机制。基本上，当您构建 Angular 应用程序时，所有生成的文件都有一个关联的哈希值，该哈希值是用每个文件的内容计算的（检查生成的ngsw.json文件）。当您的应用程序运行时，软件会将此哈希（在编译时计算）与请求资源的哈希（在运行时计算）进行比较。

许多用户报告此机制存在问题，一些常见原因是：

  • 缩小/丑化 JS、CSS 和 HTML 文件的中间服务（如 Cloudflare）
  • 修改某些文件的部署管道上的自动化脚本
  • 以文本模式而不是二进制模式传输文件的 FTP 客户端（例如 FileZilla）（更改其编码、行尾等）

所有这些都会对文件内容产生更改，因此 SW 将计算与编译时计算的哈希值不同的哈希值。这将导致缓存不匹配，您的应用将无法离线运行（您将收到 http 504 响应）。

附加信息

请注意，一些用户报告说该应用程序有时会离线或在某些特定浏览器中工作。一种可能的解释是，在这些情况下，浏览器级别的缓存机制正在起作用，而不是 SW 缓存本身。

要进一步调试 Angular 软件，您可以在/ngsw/state.

我建议你阅读Angular service worker 的文档和这个讨论。

于 2020-07-07T20:29:59.027 回答
4

正如我们所评论的，您的问题与您的网络服务器或代理 nginx 有关。由于您与 nginx 正确连接，因此您的浏览器中未启用 PWA 离线功能。在了解了您的问题后，我发现了一些您将在 nginx 中使用的配置，以允许 PWA 在离线情况下正常运行。

在google 开发人员中，您可以在 nginx 配置文件中添加这些行，以允许 PWA 行为：

location ~* (service-worker\.js)$ {
  # tells browsers the service worker scope
  add_header 'Service-Worker-Allowed' '/app';
}

我还在Philip Heltweg 博客中找到了这个配置文件，以允许 PWA 的完整行为。

server {
    listen 80;
    server_name _;

    gzip on;
    gzip_types text/html text/css application/javascript;

    root /var/www/;
    index index.html;

    # Force all paths to load either itself (js files) or go through index.html.
    location /index.html {
        try_files $uri /index.html;

        add_header Cache-Control "no-store, no-cache, must-revalidate";    
    }

    location / {
        try_files $uri /index.html;

        expires 1y;
        add_header Cache-Control "public";
    }
}

好吧，最后，我找到了一个有趣的 docker，如果你愿意使用 docker（当然），以简单的方式运行一个配置正确的 nginx Web 服务器。看看这个。

我希望这三种不同的方法可以解决您的问题。让我知道我是否可以提供更多帮助！

于 2020-06-12T16:25:39.650 回答