PWA 基础学习
1、PWA 是什么?
PWA 是 Progressive Web App 的缩写,从字面翻译过来就是 渐进式 Web App。
渐进式翻译过来就是慢慢的,不是一蹴而就的。这里的指的是 Wab App 更安全、性能更好,体验更完善。
总结的说,PWA 就是应用了新的一些技术对 Web App 进行改进,使得它在安全、性能、体验三个方面有更好的提升,
PWA 就是一个概念。用技术使 Web App 应用更好。
特定:
可靠 -- 在不稳定的网络环境中,也可以瞬间加载并展示
体验 -- 加载速度快,可以先给展示页面
粘性 -- 可以在桌面创建入口,并不需要去下载
可以借助缓存,是体验更好
可以给用户发送离线通知。
新技术 :
App Manifest -- 描述应用的相关信息,实现添加入口到桌面
Service Worker -- 使得 javascript 可以开启一个独立的线程
Notifications API -- 给用户提送信息展示在桌面
Push APi -- 允许web应用接收服务推送的消息
Background Sync -- 后台同步,属于 service worker 的功能。网站关闭的时候,在后台执行。
2、Service Worker
浏览器中 javascript 运行在一个线程上,同一时间只能做一件事情。
Service Worker 可以脱离主线程,在一个独立的线程中工作。完成一些复杂的事情。
特点:
拥有一个独立的线程,可以和主线程交互
一点被创建拥有存在,除非被终止
需要的时候直接可以唤起,不需要的时候睡眠
可以拦截代理请求和返回、缓存文件
可以接收服务端推送的消息
使用
// 注册一个 serviceWorker
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', {scope: '/'})
.then(function (registration) {
// 注册成功
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(function (err) {
// 注册失败:(
console.log('ServiceWorker registration failed: ', err);
});
});
1、serviceWorker.register 方法注册一个 Service Worker 。
参数 /sw.js :在 /sw.js 注册一个 Service Worker
scope : 需要拦截操作的的作用域
PWA 基础学习的更多相关文章
- salesforce 零基础学习(五十二)Trigger使用篇(二)
第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...
- 如何从零基础学习VR
转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...
- IOS基础学习-2: UIButton
IOS基础学习-2: UIButton UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...
- HTML5零基础学习Web前端需要知道哪些?
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- python入门到精通[三]:基础学习(2)
摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...
- python入门到精通[二]:基础学习(1)
摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- Yaf零基础学习总结5-Yaf类的自动加载
Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...
- Yaf零基础学习总结4-Yaf的配置文件
在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...
随机推荐
- 流式套接字(SOCK_STREAM),数据报套接字 (SOCK_DGRAM) 的比较
1.流式套接字 使用这种套接字时,数据在客户端是顺序发送的,并且到达的顺序是一致的.比如你在客户端先发送1,再发送2,那么在服务器端的接收顺序是先接收到1,再接收到2,流式套接字是可靠的,是面向连接的 ...
- 设置Echarts鼠标悬浮样式
在option下 tooltip内添加以下代码: (本文在后台进行传值 也就是其中的viewstate[]) tooltip: { show: true, trigger: 'axis', //sho ...
- C语言学习(1)-环境配置
写在前面的话,该文章是看杨老师的一套视频,所做的一些笔记,边看边写,再此谢谢杨老师. 1.学习C之前需要避免的误区 误区一:C++是C的升级版:C#是C++的升级版 误区二:C/C++就是Visual ...
- js一键导出Excel
HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...
- Android setOnPageChangeListener 过时了怎么办?
今天使用ViewPager发现setOnPageChangeListener的方法居然过期了,而且AS编译不通过了,最后查了一下原来把set换成add了,代码如下: setOnPageChangeLi ...
- [Python] xrange和range的使用区别
zhuan:https://blog.csdn.net/humanking7/article/details/45950967 range 函数说明:range([start,] stop[, ste ...
- JS高级——弹出框的美化
替换原有的alert方法,window.alert=function(){} https://blog.csdn.net/kirsten_z/article/details/76242286 http ...
- 3星|林毅夫《战胜命运》:事实证明华盛顿共识是错误的,GIFF是穷国发展正道。
本书是林毅夫与喀麦隆一位经济学家合著.基本的观点是:事实证明华盛顿共识是错误的,GIFF是穷国发展正道.GIFF的主要思想是政府找到对标国家,强力推行产业政策. 作为一个经济学外行,读后感觉关于华盛顿 ...
- day15-模块的基础及导入
目录 模块 什么是模块 使用模块 import 循环导入问题 解决方案一 解决方案二 模块的搜索路径 Python文件的两种用途 包 导入包内包 导入包内包的模块 绝对导入与相对导入 绝对导入 相对导 ...
- CAD得到多行文本(com接口VB语言)
主要用到函数说明: MxDrawXCustomFunction::Mx_GetMTextContent 得到多行文本的,不包括格式控制符中的字符串值,详细说明如下: 参数 说明 LONG lId 多行 ...