在移动网站上生产服务工作者

时间:2016-11-19 07:26:23

标签: html caching service-worker progressive-web-apps

我是服务工作者的新手。我想在我的网站中整合服务工作者。我的动机是改善我网站的性能,而不是让网站脱机。这是一个房地产网站。

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

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

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

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

在上面的方法中,我在html中遇到了循环和条件语句等问题。 问题2: - 有什么方法可以使用循环缓存模板并在运行时更改它们。

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

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

此致

1 个答案:

答案 0 :(得分:0)

这是很多问题,我不认为服务工作者一定是你最好的选择。

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

问题2:而不是您正在使用的方法,即在将变量发送到浏览器之前替换变量&#39;大多数框架都会使用某种形式的数据绑定来处理浏览器中的迭代和条件。

问题3:缓存app-shell对SEO没有任何影响,Google已经解析了JavaScript一段时间了;但个人我建议网站的内容加载而不使用JavaScript,然后JavaScript仅用于增强体验。无论是否使用app-shell模型,这都是相同的。

问题4:我不了解您当前的设置,这不是一般情况,因此您可能会出错。

服务工作者和缓存API通常用于缓存静态资产,通常是字体,CSS,JavaScript和HTML模板,并且应该可以提高性能,因为HTTP请求较少;但是还有其他方法可以提高性能,无需使用服务工作人员即可解决所有问题。