Question

我有一个SSR Angular应用，正在尝试将其转换为PWA。我希望它可以在服务器端呈现SEO及其提供的“快速优先呈现”。

与SSR结合使用时，PWA模式可以正常工作，但是一旦加载了应用程序后，当我们刷新它时，就会加载客户端索引HTML文件而不是服务器端呈现的页面。

我已经研究了ngsw-worker.js的代码，并且看到了：

// Next, check if this is a navigation request for a route. Detect circular
// navigations by checking if the request URL is the same as the index URL.
if (req.url !== this.manifest.index && this.isNavigationRequest(req)) {
    // This was a navigation request. Re-enter `handleFetch` with a request for
    // the URL.
    return this.handleFetch(this.adapter.newRequest(this.manifest.index), context);
}

我无法控制此文件，因为它来自框架，并且不向开发人员公开。是否有人为此找到解决方案或解决方法？

Answer 1

我找到了一个可行的解决方案，navigationUrls的{{1}}属性包含一个包含或排除的导航URL列表（带有感叹号），如the documentation中所述。

然后我这样配置它：

ngsw-config.json

通过这种方式，无论URL是什么，都没有URL重定向到"navigationUrls": [ "!/**" ]，并且在首次请求（或刷新）该应用程序时，服务器端呈现的应用程序开始工作。

Answer 2

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "appData": {
    "version": "1.6.0",
    "changelog": ""
  },
  "index": "../server.js",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ],
        "urls": [
          "https://fonts.googleapis.com/**"
        ]
      }
    }
  ]
}

该索引在vs代码中被描述为“指定用作索引页面的文件以满足导航请求。通常为'/index.html'。”

因此，由于ssr使用server.js文件接收请求，因此我决定进行“ index”：“ ../server.js”，以便它退出dist / browser文件夹并进入dist文件夹本身中的server.js文件

如何使Angular Universal和PWA协同工作？

2 个答案: