时间戳

首页 > 解决方案 > 如何让 Angular Universal 和 PWA 协同工作？

javascript - 如何让 Angular Universal 和 PWA 协同工作？

问题描述

我有一个 SSR Angular 应用程序，我正在尝试将其转换为 PWA。我希望它为 SEO 和它提供的“快速首次渲染”在服务器端渲染。

PWA 模式在与 SSR 结合使用时可以正常工作，但是一旦加载应用程序，当我们刷新它时，会加载客户端索引 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);
}

我无法控制这个文件，因为它来自框架并且没有暴露给开发人员。有没有人为此找到解决方案或解决方法？

标签： javascriptangularprogressive-web-appsangular-universalangular-service-worker

解决方案

我找到了一个可行的解决方案，该navigationUrls属性ngsw-config.json包含包含或排除的导航 URL 列表（带有感叹号），如文档中所述。

然后我像这样配置它：

"navigationUrls": [
    "!/**"
]

这样index.html，无论 URL 是什么，当应用程序第一次被请求（或刷新）时，都不会重定向到服务器端呈现的应用程序。

更进一步，由 service worker 管理的三种 URL 是：

  • 非导航 URL：由 service worker 缓存并在生成的ngsw.json文件中列出的静态文件及其相应的哈希值
  • Navigation URLs：默认重定向到，如果使用配置则index.html转发到服务器"!/**"
  • GET对后端的请求：转发到后端

为了区分 aGET XMLHttpRequest和导航请求，服务工作者使用Request.mode属性和包含导航时和请求后端时Accept包含的标头。text/htmlapplication/json, text/plain, */*

编辑：这实际上不是一个好习惯，原因有两个：

  • 根据网络质量，不保证服务器端版本的渲染速度会比缓存的浏览器版本快
  • 它打破了“后台更新”机制。事实上，服务器端呈现的应用程序将始终引用最新版本的 JavaScript 文件

有关这方面的更多详细信息，请查看 Angular 团队成员对我的功能请求的回答：https ://github.com/angular/angular/issues/30861

更新 v11.0.0

Angular 现在有一个navigationRequestStrategy选项，允许优先考虑导航的服务器请求。更新日志的摘录：

service-worker : 添加导航请求首选网络选项 ( #38565 ) ( a206852 ), closes #38194

要明智地使用！此警告出现在文档中：

该freshness策略通常会导致向服务器发送更多请求，这会增加响应延迟。建议您尽可能使用默认性能策略。

推荐阅读