Question

我有 Angular 应用程序正在使用 SSR 和 PWA 在 Angular 9 上运行。它在 Heroku+ cloudflare 上运行。

当我尝试在索引页面上通过 Facebook/Google 登录时，angular 会出现请求超时错误。

示例：

打开索引页，https://coursesity.com
执行社交登录
它重定向到 https://coursesity.com/?token=avafafdaregasafag
Angular 出现超时错误。
用户无法登录

但是如果我执行社交登录，使用带有 URL+前缀的其他页面，它可以正常工作。

示例：

打开https://coursesity.com/section/development
执行社交登录
它重定向到 https://coursesity.com/section/development/?token=avafafdaregasafag
用户登录成功。

在实施 PWA 和 Service Worker 之前，它运行良好。

这里有什么问题？尤其是索引页。

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/*.html",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }],
    "dataGroups": [
      {
        "name": "api",
        "urls": ["/api/**"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "1h",
          "timeout": "5s"
        }
      }
    ]
}

Manifest.json

  "name": "Coursesity",
  "short_name": "Coursesity",
  "description": "https://coursesity.com",
  "theme_color": "#5e5e9a",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/?utm_source=a2hs",
  "start_url": "/?ref=pwa",
  "icons": [
    {
      "src": "assets/images/favicon/logo-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/images/favicon/logo-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/images/favicon/logo-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Answer 1

粗略看一下，这似乎与在应用构建后更改 SSR [LOG]: "Gob!", 3, 2 [LOG]: "Titan toot!", 208, 246 [LOG]: "Gob!", 5, 1 [LOG]: "Titan toot!", 206, 254 [LOG]: "Gob!", 3, 1 [LOG]: "Titan toot!", 210, 262 [LOG]: "Titan toot!", 168, 229 [LOG]: "Gob!", 5, 2 [LOG]: "Gob!", 5, 2 [LOG]: "Titan toot!", 207, 236 相关。您可以通过 index.html 中看到的错误推断出这一点（有关 Angular SW 调试 API 的更多详细信息，请参阅 here）：

/ngsw/state

简而言之，软件会在构建后计算所有资产（即文件）的哈希值。这些哈希值存储在 Driver state: EXISTING_CLIENTS_ONLY (Degraded due to: Hash mismatch (cacheBustedFetchFromNetwork): https://coursesity.com/index.html: expected 4e46d6b5588a4b7358aa32d9240776f02de026c5, got 8c24eec826b40fd30b5c17973a851ffe2f65f4a8 (after cache busting) Error: Hash mismatch (cacheBustedFetchFromNetwork): https://coursesity.com/index.html: expected 4e46d6b5588a4b7358aa32d9240776f02de026c5, got 8c24eec826b40fd30b5c17973a851ffe2f65f4a8 (after cache busting) at PrefetchAssetGroup.<anonymous> (https://coursesity.com/ngsw-worker.js:96:123) at Generator.next (<anonymous>) at fulfilled (https://coursesity.com/ngsw-worker.js:55:98)) Latest manifest hash: 59971a1ef1069cc04a945808cc5f4fc4a1e1a85b Last update check: 3m31s602u（基于 ngsw.json 生成）中。当它获取文件时，它会再次对它们进行散列并将实际散列值与存储在 ngsw-config.json 中的散列值进行比较。

如果哈希不匹配，它知道它不能信任它的配置并进入降级模式（它不为新客户端提供服务）。

听起来就像您设置构建应用程序的方式一样，SSR 在软件计算其哈希并将其存储在 ngsw.json 后最终修改了 index.html。

一个简单的解决方法是在您使用以下命令修改 ngsw.json 后重新构建 SW 清单 (ngsw.json)：

index.html

最后，让我说（如果您使用的是 Angular CLI）默认的 PWA 和 SSR 设置应该是开箱即用的。如果情况并非如此，如果您能提供最少的复制品，我很乐意仔细研究一下（例如，我可以自己检查和构建存储库以查看问题）。

Angular 9 PWA 社交登录在 start_url / 索引页面上重定向问题

1 个答案: