尝试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脚本,在页面中注册并安装成功后,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请 ...
随机推荐
- Linux shell 中$() ` `，${}，$[] $(())，[ ] (( )) [[ ]]作用与区别
转载自 https://blog.csdn.net/x1269778817/article/details/46535729 参考: https://stackoverflow.com/questio ...
- 【LOJ】#2172. 「FJOI2016」所有公共子序列问题
题解 听说是什么序列自动机? 我们考虑对于每个位置的串,下面拼接相同的字符时,拼接最近的一个,这样可以保证不重不漏 为了实现这个我们需要什么呢,我们需要一个链表,记录一下每个位置的下一个字符会转移到哪 ...
- lr获取响应结果中的乱码并转成中文
{,"message":"楠岃瘉鐮侀敊璇\xAF","developerMessage":"楠岃瘉鐮侀敊璇\xAF"} ...
- jquery控制元素的显示与隐藏
比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...
- 基于springboot实现http响应异常信息国际化
背景 国际化是指在设计软件,将软件与特定语言及地区脱钩的过程.当软件被移植到不同的语言及地区时,软件本身不用做内部工程上的改变或修正. 本文提到的异常响应信息国际化是指:前端向后台发起请求,后台在处理 ...
- Python实现简单的API接口
get方法 代码实现 # coding:utf-8 import json from urlparse import parse_qs from wsgiref.simple_ ...
- Socket学习笔记(一)
1.socket介绍 我们知道两个进程如果需要进行通讯最基本的一个前提能能够唯一的标示一个进程,在本地进程通讯中我们可以使用PID来唯一标示一个进程,但PID只在本地唯一,网络中的两个进程PID冲突几 ...
- FastReport.Net使用：[3]简单报表一
如何设置报表栏 1.右键报表栏相关模块进行删除. 2.使用菜单栏中的报表菜单进行添加/删除相应的栏目,选中栏目的背景会变得高亮. 3.使用报表栏编辑器. 可通过点击报表栏顶部的“设置报表栏”或者菜单栏 ...
- 初识JVM
做了这么久的开发,到目前为止对JVM也只是一些简单的概念上的理解,正好周末于是将JVM的学习提上日程. JVM 概念 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是 ...
- 什么是DQL、DML、DDL、DCL
SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下: 1974年-----由Boyce和Chamberlin提出,当时 ...