尝试PWA
1、一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。
2、创建HTML文件
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<meta name="x5-orientation" content="portrait">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="e.png"/>
<title>1v1</title>
</head> <body>
<div id="main">3</div>
<script>
if (navigator.serviceWorker != null) {
navigator.serviceWorker.register('sw.js')
.then(function (registration) {
console.log('Registered events at scope: ', registration.scope);
});
}
</script>
<script src="index.js"></script>
</body> </html>
3、HTML中有引入manifest.json(名字配置项等内容)、apple-touch-icon(ios显示图标)、引入sw.js(增加单机缓存内容等)
4、manifest.json的大致内容
{
"name": "Minimal app to try PWA", \\名字
"short_name": "PWA", \\短名字
"display": "standalone", \\状态
"start_url": "/pwa/index.html", \\入口
"theme_color": "#8888ff", \\预设主题颜色
"background_color": "#aaaaff", \\预设背景颜色
"icons": [ \\安卓的图标
{
"src": "e.png",
"sizes": "256x256",
"type": "image/png"
}
]
}
5、sw.js大致内容
var cacheStorageKey = 'v2' \\版本号，每次根据这个号是否有修改来决定再替换缓存内容 var cacheList = [ \\缓存内容
"index.html",
"index.js",
"e.png"
] self.addEventListener('install', e => { \\添加缓存
e.waitUntil(
caches.open(cacheStorageKey)
.then(cache => cache.addAll(cacheList))
.then(() => self.skipWaiting())
)
}) self.addEventListener('fetch', function (e) { \\再次获取缓存的回调
e.respondWith(
caches.match(e.request).then(function (response) {
if (response != null) {
return response
}
return fetch(e.request.url)
})
)
}) self.addEventListener('activate', function (e) { \\根据缓存名不同获取内容
e.waitUntil(
Promise.all(
caches.keys().then(cacheNames => {
return cacheNames.map(name => {
if (name !== cacheStorageKey) {
return caches.delete(name)
}
})
})
).then(() => {
return self.clients.claim()
})
)
})
6、创建index.js测试
let body = document.getElementsByTagName('body')[0]
body.style.backgroundColor='#333'
7、要在前缀是https或者localhost下才能有缓存的内容，每次更新都要先修改一下版本号，也就是sw.js里的cacheStroageKey的名字
尝试PWA的更多相关文章
- 说说 PWA 和微信小程序--Progressive Web App
作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...
- 前端应该了解的PWA
一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 w ...
- 网站PWA升级
前面的话 渐进式网络应用 ( Progressive Web Apps ),即我们所熟知的 PWA,是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案.PWA 本 ...
- 经典文摘：饿了么的 PWA 升级实践（结合Vue.js）
自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...
- H5 PWA技术以及小demo
H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...
- 重识 PWA 进阶到 workbox3
看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...
- PWA 入门: 写个非常简单的 PWA 页面
Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案. 这篇文章里我们来完成一个非常简单的 PWA 页面. 一个 PWA ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
- PWA之serviceWorker应用
1.serviceWorker介绍service worker是一段运行在浏览器后台的JavaScript脚本,在页面中注册并安装成功后,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请 ...
随机推荐
- Windows内核读书笔记——SEH结构化异常处理
SEH是对windows系统中的异常分发和处理机制的总称,其实现分布在很多不同的模块中. SEH提供了终结处理和异常处理两种功能. 终结处理保证终结处理块中的程序一定会被执行 __try { //要保 ...
- Graves of the Internet - 互联网坟墓
Graves of the Internet - 互联网坟墓 互联网公司逝去产品列表 以此祭奠那些夕阳下的奔跑,祭奠那些逝去的青春 演示地址 点击 这里 https://myvin.github.io ...
- python 函数操作
四.函数 定义: #!/usr/local/env python3 ''' Author:@南非波波 Blog:http://www.cnblogs.com/songqingbo/ E-mail:qi ...
- ASP.NET WebAPI 02-Action的选择(一)
在WebAPI对于Action的选择主要经过:Action方法名匹配,Http方法匹配,参数匹配三步. Http方法匹配 WebAPI提供了三种Http方法的选择方式,分别是:方法前缀,AcceptV ...
- 在 github 中新建仓库后，如何上传文件到这个仓库里面。
在 github 中新建仓库后,如何上传文件到这个仓库里面. libin@hglibin MINGW64 /e/github.io (master) $ git remote libin@hglibi ...
- 爱奇艺全国高校算法大赛初赛B
二分,验证. 二分一下答案,然后验证一下统计个数能否满足即可. #include <cstdio> #include <cmath> #include <cstring& ...
- Poj1741/洛谷P4718 Tree（点分治）
题面 有多组数据:Poj 无多组数据:洛谷 题解 点分治板子题,\(calc\)的时候搞一个\(two\ pointers\)扫一下统计答案就行了. #include <cmath> #i ...
- Linux修复文件系统
注意:修复有风险,操作需谨慎.风险一定要说明啊! 由于还没遇到过,我就当网上找了一张图. 如果在启动时,出现了如上图红色框内的RUN fsck MANUALLY,那么一般是文件系统有问题. 最下面提示 ...
- Linux通过FTP上传文件到服务器
1.如果没有安装ftp,可执行: 输入:yum -y install ftp,回车 等待安装完毕 2.连接服务器 输入:ftp 服务器IP,回车 根据提示输入用户名和密码 3.上传下载操作 1). 上 ...
- luogu P4137 mex
题面: 有一个长度为$n$的数组${a1,a2,…,an}$.$m$次询问,每次询问一个区间内最小没有出现过的自然数. 令$lst[i][r]$表示在$[1, r]$中数值$i$最后出现的位置 那么, ...