PWA渐进式web应用
PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。
PWA核心技术
- web app manifest
- service worker
- promise/async/await
- fatch api
- Cache storage
- 常见缓存策略
- notification
PWA四个核心内容
- manifest.json
- serviceWork
- cacheStrorage
- notification
1、manifest
- pwa技术集合的一部分
- 让网站安装到设备主屏幕上，不需要用户在商城下载
- 在json文件中提供有关应用的信息
- 启动页面避免生硬过度
- 隐藏浏览器相关的UI 比如地址栏等
注意点
- manifest.json 配置
- index.html 中引入manifest.json
- 需要https或者http://localhost下访问
常见配置
- name: 项目名称
- short_name：短名称，用于主屏幕显示
- start_url：设备应用加载的url 可以使绝对或者相对路径
- icons ： 应用图标144X144
- background_color：启动动画背景色
- theme_color：应用程序主题背景色
- dispay：app显示模式 fullcreen全屏 standalone minimal-ui
{
"name":"电影App",
"short_name":"app",
"start_url":"/index.html",
"icon":[{
"src":"icons/icon_fro.png",
"sizes":"144x144",
"type":"image/png"
}],
"background_color":"skyblue",
"theme_color":"yellow",
"display":"standalone"
}
2、service worker
- 标准的PWA包括3个部分
https或http://localhost
manifest.json
service work - 做离线缓存
web work使用
- 创建web worker var worker = new Worker('work.js')
- 在web work 中进行复杂计算
- web work计算结束 通过self.postMessage(msg)给主线程发消息
- 主线程通过 worker.onMessage = function(msg) 监听消息
- 主线程可以用同样的方式给web worker进行通讯
service worker
- web work 临时的，每次事情不能持久存下来。
- servive work 类似于代理服务器，存在缓存里
- 一旦install ，永久存在，除非被手动unregister
- 用到的时候唤醒，不用自动休眠
- 必须https环境下工作
- 异步实现，内不通过Promise实现
- 可编程链接代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）
service worker使用步骤
- window.onload 中注册service worker ,放在与其他资源竞争
- navigator对象中内置了serviceWorker属性
- service worker在老版本不支持，需要进行浏览器兼容 if('serviceWorker' in navigator){}
- 注册service worker navigator.serviceWorker.register('./sw.js')返回一个promise对象
service worker生命周期事件
- install： 注册成功触发，用户缓存资源
- activate：激活时触发，删除旧的资源
- fetch 发送请求时触发，操作缓存读取网络资源
fetch Api
config常见参数
body
headers
methods
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入清单文件 -->
<link rel="manifest" href="manifest.json">
</head>
<body>
<h1>hello word</h1>
<!-- web worker -->
<script>
const worker = new Worker('worker.js')
worker.addEventListener('message', e => {
console.log(e.data)
})
</script>
<!-- service worker -->
<script>
// 1.需要网页加载完成注册
window.onload = () => {
// 2.能力监测
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(res => {
console.log(res)
})
}
}
</script>
</body>
</html>
webwork.js
// 独立的进程，不能做dom操作
let total = 0
for(var i=0;i<1000000;i++){total+=i}
// 发消息给主线程，把结果给他
self.postMessage({total:total})
sw.js (serviceWorker)
console.log('service注册')
self.addEventListener('install', e => {
console.log(e)
/*
跳过等待，直接到activite状态 是一个promise
self.skipWaiting()
*/
// 等待skipWaiting结束，activite状态 是一个promise
e.waitUntil(self.skipWaiting())
})
self.addEventListener('activate', e => {
// 表示service work激活后，利可获取控制权
e.waitUntil(self.ClientRectList.claim())
})
self.addEventListener('fatch', e => {
console.log(e)
})
3、cacheStorage基本使用
- cache对象的存储，配合service work使用
api类似于数据库操作
- caches.open(name).then(function(){})：用于打开缓存
- caches.keys(数据库名)：返回一个promise
- caches.delete(数据库)
cache常用方法
cache接口缓存的request/response对象提供存储机制
- cache.put(req,res)把请求当成key，把相应存储起来
- cache.add(url) 根据url请求，吧响应结果存储起来
- cache.addAll(urls)抓取url数组，把结果存起来
- cache.match(req)获取req对应的response
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入清单文件 -->
<link rel="manifest" href="manifest.json">
</head>
<body>
<h1>hello word</h1>
<script>
window.addEventListener('load', async()=>{
if('serviceWorker' in navigator){
try {
const registration=await navigator.serviceWorker.register('./sw.js')
console.log('成功')
} catch (error) {
console.log('失败')
}
}
})
</script>
</body>
</html>
sw.js
// 注册serviceWorker时间
const CACHENAME = 'chache_v1'
// 缓存内容
self.addEventListener('install', async (e) => {
const cache = await caches.open(CACHENAME)
await cache.addAll([
'/',
'/icons/icon_fro.png',
'manifest.js'
])
e.waitUntil(self.skipWaiting())
})
// 清除就得缓存
self.addEventListener('activate', async e => {
const keys = await caches.keys()
keys.forEach(key => {
if (key == CACHENAME) {
caches.delete(key)
}
})
e.waitUntil(self.clients.claim())
})
// 请求时间触发
// 能请求：请求
// 不能请求：读取cachesStorage
self.addEventListener('fetch', e => {
// 请求对象
const req=e.request
// 给浏览器响应
e.respondWith(networkFirst(req))
})
// 网络有限
async function networkFirst(req){
try {
const fresh=await fetch(req)
return fresh
} catch (error) {
// 去缓存读取
const cache=await caches.open(CACHENAME)
const cached=await cache.match(req)
return cached
}
}
4、notiication 通知
- 配置桌面通知的
- Notification.permisin 可以获得用户的授权情况
- default：未授权
- denied：拒绝
- granted：授权
- Notification.requestPermission() 请求用户授权
- new Notification(title,{body:''}) 给个通知
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入清单文件 -->
<link rel="manifest" href="manifest.json">
</head>
<body>
<h1>hello word</h1>
<script>
window.addEventListener('load', async()=>{
if('serviceWorker' in navigator){
try {
const registration=await navigator.serviceWorker.register('./sw.js')
console.log('成功')
} catch (error) {
console.log('失败')
}
}
})
// 判断是否联网
if(Notification.permission=='default'){
// 请求提示权限
Notification.requestPermission()
}
if(!navigator.onLine){
new Notification('提示',{body:'当前没有网'})
}
window.addEventListener('online',e=>{
new Notification('提示',{body:'又忘了，请刷新访问最新数据'})
})
</script>
</body>
</html>
静态资源缓存优先，动态数据请求有限
PWA渐进式web应用的更多相关文章
- PWA 渐进式Web应用程序 - 解释
想象一下,如果一个网站上所有的功能都能够作为一个移动应用程序为用户所用——任何设备上都可以使用.可接收所有的通知.离线模式可用,为了实现这个愿景,2015年,谷歌创造了渐进式Web应用程序(PWA). ...
- 关于PWA ( Progressive web apps )
渐进式Web应用程序使用现代Web API以及传统的渐进式增强策略来创建跨平台Web应用程序.这些应用程序无处不在,并提供多种功能,使其具有与本机应用程序相同的用户体验优势.这套文档告诉您需要了解的所 ...
- 渐进式Web应用（PWA）入门教程（上）
最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来. 但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户 ...
- 渐进式Web应用（PWA）入门教程（下）
上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍. 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的. 第一步:使用HTTPS 渐进式W ...
- (转)PWA（Progressive Web App）渐进式Web应用程序
PWA 编辑 讨论 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化 ...
- 什么是渐进式Web App(PWA)？为什么值得关注？
转载自:https://blog.csdn.net/mogoweb/article/details/79029651 在开始PWA这个话题之前,我们先来看看Internet现状. 截至2017年1月, ...
- 渐进式Web应用（PWA）
什么是渐进式Web应用? 渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致. 渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势 ...
- 开发一个渐进式Web应用程序（PWA）前都需要了解什么？
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/how-to-build-a-progres ...
- 试着给VuePress添加渐进式Web应用(PWA)支持，基于vuepress/plugin-pwa，点亮离线访问
背景 有时候,我们也希望VuePress构建的文档中心能支持离线访问,这时候我们需要给他添加渐进式Web应用(PWA,Progressive Web App)的支持,根据官方文档指引,我们可以借助插件 ...
随机推荐
- 孟老板 Paging3 (一) 入门
BaseAdapter系列 ListAdapter系列 Paging3 (一) 入门 Paging3 (二) 结合 Room Paging3 (一) 入门 前言: 官方分页工具, 确实香. 但 ...
- 题解 P3232 [HNOI2013]游走
洛谷P3232[NOI2013]游走 题目描述 给定一个 n 个点 m 条边的无向连通图,顶点从 1 编号到 n,边从 1 编号到 m. 小 Z 在该图上进行随机游走,初始时小 Z 在 1 号顶点,每 ...
- Windows内核开发-Windows内部概述-1-
Windows内部概述-1- 进程: 进程是一个程序的运行实例的控制和管理对象.一般的程序员所说进程运行,这样的说法是不对的,因为进程不能运行程序,进程只能管理该程序运行.线程才是真正的执行代码的东西 ...
- 机器人路径规划其一 Dijkstra Algorithm【附动态图源码】
首先要说明的是,机器人路径规划与轨迹规划属于两个不同的概念,一般而言,轨迹规划针对的对象为机器人末端坐标系或者某个关节的位置速度加速度在时域的规划,常用的方法为多项式样条插值,梯形轨迹等等,而路径规划 ...
- ES6 数组的方法
数组的类 数组的类是Array 数组的定义 var arr=[元素] var arr=new Array(3) 数字3,代表有三个元素或者三个空位 如果数组定义采用 new 实例,类中跟的是一个数字 ...
- 【原创】SystemVerilog中的多态和虚方法
封装可以隐藏实现细节,使代码模块化,继承可以扩展已经存在的代码模块,目的都是为了代码重用.多态是为了实现接口的重用.在SystemVerilog中,子类和父类之间多个子程序使用同一个名字的现象称为Sy ...
- Unity MVC思想
MVC框架概念MVC全名是Model View Controller,是模型(Model)-视图(View)-控制器(Controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离 ...
- 飞扬起舞，基于.Net Cli亲手打造.Net Core团队的项目脚手架
什么是脚手架? Scaffolding is a meta-programming method of building database-backed software applications. ...
- [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark
[源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark 目录 [源码解析] 深度学习分布式训练框架 horovod (10) --- run on spark ...
- Docker_CICD笔记
1 环境说明 1.1 机器配置 主机名称 IP地址 系统版本/内存/cpu核数/硬盘 安装软件 controlnode 172.16.1.70/24 centos7.4/4/2/60 docker.d ...