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 基础学习的更多相关文章

  1. salesforce 零基础学习(五十二)Trigger使用篇(二)

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  2. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  3. IOS基础学习-2: UIButton

    IOS基础学习-2: UIButton   UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...

  4. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  5. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  6. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  7. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  8. Yaf零基础学习总结5-Yaf类的自动加载

    Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...

  9. Yaf零基础学习总结4-Yaf的配置文件

    在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...

随机推荐

  1. 流式套接字(SOCK_STREAM),数据报套接字 (SOCK_DGRAM) 的比较

    1.流式套接字 使用这种套接字时,数据在客户端是顺序发送的,并且到达的顺序是一致的.比如你在客户端先发送1,再发送2,那么在服务器端的接收顺序是先接收到1,再接收到2,流式套接字是可靠的,是面向连接的 ...

  2. 设置Echarts鼠标悬浮样式

    在option下 tooltip内添加以下代码: (本文在后台进行传值 也就是其中的viewstate[]) tooltip: { show: true, trigger: 'axis', //sho ...

  3. C语言学习(1)-环境配置

    写在前面的话,该文章是看杨老师的一套视频,所做的一些笔记,边看边写,再此谢谢杨老师. 1.学习C之前需要避免的误区 误区一:C++是C的升级版:C#是C++的升级版 误区二:C/C++就是Visual ...

  4. js一键导出Excel

    HTML: 1 <div class="container"> 2 <table id="backViewTable" class=" ...

  5. Android setOnPageChangeListener 过时了怎么办?

    今天使用ViewPager发现setOnPageChangeListener的方法居然过期了,而且AS编译不通过了,最后查了一下原来把set换成add了,代码如下: setOnPageChangeLi ...

  6. [Python] xrange和range的使用区别

    zhuan:https://blog.csdn.net/humanking7/article/details/45950967 range 函数说明:range([start,] stop[, ste ...

  7. JS高级——弹出框的美化

    替换原有的alert方法,window.alert=function(){} https://blog.csdn.net/kirsten_z/article/details/76242286 http ...

  8. 3星|林毅夫《战胜命运》:事实证明华盛顿共识是错误的,GIFF是穷国发展正道。

    本书是林毅夫与喀麦隆一位经济学家合著.基本的观点是:事实证明华盛顿共识是错误的,GIFF是穷国发展正道.GIFF的主要思想是政府找到对标国家,强力推行产业政策. 作为一个经济学外行,读后感觉关于华盛顿 ...

  9. day15-模块的基础及导入

    目录 模块 什么是模块 使用模块 import 循环导入问题 解决方案一 解决方案二 模块的搜索路径 Python文件的两种用途 包 导入包内包 导入包内包的模块 绝对导入与相对导入 绝对导入 相对导 ...

  10. CAD得到多行文本(com接口VB语言)

    主要用到函数说明: MxDrawXCustomFunction::Mx_GetMTextContent 得到多行文本的,不包括格式控制符中的字符串值,详细说明如下: 参数 说明 LONG lId 多行 ...