在移动网站上介绍服务人员

Question

我是服务人员的新手。我想在我的网站中集成服务人员。我的动机是提高我网站的性能，而不是让网站离线。它是一个房地产网站。

所以到目前为止，我所做的是为我的站点创建模块化模板并将它们存储在缓存中。 例如模板1

<div>
     <p>#data</p>
<div>

每当我的页面上发生提取时，我首先通过 ajax 调用 api 获取数据并用实际 api 响应替换缓存响应中的 #data 变量，然后我将新响应返回给浏览器。

问题 1：- 所以我想知道这是正确的方法。用于 html 模板缓存？

在上述方法中，我的 html 中遇到了循环和条件语句等挑战。 问题 2：- 有什么方法可以缓存带有循环的模板并在运行时更改它们？。

问题 3：- 如果我最初向用户显示缓存的 app-shell，那么这会影响我网站的 SEO 排名吗？。

问题 4：- 我必须为现有代码编写新模板，这意味着我必须维护两个代码，一个用于服务工作者，另一个用于不支持服务工作者的普通浏览器。任何解决办法？

问候

Answer 1

这是很多问题，我认为服务人员不一定是你最好的选择。

问题 1： 我个人建议为您的 HTML 模板使用 KnockoutJS、Angular、Polymer...等框架。这些通常具有内置的模板缓存。

问题 2： 大多数框架会使用某种形式的数据绑定来处理迭代和浏览器中的条件。

问题 3： 缓存 app-shell 对 SEO 没有影响，Google 已经解析 JavaScript 有一段时间了；但是个人我会建议网站的内容在没有 JavaScript 的情况下加载，然后 JavaScript 仅用于增强体验。无论是否使用 app-shell 模型，这都是一样的。

问题 4：我不了解您当前的设置，这不是一般情况，因此您可能有问题。

Service Worker 和 Cache API 通常用于缓存您的静态资产，通常是字体、css、JavaScript 和 HTML 模板，由于 HTTP 请求较少，因此应该会提高性能；但还有其他方法可以提高性能，无需使用服务人员即可解决您的所有问题。