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. 荐书在精不在多，推荐一份夯实Java基础的必备书单！

    文/黄小斜 转载请注明出处 head first Java 推荐指数:⭐️⭐️⭐️⭐️⭐️ 推荐理由: 说实话,这本书和其他的我Java类型书籍真的大不相同,它不会一本正经地去说技术概念和原理,而是通 ...

  2. .NET Core 3.1 的REST 和gRPC 性能测试

    看到越南小哥 的github 上的Evaluating Performance of REST vs. gRPC , 使用的是.NET Core 3.0 , 今天我把它升级到.NET Core 3.1 ...

  3. Redis对象——集合(Set)

    集合类型 (Set) 是一个无序并唯一的键值集合.它的存储顺序不会按照插入的先后顺序进行存储. 集合类型和列表类型的区别如下: 列表可以存储重复元素,集合只能存储非重复元素: 列表是按照元素的先后顺序 ...

  4. NullPointerException的处理新方式，Java14真的太香了

    在Java语言中,处理空指针往往是一件很头疼的事情,一不小心,说不定就搞出个线上Bug,让你的绩效考核拿到3.25.最近新出的Java14,相信大家都有所耳闻,那么今天就来看看,面对NullPoint ...

  5. PostgreSQL中RECURSIVE递归查询使用总结

    RECURSIVE 前言 CTE or WITH 在WITH中使用数据修改语句 WITH使用注意事项 RECURSIVE 递归查询的过程 拆解下执行的过程 1.执行非递归部分 2.执行递归部分,如果是 ...

  6. 接口 ThreadMXBean 一个很好用的线程管理接口类 可以参考 jdk 帮助文档

    概述  软件包   类  使用  树  已过时  索引  帮助  JavaTM Platform Standard Ed. 6  上一个类   下一个类 框架    无框架    所有类 摘要: 嵌套 ...

  7. Java JUC之Atomic系列12大类实例讲解和原理分解

    Java JUC之Atomic系列12大类实例讲解和原理分解 2013-02-21      0个评论       作者:xieyuooo 收藏    我要投稿 在java6以后我们不但接触到了Loc ...

  8. Property [*****] not found on type [com.erp.pojo.ErpSupplier]

    我实体类里用的是 springboot 里@Slf4j   @Data  注解式写的  这样可以减少代码量 ,但是遇到一个问题影响我好长时间 出现了这个错误  Property [*****] not ...

  9. 编写高质量Python程序（三）基础语法

    本系列文章为<编写高质量代码--改善Python程序的91个建议>的精华汇总. 关于导入模块 Python的3种引入外部模块的方式:import语句.from ... import ... ...

  10. 路径跟踪 PathMeasure的简单使用

    平时用path画一些简单的几何图形,呈现的时候也是已经绘制好的图形,想想,如果像动画一样看到它的绘制轨迹,是不是更酷?今天介绍的这个类PathMeasure就是干这个的,知道它的存在还是由于看了启舰写 ...