pwa+lavas简述
以下文章只是自己学习的小总结,“我不生产知识,我只是知识的搬运工。”
PWA
1.首先,什么是pwa?
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验
2.pwa的优点?
PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点。
3.pwa的主要特点?
- 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现
1)当用户打开站点后,通过Service Worker 能让用户在网络很差的情况下也能瞬间加载展现
2) 开发者可以预存储关键文件,淘汰过期文件,给用户提供可靠体验
- 体验 - 快速响应,并且有平滑的动画响应用户的操作
1) 页面在展现之后,有平滑的体验和过渡动画以及快速响应
2)在内容请求完成后,优先保证App shell的渲染,做到和 Native App 一样的体验,App Shell 是 PWA 界面展现所需的最小资源。
- 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面
1) 用户点击(pwa)可以安装到桌面,创建一个PWA应用,不需从应用商店下载
2) 可以借助 Web App Manifest 提供给用户和 Native App 一样的沉浸式体验
3) 可以通过给用户发送离线通知
4.pwa的特性?
- 渐进式 - 适用于所有浏览器,因为它是以渐进式增强作为宗旨开发的
- 连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
- 类似应用 - 由于是在 App Shell 模型基础上开发,因为应具有 Native App 的交互和导航,给用户 Native App 的体验
- 持续更新 - 始终是最新的,无版本和更新问题
- 安全 - 通过 HTTPS 协议提供服务,防止窥探和确保内容不被篡改
- 可索引 - 应用清单文件和 Service Worker 可以让搜索引擎索引到,从而将其识别为『应用』
- 粘性 - 通过推送离线通知等,可以让用户回流
- 可安装 - 用户可以添加常用的 webapp 到桌面,免去去应用商店下载的麻烦
- 可链接 - 通过链接即可分享内容,无需下载安装
5.PWA 改造的成本考虑
- 第一步,应该是安全,将全站 HTTPS 化,因为这是 PWA 的基础,没有 HTTPS,就没有 Service Worker
- 第二步,应该是 Service Worker 来提升基础性能,离线提供静态文件,把用户首屏体验提升上来
- 第三步,App Manifest,这一步可以和第二步同时进行 后续,再考虑其他的特性,离线消息推送等
另外,PWA 采用的最新技术,当前浏览器还没有达到完全支持的程度。W3C 关于这些技术的标准也没有定稿。
关于更多pwa请查看pwa文档 https://lavas.baidu.com/doc
LAVAS
1.什么是lavas?
Lavas = Vue + PWA
LAVAS基于 Vue.js 的 PWA 解决方案 帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题, 且开发者无须过多的关注 PWA 开发本身。
2.学习lavas前提你需要掌握?
- HTML, CSS(less或stylus), JavaScript 等前端编程基础
- ES6/7 部分常用语法,如 Promise, import/export 等
- Vue, Vuex, Vue-router 等基本的开发知识 (教程、API 文档 和 编程风格指南)
- Webpack, Node.js 等基本知识 (推荐)
3.Lavas 解决方案能够帮助开发者完成?
- 最基本的移动站点建设,包括 Vue, Vuex, Vue-router, webpack 等常用且成套的技术提供支持
- 允许站点添加至手机桌面,再次打开时全屏运行,摆脱浏览器的固定显示框架(地址栏,菜单栏等)
- 强化缓存,允许站点在弱网甚至离线的情况下继续显示内容
- 支持消息推送,帮助站长主动推送用户感兴趣的信息,提升业务指标
- 支持服务端渲染(SSR),对搜索引擎更加友好
- 支持App Shell模型,在正常情况下提升加载性能,在异常情况下优化错误显示。
4.Lavas 2.0新增功能?
- 服务端渲染 (SSR) 和浏览器端渲染 (SPA) 可以快速切换
- 自动生成路由规则,避免重复代码
- 针对 SSR 提供了更加合理的AppShell支持,享受更加顺滑和健壮的浏览体验
5.lavas基本命令?
(安装)
- 安装lavas命令行工具
npm i lavas -g
复制代码
- 在所需的工程目录新建项目并命名
lavas init
复制代码
- 进入项目安装依赖
npm i
复制代码
- 启动开发服务器
lavas dev
lavas dev --port 8000 监听其他端口,eg:8000
复制代码
(构建)
- 使用 Lavas 对项目进行构建(内部会调用 babel, webpack 等,最终生成在 /dist/ 目录中,可以通过 /lavas.config.js 进行修改)
lavas build
复制代码
- lavas build 之后加入第三个参数以使用特定的配置文件进行构建,用以取代默认的 /lavas.config.js
lavas build config/lavas.another.config.js
复制代码
(其他)
- 启动内置的正式服务器启动服务端渲染
build之后进入/dist/使用
npm i
lavas start
复制代码
- 使用 Lavas 内置的静态服务器以当前目录为基准启动,(使用 localhost 访问即可预览带有 Service Worker 的站点效果)
用法:
1.在 构建后的 Lavas SPA 项目(默认 /dist/)启动
2.在任何其他目录启动lavas static
复制代码
关于更多lavas请查看lavas文档:https://lavas.baidu.com/guide
代码演练: https://lavas.baidu.com/codelab
github地址: https://github.com/lavas-project/lavas
转载于:https://juejin.im/post/5afd0bf8f265da0b93488224
pwa+lavas简述相关推荐
- 2020年前端面试复习必读精选文章【赠复习导图】
前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是精力有限,二是我觉得大家还是需要自己 ...
- github大佬呕心沥血整理的2020年前端面试复习必读精选文章【赠复习导图】
2021年前端面试必读文章[超三百篇文章/赠复习导图] 转载.原文链接 哈哈,之前是 2020 年必读文章,到了 2021 年了,感觉这些文章还都是经典,那就改个标题吧.[手动狗头] 前言 之前写过一 ...
- 2020年前端面试复习必读文章【超百篇文章赠复习导图】,移动开发工程师的发展路线
重新认识构造函数.原型和原型链 JavaScript深入之从原型到原型链 最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 最详尽的 JS 原型与原型链终极详解,没有「可能是」.(二) 最 ...
- PWA项目实战分享(听书APP)
PWA项目实战分享 - BookPlayer 每天听本书App 因为自己有个需求,特别的痒,昼夜难免.第二天就开始起手做这个项目,利用业余时间,大概持续了10天时间(因为边学边做),从设计到数据(包括 ...
- Safari支持Service Worker,PWA还有多久爆发?
作者 | 彭星 编辑 | 尾尾 在之前的文章<PWA 将带来新一轮大前端技术洗牌?>中,我们回顾了 Web 在移动时代遭遇的两大枷锁,并就PWA是否能真正弥补 Web 劣势进行了分析,同时 ...
- PWA将带来新一轮大前端技术洗牌?
作者 | 彭星 编辑 | 尾尾 一.回顾历史:移动时代之初,Web遭遇两大枷锁 Web 在移动时代遭遇两大枷锁1.Web 在移动时代遭遇两大枷锁 当 Web 自信满满,步入移动时代之时,它还没有做好充 ...
- 前端应该了解的PWA
一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 w ...
- 前端之PWA使用总结
一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 w ...
- 前端应该知晓的PWA
一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 w ...
- PWA(渐进式网页应用) + SPA(单页应用)的一个简单的思考
前言 以前听到的并不是PWA(渐进式网页应用)这么专业的形容词.那个时候其实已经了解到google再做一个东西,之前是这么形容的:不需要操作系统,软件直接在硬件上跑.Surprised,自闭中- 现在 ...
最新文章
- Java微服务 vs Go微服务,究竟谁更强!?
- 9.控制流语句_for循环
- Django-你想知道的都在这里
- 组合数学-- 放回取样基础公式证明
- Spark GraphX算法 - Aggregate Messages (aggregateMessages)算法
- SPH(光滑粒子流体动力学)流体模拟实现二:SPH算法(1)-数学原理
- dimension and x,y,z components
- 哲学家就餐问题python伪代码_哲学家就餐问题代码
- win7 x64怎么枚举所有快捷键呢
- Python OpenCV 写入视频
- 【实战经验分享】如何对SSD固态硬盘下发SCSI command?
- Python学习周报
- Unity3D灯光详解
- eclipse因jdk打不开解决
- 视频APP源码,支持第三方支付,卡密充值,
- 《财富》封面文章:重新审视世界500强,它们又卷土重来了
- 钉钉dingtalk=6.3.5版本RCE复现
- Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API
- ArcMap将png图像矢量化
- python是什么软件是电脑系统自带的软件吗_用Python编写桌面软件系统的步骤是什么?...