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. BigDecimal 笔记

    参数 BigDecimal 类主要有如下几个参数 这几个参数都比较好理解,看过这两个例子基本都能明白,现在总结一下就是 scale // 小数点后位数 precision // 一共位数 intCom ...

  2. Eclipse(Eclipse for android)代码自动提示设置

    java代码和xml资源代码在有的eclipse中可以自己提示,但有的并不支持这个功能,还得我们人为去调整,主要原因是因为你们下载的elipse的渠道不同,获得的版本有的官方原版,有的是个人备份版等等 ...

  3. MySQL5.7使用Notifier启动、停止服务时出现的问题

    1.选择右击右下角 MySQL Notifier ,选择 Actions -> Manage Monitored Items 2.选择当前的服务 MySQL57  并进行删除 3.然后点击  a ...

  4. django中写分页

    1.引用函数import from django.core.paginator import Paginator 2.分页 page_obj = Paginator(Article.objects.a ...

  5. 并发——深入分析ThreadLocal的实现原理

    一.前言   这篇博客来分析一下ThreadLocal的实现原理以及常见问题,由于现在时间比较晚了,我就不废话了,直接进入正题. 二.正文 2.1 ThreadLocal是什么   在讲实现原理之前, ...

  6. Prometheus 监控MySQL

    目录 0.简介 1.mysql_exporter部署 2.mysql报警规则 0.简介 文中主要监控MySQL/MySQL主从信息 版本:mysql-5.7,mysql_exporter-0.12.1 ...

  7. GO中的channel使用小结

    go关键字可以用来开启一个goroutine(协程))进行任务处理,而多个任务之间如果需要通信,就需要用到channel了. func testSimple(){ intChan := make(ch ...

  8. spring 管理事务配置时，结果 报错： No Hibernate Session bound to thread, and configuration does not allow creation of non-transactional one here这个异常

    java.lang.IllegalStateException: No Hibernate Session bound to thread, and configuration does not al ...

  9. AJ学IOS 之微博项目实战(3)微博主框架-UIImage防止iOS7之后自动渲染_定义分类

    AJ分享,必须精品 一:效果对比 当我们设置tabBarController的tabBarItem.image的时候,默认情况下会出现图片变成蓝色的效果,这是因为ios7之后会对图片自动渲染成蓝色 代 ...

  10. windows编译动态链接库，dll+lib的形式

    之前一直在linux上做开发,没怎么关注过windows上如何编译动态链接库.不过一直存疑,为什么windows上的动态链接库是.dll配合.lib使用的,这个又是怎么生成的呢,通过一段时间的查资料和 ...