PWA技术

PWA全称Progressive Web App,即渐进式WEB应用。

解决的问题

  • 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
  • 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • 实现了消息推送

service worker

  • 必须要https,除了127.0.0.1

  • html要设置为每次都response.clone(),这样html每次更新可以及时生效

  • 除了配置的每次会更新外,其他的不设置,如果配置文件发生修改(例如manifest.json)要修改sw的版本号

更新缓存

manifest.json

当manifest.json更新的时候需要更新sw的版本号,

手机上操作不流畅,经常出现不能添加到桌面,Chrome浏览器,华为手机(未来会变好)

主屏幕上添加的快速入口能够及时随页面更新

推送

依赖的GCM服务在国内无法使用
  • 注册push
 const subscribeOptions = {
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'
)
}; registration.pushManager.subscribe(subscribeOptions);

推荐Service Worker配置:https://www.cnblogs.com/yiyi17/p/10975301.html

PWA技术深入学习的更多相关文章

  1. VC++/MFC(VC6)开发技术精品学习资料下载汇总

    工欲善其事,必先利其器,VC开发MFC Windows程序,Visual C++或Visual Studio是必须的,恩,这里都给你总结好了,拿去吧:VC/MFC开发必备Visual C++.Visu ...

  2. (转)探讨:ASP.NET技术的学习顺序问题

    探讨:ASP.NET技术的学习顺序问题 摘要:很多人对于ASP.NET的入门和学习顺序比较迷茫,今天让我们一起来跟随作者的思路学习探讨ASP.NET的学习顺序问题,希望有所帮助. 如果你已经有较多的面 ...

  3. 分布式缓存技术redis学习系列

    分布式缓存技术redis学习系列(一)--redis简介以及linux上的安装以及操作redis问题整理 分布式缓存技术redis学习系列(二)--详细讲解redis数据结构(内存模型)以及常用命令 ...

  4. 【转】手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)

    1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理!   我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...

  5. 手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)

    1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理!   我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...

  6. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  7. 对WebSocket技术的学习与探索(二)

    近日重新开始学习WebSocket技术,什么是WebSocket,在<对WebSocket技术的学习与探索(一)>文章中已经说明白了,还没理解可以看看这篇文章http://www.ruan ...

  8. Hbase技术详细学习笔记

    注:转自 Hbase技术详细学习笔记 最近在逐步跟进Hbase的相关工作,由于之前对Hbase并不怎么了解,因此系统地学习了下Hbase,为了加深对Hbase的理解,对相关知识点做了笔记,并在组内进行 ...

  9. PWA 技术落地!让你的站点(Web)秒变APP(应用程序)

    Web应用方兴未艾,我们已经十分习惯习惯了在电脑上进行以自己的工作,而随着众多功能强大的在线网站,我们的Windows的桌面也不再拥挤着各种快捷方式:不光是PC端,在移动端我们也不再在浩如烟海的应用市 ...

随机推荐

  1. 怎样签发SSL证书

    最近在做怎样让网站有SSL,搞了一天,现在总结一下 首先要安装OPENSSL和 Java的 keytool 先用OPENSSL生成私钥和CSR openssl req -newkey rsa:2048 ...

  2. Spring boot 搭配 JPA 生成表注释 和 字段注释

    原文地址:https://blog.csdn.net/qq_39996837/article/details/84717748 由于在数据库表反向生成过程中呢,需要通过jpa自动生成表,并且这个表必须 ...

  3. android 实现照相功能 照片存放在SID卡中,将照片显示在Image中

    protected static final int CAMERA_RESULT = 0; private String fileName; private Button takePhotoBn; p ...

  4. 百度音乐免费API接口

    音乐分类: 1.新歌榜,2.热歌榜,11.摇滚榜,12.爵士,16.流行21.欧美金曲榜,22.经典老歌榜,23.情歌对唱榜,24.影视金曲榜,25.网络歌曲榜 说明:百度music web版全接口h ...

  5. Thinkphp5.0 的视图view的模板布局

    Thinkphp5.0 的视图view的模板布局 使用include,文件包含: <!-- 头部 --> <div class="header"> {inc ...

  6. hdu_1398_Square Coins_201404260953

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  7. [bzoj3306]树_dfs序_线段树_倍增lca

    树 bzoj-3306 题目大意:给定一颗n个节点的树,支持换根.修改点权.查询子树最小值. 注释:$1\le n,q\le 10^5$. 想法: 如果没有换根操作,就是$dfs$序+线段树维护区间最 ...

  8. noi.openjudge——8465 马走日

    http://noi.openjudge.cn/ch0205/8465/ 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  1024kB 描述 马在中国象棋以日字形规则移动. 请编写 ...

  9. MongoDB小结01 - MongoDB简介

    我们为什么要去学习MongoDB MongoDB是一种强大.灵活.可扩展的数据存储方式. 丰富的数据模型 MongoDB是面向文档的数据库,不是关系型数据库.它将原来'行'(row)的概念换成了更加灵 ...

  10. Android GIS开发系列-- 入门季(12) 显示载天地图

    在项目中可以经常需要动态加载一些图层,像投影地图服务.投影地图服务器.其实网上有大量这样的服务,比如天地图官网, . 随便点开一个服务,里面有相关的信息.那如何加载这样图层服务呢. 一.首先感谢这篇博 ...