我正在为我的网站创建一个PWA。
这是一个使用jquery构建的多页网站。现在我创建了一个app shell，它包含一个站点的公共头。我的网站有很好的搜索引擎优化排名，通常排名前三。
现在，当我想从页面A转到页面B时，我希望预加载标题并显示加载程序，直到从服务器收到页面B的数据。 我仍在使用jquery，因为大多数模块已经内置，我不想重建它们。
现在我能想到的唯一解决方案是使用ajax调用或使用前端的路由。我对这些解决方案几乎没有疑问和看法，想知道我是否正确。
1）使用Ajax - 当调用页面B时，响应中的HTML将只有标题和加载器以及一个js文件，其中将有ajax代码来加载页面上的数据。 缓存后，将从缓存中获取包含标头和加载器的HTML，并调用ajax调用数据。
如果我错了，请纠正我。
现在，我看到的问题是，考虑到我有第3页并希望它具有相同的功能，为此，我将在缓存中再次存储相同的标题。
2）我听说前端的路线不是SEO友好或需要额外的努力才能使它们对SEO友好。因此我不希望我的排名受到影响。此外，我不知道在Jquery或Core Javascript中为我处理一切的好路由库。
任何帮助都将受到高度赞赏。我现在非常困惑，所以任何正确方向的指导或参考都会有所帮助。
答案 0 :(得分：5)
有关this blog post中可能选项的一些指导。
鉴于您当前的设置以及您声明的不要过多地改造您的体系结构的愿望，我建议您尝试添加一个分别缓存页眉，页脚和动态内容的服务工作者实现。然后，服务工作者可以连接标题（来自缓存）+内容主体（通过fetch()或可能从缓存中检索）+页脚，并返回完整的HTML文档作为响应。
您需要开始将部分HTML标题+页脚作为具有可预先缓存的唯一网址的资源公开，您现在可能不会这样做，而且您还必须公开内容通过唯一的URL为给定页面提供主体，并确保它们全部采用可以连接的格式，而无需任何复杂的模板逻辑。
所以这是一些额外的工作，但它不涉及为不支持服务工作者的客户重写任何内容，并且您的网站将继续为这些客户提供相同的行为。