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