对于lavas的接触也是十分偶然的，我在开始的时候，只是对PWA(Progressive Web App)比较感兴趣，想深入的了解一下相关的原理和使用。

PWA

1.PWA介绍
Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。
2.PWA的特点

可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
体验 - 快速响应，并且有平滑的动画响应用户的操作
粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。

可靠

当用户打开我们站点时（从桌面 icon 或者从浏览器），通过 Service Worker 能够让用户在网络条件很差的情况下也能瞬间加载并且展现。

Service Worker 是用 JavaScript 编写的 JS 文件，能够代理请求，并且能够操作浏览器缓存，通过将缓存的内容直接返回，让请求能够瞬间完成。开发者可以预存储关键文件，可以淘汰过期的文件等等，给用户提供可靠的体验。

详细请看 Service Worker 介绍。

体验

如果站点加载时间超过 3s，53% 的用户会放弃等待。页面展现之后，用户期望有平滑的体验，过渡动画和快速响应。

为了保证首屏的加载，我们需要从设计上考虑，在内容请求完成之前，可以优先保证 App Shell 的渲染，做到和 Native App 一样的体验，App Shell 是 PWA 界面展现所需的最小资源。

参考 App Shell 设计规范。

粘性

PWA 是可以安装的，用户点击安装到桌面后，会在桌面创建一个 PWA 应用，并且不需要从应用商店下载

PWA 可以借助 Web App Manifest 提供给用户和 Native App 一样的沉浸式体验

PWA 可以通过给用户发送离线通知，让用户回流

Web App Manifest 允许开发者控制 PWA 添加到桌面，允许定制桌面图标、URL等等。

总结

上面讲到 PWA 是兼具 Web App 和 Native App 的特征的，Web App 无版本问题、可索引也是很重要的特性。

总结，PWA 具有下面一些特性

渐进式 - 适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的
连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
类似应用 - 由于是在 App Shell 模型基础上开发，因为应具有 Native App 的交互和导航，给用户 Native App 的体验
持续更新 - 始终是最新的，无版本和更新问题
安全 - 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改
可索引 - 应用清单文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』
粘性 - 通过推送离线通知等，可以让用户回流
可安装 - 用户可以添加常用的 webapp 到桌面，免去去应用商店下载的麻烦
可链接 - 通过链接即可分享内容，无需下载安装

当然，PWA有点很明显，但目前为止缺点也是很明显的，所以抱着学习的态度，我在搜索PWA相关信息时，看到了Lavas，起码目前为止，lavas算是把PWA融合到了中国的国情中，解决了一些独立开发PWA的一些问题。

Lavas

1.简介
Lavas 是一套基于 Vue 的 PWA 解决方案，能够帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题，对提升用户体验，用户留存率等有明显提升，且开发者无须过多的关注 PWA 开发本身。

如果您对 PWA 的概念还不熟悉，可以参考 Lavas 官网中关于 PWA 的介绍。简而言之，PWA 的目标是让移动端的 H5 站点拥有可以媲美本地 APP 的体验，包括离线可访问，添加桌面图标以快速启动等等特性。加之移动站点无须频繁安装升级的优势，进而挑战现有 APP 的用户习惯，建立 WEB 新生态。
2.功能
Lavas 解决方案能够帮助开发者完成：

最基本的移动站点建设，包括 Vue, Vuex, Vue-router, webpack 等常用且成套的技术提供支持

允许站点添加至手机桌面，再次打开时全屏运行，摆脱浏览器的固定显示框架(地址栏，菜单栏等)

强化缓存，允许站点在弱网甚至离线的情况下继续显示内容

支持消息推送，帮助站长主动推送用户感兴趣的信息，提升业务指标

支持服务端渲染(SSR)，对搜索引擎更加友好

支持App Shell 模型，在正常情况下提升加载性能，在异常情况下优化错误显示。

总结起来，Lavas 除了能帮助开发者完成 Vue 能做的(搭建基本站点)之外，通过一些配置还能够快速赋予站点 PWA 的特性，且不需要开发者过多的关心 PWA 的详细开发技术和细节。

我们可以粗略的理解为： Lavas = Vue + PWA

Lavas的简单入门相关推荐

BizTalk 2006 简单入门示例程序（附源项目文件下载）
BizTalk 2006 简单入门示例程序(附源项目文件下载) 为初学BizTalk Server 2006的开发人员,提供一个简单入门的示例程序,包括一个Receive Port.Send Port ...
python如何读取mat文件可视化_python Matplotlib数据可视化（1）：简单入门
1 matplot入门指南 matplotlib是Python科学计算中使用最多的一个可视化库,功能丰富,提供了非常多的可视化方案,基本能够满足各种场景下的数据可视化需求.但功能丰富从另一方面来说也意 ...
ARM NEON 编程简单入门1
原文:http://blog.csdn.net/silentob/article/details/72954618 ARM NEON 编程简单入门1 NEON简介 NEON是适用于ARM Corte ...
Python 简单入门指北(二)
Python 简单入门指北(二) 2 函数 2.1 函数是一等公民一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...
EChart.js 简单入门
EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
【我的区块链之路】- Hyperledger fabric的简单入门（四）链码的编写及调试
[我的区块链之路]- Hyperledger fabric的简单入门(四)链码的编写及调试之前的文章中我们有讲过了fabric的一些核心的配置文件的选项说明,讲过fabric 的网络启动 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
【java开发系列】—— spring简单入门示例
回顾 1 JDK安装 2 Struts2简单入门示例前言作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控 ...
JAVA Bean和XML之间的相互转换 - XStream简单入门
JAVA Bean和XML之间的相互转换 - XStream简单入门背景介绍 XStream的简介注解简介应用实例背景介绍我们在工作中经常遇到文件解析为数据或者数据转化为xml文件的情况, ...
Mybatis 一对多结果集映射简单入门易懂
Mybatis官方文档说明处 Mybatis 一对多结果集映射简单入门易懂一.搭建数据库环境二.idea 搭建maven 项目 (mybatis-demo) 2.1.项目结构 2.2.导入依 ...

Lavas的简单入门

PWA

可靠

体验

粘性

总结

Lavas

Lavas的简单入门相关推荐

最新文章

热门文章