如何通过 Lavas 快速构建 PWA 站点。
PWA
PWA(Progress Web App)是 WEB 未来的发展方向。从体验上来说,PWA 接近原生 APP,通过 Manifest 技术允许用户快速打开站点并获得沉浸式的体验,通过 Service Worker 能够做到资源预加载和离线可用等从而提升性能和可用性;同时 PWA 又拥有 Web 站点的共同优势:免安装和自动更新。
但与 Web 站点不同的是,PWA 又具有可靠、快速、黏性等特点:
第一是可靠。在断网的情况下,PWA 可做到比较友好的离线提示,这个是 PWA 断网的最高级,叫断网可用。
第二是快速。53% 的用户会放弃加载时间超过 3 秒的网站,越快的加载速度就有越少的用户流失。PWA 提供 Service Worker,确定哪些访问缓存、哪些访问网页,缩短加载时间。
第三是黏性。黏性是指用户访问过一次,下一次访问是否麻烦。PWA 会用一个半秒的启动动画来保证浏览器首页启动的顺滑。另外,启动之后没有的地址栏、菜单栏,保证用户的沉浸式体验。
从技术层面讲,PWA 有分为四部分:
第一是 Service Worker 。定义预缓存、网络拦截和缓存策略。它本身是一个 Worker,有专门的语法,需要 CACHES API,需要注册及更新。
第二是 Manifest 。这是一个 Json 文件,定义快速入口,启动动画。
第三是 Web Push and Notification 。是服务器推送给客户端的主动通知。
第四是 APP Shell 。这并不是新技术,但它是常用的 PWA 架构。简单来说,就是把一个 APP 分成了外壳和内容,用 Service Worker 把外壳缓存起来,将里面的页面进行跳转。Lavas 包括工具、文档以及对应的解决方案和建站模板,是一个开源的解决方案。Lavas 本身有两部分,Lavas cli 和 Lavas core,内部用 Vue + Vue Router + Vuex 搭建站点,内置两套模板 (basic & app-shell),支持传统模式 SPA 和 SSR 快速渲染,可以快速拥有 PWA 特性,灵活性强,配置简单,而且文档及时更新,内容完整。 |
|