黑马程序员技术交流社区

标题: [sz]如何通过 Lavas 快速构建 PWA 站点 [打印本页]

作者: CV302号 时间: 2019-8-26 15:25
标题: [sz]如何通过 Lavas 快速构建 PWA 站点

如何通过 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 特性，灵活性强，配置简单，而且文档及时更新，内容完整。

作者: 398580721 时间: 2019-9-3 14:16

今天不想跑，所以才去跑，这才是长距离跑者的思维方式。

作者: chengjiayu 时间: 2019-9-4 10:56

有一种能力是不断持续的努力

作者: pakho-chou 时间: 2019-9-4 14:00
我们笑着说再见，却深知再见遥遥无期。

作者: 陈么么 时间: 2019-9-4 16:18
浩气长存不如威风堂堂，逍遥自在不若极乐净土。

作者: 流浪的猫~ 时间: 2019-9-4 16:38
妙语连珠是猎物，支支吾吾是喜欢。

作者: DarkHorse0 时间: 2019-9-5 09:03
有些事我并不是不知道，只是我可以装作不知道。

作者: wilsonchen 时间: 2019-9-5 09:20
我从不喜欢迁就却用最干净的真心为你妥协了很久。

作者: 娟呀 时间: 2019-9-5 10:29
不要依赖梦想而忘记生活

作者: 李大哥 时间: 2019-9-5 10:49
沅有芷兮澧有兰，思公子兮未敢言。

作者: 哎哟琪呀 时间: 2019-9-5 11:13
事实是不会为体贴我们这些悲念而有些许更改的。

作者: 没有技术的臭虫 时间: 2019-9-5 17:38
发光并非太阳的专利，你也可以发光。加油

作者: 夜听雨 时间: 2019-9-18 17:17
预测未来最好的方法就是去创造未来。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2