PWA有多个页面

我正在为我的网站创建一个PWA。

这是一个使用jquery构建的多页面网站。 现在我创建了一个app shell，它包含一个站点的公共头。 我的网站有很好的搜索引擎优化排名，通常排名前三。

现在，当我想从页面A转到页面B时，我希望预加载标题并显示加载程序，直到从服务器接收到页面B的数据。 我仍在使用jquery，因为大多数模块已经内置，我不想重建它们。

现在，我能想到的唯一解决方案是使用ajax调用或在前端使用路由。 我对这些解决方案几乎没有疑问和看法，想知道我是否正确。

1）使用Ajax – 当调用页面B时，响应中的HTML将只有头部和加载器以及一个js文件，其中将有ajax代码来加载页面上的数据。 缓存后，将从缓存中获取包含标头和加载器的HTML，并调用ajax调用数据。

如果我错了，请纠正我。

现在，我看到的问题是，考虑到我有第3页并且希望它具有相同的function，我将在缓存中再次存储相同的标头用于此目的。

2）我听说前端的路线不是SEO友好或需要额外的努力使他们SEO友好。 因此我不希望我的排名受到影响。 此外，我不知道在Jquery或Core Javascript中为我处理一切的好路由库。

任何帮助将受到高度赞赏。 我现在非常困惑，所以任何正确方向的指导或参考都会有所帮助。

Answer 1

有关此博客文章中可能选项的一些指导。

鉴于您当前的设置，以及您表示不希望过多地改造您的架构，我建议您尝试添加一个服务工作者实现，分别缓存您的页眉，页脚和动态内容。 然后，服务工作者可以连接标题（来自缓存）+内容主体（通过fetch()或可能从缓存中检索）+页脚，并返回完整的HTML文档作为响应。

您需要开始将部分HTML标题+页脚作为具有可以预先缓存的唯一URL的资源公开，您现在可能不会这样做，并且您还必须通过以下方式公开给定页面的内容正文。唯一的URL，并确保它们都是一种可以连接的格式，而不需要任何复杂的模板逻辑。

所以这是一些额外的工作，但它不涉及为不支持服务工作者的客户重写任何东西，并且您的站点将继续为这些客户端看起来和行为相同。