渐进式Web应用（PWA）

什么是渐进式Web应用？

渐进式Web应用是一种全新的Web技术，让Web应用和原生APP的体验相近或一致。

渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案，对于开发者的优势如下：

1. 你只需要关心W3C的Web标准，不用关心各种Native APP的代码。

2. 用户可以在安装应用之前先试用。

3. 在渐进式Web应用中，你不需要使用各种应用商店来分发应用，也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外，应用程序更新是自动进行的，无需用户交互，所以整体的使用体验对于用户来讲更为的平滑。

4. 渐进式Web应用的“安装”过程很快，只需要在主屏幕上添加一个图标即可。

5. 渐进式Web应用启动时可以显示一个好看的启动画面。

6. 你可以在渐进式Web应用中提供具有全屏体验的应用。

7. 通过系统通知等形式提高用户的粘性。

8. 渐进式Web应用将会在本地缓存必要的文件，所以渐进式Web应用会比普通的Web应用的性能更好。

9. 轻量级安装——你只需要缓存几百KB的数据即可。

10. 所有的数据传输必须使用安全的HTTPS连接

11. 渐进式Web应用可以离线缓存数据，并且会在重新连接互联网时重新同步数据。

    渐进式Web应用发展的现状

    渐进式Web应用才刚刚开始发展，但实际上在国内，有些网站已经实际开始PWA的实践了，例如：微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问，那这个PWA不就是和微信小程序一样吗，对是这样，二者的目的是一致的，就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。

    但就目前来讲，PWA是Google主推的一项技术标准，FireFox，Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了，Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看，对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段，在不支持渐进式Web应用的浏览器中，你的应用也只是无法使用渐进式Web应用的离线功能而已，除此之外的功能均可以正常使用。

    而在微信这边，凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。
    
    

    PWA的原理

    第一步：使用HTTPS

     

    渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多，但使用HTTPS可以让您的网站变得更安全，HTTPS网站在Google上的排名也会更靠前。

    由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址，所以在本示例中您并不需要开启HTTPS。另外，出于调试目的，您可以在启动Chrome浏览器的时候使用以下参数来关闭其对网站HTTPS的检查：

    • –user-data-dir

    • –unsafety-treat-insecure-origin-as-secure

    第二步：创建一个应用程序清单（Manifest）

    应用程序清单提供了和当前渐进式Web应用的相关信息，如：

    • 应用程序名

    • 描述

    • 所有图片（包括主屏幕图标，启动屏幕页面和用的图片或者网页上用的图片）