PWA 学习笔记(一)
PWA 介绍
概念:
PWA(Progressive web apps,渐进式 Web 应用)运用现代 Web API 和传统的渐进式增强策略来创建跨平台 Web 应用程序
它并不是一个快捷方式,而能在系统中作为一个独立的 App 存在,用户可设置它的权限,清除它的缓存
PWA 的关键技术在浏览器中的支持度:
1、Web App Manifest 的支持度达到 80.63%
2、Service Worker 的支持度达到 89.84%
3、Notifications API 的支持度达到 75.17%
4、Push API 的支持度达到 78.06%
产生原因:
1、Web 的用户体验:无论怎么优化,还是比 Native App 要差很多,始终无法突破移动设备上 WebView 给 Web 的枷锁
2、用户留存:Native App 安装后会在用户手机桌面上有一个入口,让用户打开 App 只需一次点击,而 Web App 在移动
时代最主要的入口还是搜索引擎;Native App 还能发送通知让用户再次回到应用中,而 Web 没有这个能力
3、Device API 的不完善:Android 和 iOS 提供了非常丰富的设备 API,Native App 只需获取用户授权就可以使用,
而在 Web App 中,WebView 没有提供这样的 API
主要特点:
1、可靠:即使在网络不稳定甚至断网的环境下,也能瞬间加载并展现
2、用户体验:快速响应,具有平滑的过渡动画及用户操作的反馈
3、用户黏性:和 Native App 一样,可以被添加到桌面,能接受离线通知,具有沉浸式的用户体验
主要特性:
1、渐进式:适用于所有浏览器,因为它是以渐进式增强作为宗旨开发的
2、连接无关性:能够借助 Service Worker 在离线或者网络较差的情况下正常访问
3、类原生应用:由于是在 App Shell 模型基础上开发,因此应具有 Native App 的交互,给用户 Native App 的体验
4、持续更新:始终是最新的,无版本和更新问题
5、安全:通过 HTTPS 协议提供服务,防止窥探,确保内容不被篡改
6、可索引:manifest 文件和 Service Worker 可以让搜索引擎索引到,从而将其识别为『应用』
7、黏性:通过推送离线通知等,可以让用户回流
8、可安装:用户可以添加常用的 Web App 到桌面,免去到应用商店下载的麻烦
9、可链接:通过链接即可分享内容,无需下载安装
最低要求:
1、站点需要使用 HTTPS
2、页面需要响应式,能够在平板和移动设备上都具有良好的浏览体验
3、所有的 URL 在断网的情况下有内容展现,不会展现浏览器默认页面
4、需要支持 Wep App Manifest,能被添加到桌面
5、即使在 3G 网络下,页面加载要快,可交互时间要短
6、在主流浏览器下都能正常展现
7、动画要流畅,有用户操作反馈
8、每个页面都有独立的 URL
传统 Web App,Native App 和 PWA 在各特性的对比
核心技术:
1、Web App Manifest:
(1)开发者可以定义用户添加到主屏的图标、应用名称等
(2)允许开发者配置隐藏浏览器多余的 UI(地址栏,导航栏等),让 PWA 具有和 Native App 一样的沉浸式体验
(3)体现在代码上主要是一个 JSON 文件:manifest.json,开发者可以在这个 JSON 文件中配置 PWA 的相关信息
2、Service Worker:在 PWA 中最重要的功能就是离线与缓存
(1)一个特殊的 worker 线程,独立于当前网页主线程,有自己的执行上下文
(2)一旦被安装,就永远存在,除非显示取消注册
(3)使用到的时候浏览器会自动唤醒,不用的时候自动休眠
(4)可拦截并代理请求和处理返回,可以操作本地缓存,如 CacheStorage,IndexedDB 等
(5)离线内容开发者可控
(6)能接受服务器推送的离线消息
(7)异步实现,内部接口异步化基本是通过 Promise 实现
(8)不能直接操作 DOM
(9)必须在 HTTPS 环境下才能工作
3、离线通知:
(1)离线通知是指在用户没有打开 PWA 站点的情况下,也能接受到服务器推送过来的通知并展现给用户
(2)包括了两部分,离线推送和展现通知,分别是 Web Push 和 Notification API
(3)浏览器在接受到对应的消息服务中心推送过来的离线消息时,会唤醒对应站点注册的 Service Worker,
开发者可以在 Service Worker 文件中处理接受到的请求,显示通知
4、App Shell 和骨架屏:
(1)App Shell 是 PWA 强调的一个非常重要的设计理念,它能够缩短用户进入页面时的白屏时间,
让用户一进入 PWA 就能快速看到 PWA 的整体框架
(2)骨架屏(App Skeleton),也是提升首屏体验的有效方式。原理是在真实内容渲染完成前,使用一些能够快速渲染的
静态图片/样式/色块/部分真实内容进行占位,让用户对真实内容区域有心理预期
(3)App Shell 和骨架屏相辅相成,App Shell 显示页面的外框部分,初始内容由骨架屏来填充,保证主体内容区域不留白
(4)特点:
·在页面加载初期预先渲染内容,提升感官上的体验
·一般情况骨架屏和实际内容的结构是类似的,因此之后的切换不会过于突兀
·只需要简单的 CSS 支持 (涉及图片懒加载可能还需要 JS ),不要求 HTTPS 协议,没有额外的学习和维护成本
·若页面采用组件化开发,每个组件可根据自身状态定义自身的骨架屏及其切换时机,同时维持了组件之间的独立性
PWA 学习笔记(一)的更多相关文章
- PWA 学习笔记
深入学习网址:https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 一. 基本介绍 1. 渐进式:适用所有浏览器,因为它是 ...
- pwa学习笔记--简介
1. 介绍 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA 本质上是 Web App ...
- PWA 学习笔记(四)
Service Worker 简介: 1.Service Worker 是 PWA 技术基础之一,脱离浏览器主线程的特性,使得 Web App 离线缓存成为可能, 更为后台同步.通知推送等功能提供了思 ...
- PWA 学习笔记(五)
离线与缓存 资源请求的拦截代理: 1.资源请求的判断: (1)fetch 事件会拦截页面上所有的网络资源请求,但我们通常只对部分资源请求进行处理, 其余的请求会继续走浏览器默认的资源请求流程 (2)f ...
- PWA 学习笔记(三)
基础技术简介 Promise: 1.ES6 引入的一种异步编程的解决方案,通过 Promise 对象来提供统一的异步状态管理方法 2.一般在使用 Promise 对象的时候,首先需要对其进行实例化 3 ...
- PWA学习笔记(二)
设计与体验 APP Shell: 1.应用从显示内容上可粗略划分为内容部分和外壳部分,App Shell 就是外壳部分,即页面的基本结构 2.它不仅包括用户能看到的页面框架部分,还包括用户看不到的代码 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- 爱了!阿里大神最佳总结“Flutter进阶学习笔记”,理论与实战
前言 "小步快跑.快速迭代"的开发大环境下,"一套代码.多端运行"是很多开发团队的梦想,美团也一样.他们做了很多跨平台开发框架的尝试:React Native. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- MyBatis—resultMap 的关联方式实现多表查询(多 对一)
mapper 层 a)在 StudentMapper.xml 中定义多表连接查询 SQL 语句, 一次性查到需要的所有数据, 包括对应班级的信息. b)通过<resultMap>定义映射关 ...
- hdu-4638
There are n men ,every man has an ID(1..n).their ID is unique. Whose ID is i and i-1 are friends, Wh ...
- Python计算IV值
更多大数据分析.建模等内容请关注公众号<bigdatamodeling> 在对变量分箱后,需要计算变量的重要性,IV是评估变量区分度或重要性的统计量之一,python计算IV值的代码如下: ...
- 工具类中注入service和dao
今天编写了个工具类需要用到service成和dao层的代码 如下: //第一步:需要将工具类注入到容器中 @Component public class RuleUtils { //第二部注入 @ ...
- [vue]初探vue生态核心插件Vuex
为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...
- Day 09 函数
目录 函数 函数的基本概念 为何使用函数 定义函数 什么是参数(形参,parameter) 定义函数的三种形式 无参函数 有参函数 空函数 函数的参数 形参和实参(parameter & ar ...
- kubernetes-集群构建
本实验参考:https://github.com/gjmzj/kubeasz kubernetes官方github地址 https://github.com/kubernetes/kubernetes ...
- 使用Portainer集中管理多地域内网运行的Docker实例
1. 单机运行的Docker 容器化部署是现在进行时,开源应用大多数支持容器化部署 在少量机器的场景下往往采用docker cli 和 docker-compose管理,进行"单机式管理&q ...
- ELK输出nginx的日志(未完成)
我们先准备3台centos7服务器 171 做 elasticsearch,kibana的操作 172 做logstash 的操作 173 做nginx 的操作 软件 版本号 elasticsearc ...
- Codeforces Round #591 (Div. 2)
A. CME 题目链接:https://codeforces.com/contest/1241/problem/A 题意: 你有 N 根火柴 , 多少根火柴就可以组成多大的数(如 三根火柴可以表示 3 ...