Angular Universal：添加服务工作者不允许页面的特定标题

Posted 2023-03-07

【中文标题】Angular Universal：添加服务工作者不允许页面的特定标题

【英文标题】：Angular Universal: Adding a service worker doesn't allow specific titles for pages

【发布时间】：2019-09-09 22:06:51

【问题描述】：

我有一个 Angular Universal 应用，通过在 CLI 上使用这个调用

ng 添加@nguniversal/express-engine --clientProject myapp

我生成了一个 AboutComponent。我使用来自 '@angular/platform-b​​rowser' 的 Title 给这个 AboutComponent 赋予它自己的标题。

所以这行得通！在我使用的命令行上

npm run build:s-s-r

npm run serve:s-s-r

然后检查 Chrome Dev Tools 中的 View Source 并查看 about 页面的不同标题。

然后我添加一个服务工作者使用

ng 添加@angular/pwa

我现在再次运行 npm run build:s-s-r 和 npm run serve:s-s-r 关于页面的 Chrome 开发工具中的 View Source 显示索引中的标题，而不是 AboutComponent 的特定标题。

有没有办法让 Universal 保留每个页面的单独标题并拥有一个服务人员？

这是我的 github：https://github.com/flocela/univ-servworker

谢谢。

编辑：这是我的 about.component.ts 文件：

import  Component, OnInit  from '@angular/core';
import Title from '@angular/platform-browser';

@Component(
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.sass']
)
export class AboutComponent implements OnInit 
  constructor(private title: Title)  

  ngOnInit() 
    this.title.setTitle('About');
  

【问题讨论】：

您是否尝试在每个控制器的 init 事件中设置页面标题？

@FarukT 我在 about.component.ts 中设置了标题。这是我除了应用程序组件之外的唯一组件。我已将代码添加到我的问题中。

只是想确认一下，您是否尝试注销 Service Worker 然后重新注册？看看它是否有效？

取决于 Service Worker 可用于缓存页面这一点。因此，服务人员可能持有不同于新数据的数据。一次无效/注销它可能会显示更新的结果。当然，注销不是显示更新数据的正确方式。但通过这种方式，我们实际上是在尝试调查问题的根本原因。

嗨@SumitParakh。您的意思是使用 Chrome 开发工具注销 service worker 吗？当我在 Chrome 开发工具中取消注册服务人员时，“关于”标题确实显示在查看源代码中。除了再次加载应用程序之外，我没有看到如何再次注册 Service Worker。

【参考方案1】：

由于 Service Worker 已经在浏览器上运行，因此如果您查看“view-source”，它将返回本地缓存 index.html 文件而不是 s-s-r。基本上您的 s-s-r 可以工作，但您无法在 PWA 缓存的浏览器 bcz 中查看它。使用“Post man”或 curl 命令或任何 REST 客户端来获取已编译的 s-s-r 文件。它应该返回预期的视图源。

要以更好的方式进行验证，只需尝试在任何社交媒体网站（如 FB）中分享您的页面链接（希望它是实时的），您应该会在链接预览中看到标题。

【讨论】：

谢谢苏米特！您已经回答了这个问题，但我想知道搜索引擎是否会查看浏览器查看源页面或 curl 返回的内容。

对于可能遇到此问题的其他人。我使用的 curl 命令是 curl localhost:4000/about .

@flobacca。您可能还必须添加一些元标记以获得更好的搜索引擎可见性。看看这个了解更多细节：- blog.getresponse.com/…