service worker 离线存储

简介：

一般的网站 在我们无法访问的 时候 一般 回出现 如下 该网页无法访问

service worker 构建的网站不会出现这个错误，因为所有的 请求都是先经过 service work

在往后端发送，在没有网的情况下，就回出现 预先声明的内容，先缓存了预先声明的文件 类似 如下

创建 步骤

  • 先注册 service-worker
  • 声明哪些文件需要缓存起来

具体MDN写的非常清晰，我就不贴代码了

要求

只能是https环境，在本地开发的时候，localhost 是可以用http的，但上了生产环境必须得是https 不然不生效

demo

https://mdn.github.io/sw-test/

文档参见

https://developer.mozilla.org...
https://lavas.baidu.com/pwa/o...

文章来自胡城的个人网站

前端存储 (5) - service worker 离线存储的更多相关文章

  1. Service Worker 离线无法缓存Post请求的问题解决

    许多非REST API甚至可以用于读取数据的POST请求:典型的例子是graphql.soap和其他rpcpapi.但是,Post请求不能在一个现成的渐进式Web应用程序中缓存和脱机使用.浏览器的缓存 ...

  2. H5 离线存储-使用 serverWorker 实现

    H5 离线存储-使用 serverWorker 实现 离线存储所用技术 serverWorker serviceWorker 生命周期 install 事件会在 serviceWorker 注册成功时 ...

  3. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

  4. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  5. html5 离线存储 worker

    html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...

  6. 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

    一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...

  7. localForage——轻松实现 Web 离线存储

    Web 应用程序有离线功能,如保存大量数据集和二进制文件.你甚至可以做缓存 MP3 文件这样的事情.浏览器技术可以保存离线数据和大量的储存.但问题是,如何选择合适技术,如何方便灵活的实现. 如果你需要 ...

  8. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  9. html5 离线存储 地理信息与本地存储

    搭建离线应用程序 ①服务器设置头信息 : AddType text/cache-manifest .manifest ② html标签加 : manifest=“xxxxx.manifest” ③写m ...

随机推荐

  1. .NET Core项目部署到Linux(Centos7)（一）前言

    目录 1.前言 2.环境和软件的准备 3.创建.NET Core API项目 4.VMware Workstation虚拟机及Centos 7安装 5.Centos 7安装.NET Core环境 6. ...

  2. find的基本查询命令《一》

    一. find的基本查询命令 find命令最常用的是查找某个文件,如: find ./ -name "abc.txt" 则会在当前目录及子目录下查找abc.txt文件 更常用的是查 ...

  3. JVM 理解性学习（一）

    重新学习,重新理解 1.类加载过程等 验证:.class 文件加载到 JVM 里的时候,会验证下该文件是否符合 JVM 规范. 准备:给实体类分配内存空间,以及给类变量(static 修饰)分配&qu ...

  4. 前端面试题解密：经典算法之冒泡算法（ES6版）及优化

    前言 随着前端的飞速发展,前端业务开发给前端工程师提出了更高的要求,因而算法题也越来越高频次的出现在前端面试中.有很多的小伙伴找胡哥苦诉,在前端实际开发中(除了涉及游戏开发方面),算法使用有很多吗?大 ...

  5. android 软件（app）之家庭版记账本首次进行helloword等相关测试

    在进行对于app的创建之前是对于android studio的相关安装的环境的配置,完成这些之后自己就写个一个简单的helloword的实例进行了测试.之后通过进一步的向下挖掘,发现当将hellowo ...

  6. 最全的中文NLP资源库，你确定不来看一下吗？

    最全的中文NLP资源库,你确定不来看一下吗? 22/100 发布文章 qq_39248703 hello,小伙伴们大家好,今天给大家分享NLP资源库,可以说是最全的资源库了,很多包非常有趣,值得收藏, ...

  7. c++存储区

    全局变量与静态变量区.常量区.局部变量区(栈).动态存储区(堆).自由存储区 1.全局变量与静态变量区->存放全局变量.静态变量,程序运行结束后释放 2.常量区->存放常量 3.局部变量区 ...

  8. java 的 数字、汉字 和 字母 的所占字节长度 与 字符长度 （邮件限制50个汉字）

    public static void main(String[] args) {  String a = "餿餿餿餿餿z";  byte[] bytes = a.getBytes( ...

  9. 数据结构和算法(Golang实现)(12)常见数据结构-链表

    链表 讲数据结构就离不开讲链表.因为数据结构是用来组织数据的,如何将一个数据关联到另外一个数据呢?链表可以将数据和数据之间关联起来,从一个数据指向另外一个数据. 一.链表 定义: 链表由一个个数据节点 ...

  10. break与continue用法注意事项

    break 中断循环执行,跳出循环 注意,break只能中断自己所在的循环,一般用在内层循环,但是不能中断外层循环中的代码. continue 跳到循环的下一轮继续执行,结束自己所在循环体代码,继续自 ...