PWA vs html5 webapp?

时间:2018-09-05 07:07:48

标签: html5 web-applications progressive-web-apps

我知道PWA最具标志性的功能是

  • 服务工作者:这使用户可以从缓存的资源中脱机使用应用程序
  • 添加到主屏幕:使用此功能,用户可以在其移动主屏幕上添加该应用的快捷方式,以获得与本机应用进行交互的体验(但我认为仍然有很大的不同)

但是,我可以在大约6/7年前通过使用HTML5技术做到所有这些,我知道服务工作者是最近来的,但也有“ HTML5应用程序缓存以及本地存储” ,索引数据库和文件API规范。”可以做类似的事情。

有没有人可以解释PWA和HTML5 Web应用之间的区别?还是它们只是相同的术语?或类似的概念但实现方式不同?还是PWA是HTML5 webapp的(下一代/扩展名)?

我对PWA可能会有一些误解,因为我是这个术语的新手,谢谢。

1 个答案:

答案 0 :(得分:1)

如果保持简单,PWA是具有3个附加功能的普通站点。

  1. 响应式设计-网站在所有设备上都应该看起来不错
  2. manifest.json-网站必须在manifest.json中存储有关自身的一般说明
  3. 缓存-网站必须脱机工作

我相信1和2很容易。 3确实是PWA的全部内容。所以问题是:我们如何提供离线支持?

第一个问题是如何在没有互联网连接的情况下获取初始.html .css.js文件?答案是:我们应该使用服务工作者或应用缓存。但是App Cache有很多问题,并且可能会被弃用,而另一方面其他正在服务的工人正在开发中并且每个月都会变得更好。您可以详细了解它们的区别here

第二个问题是我们如何在没有Internet连接的情况下获取服务器数据?我们应该将最重要的数据存储在任何地方。但是,从缓存中获取.js文件后,我们便可以访问本地存储索引数据库等。因此,我们可以将重要数据存储在任何我们在线时可以使用此存储空间,离线时可以从存储中取回。完全由您决定如何处理。

我认为PWA和HTML5 webapp(至少目前)没有清除和严格的定义。因此,您可以假设它是相同的,但是今天PWA是更常见的词。