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. 部署并测试动态WSGI站点

                                                            部署并测试动态WSGI站点 5.1问题 本例要求为站点webapp0.example.c ...

  2. python--Django（三）视图

    Django的视图 不同于其他语言的MVC模式,Django采用的是MVT模式,即Model.View.Template,这里的View其实质就是其他语言中的Controller(emmm.....) ...

  3. spark 独立应用编程之 Java 编程

    文章更新于:2020-04-03 按照惯例,文件附上链接放在文首. 文件名:apache-maven-3.6.3-bin.tar.gz 文件大小:9.1 MB 下载链接:https://www.lan ...

  4. 打造一款 刷Java 知识的小程序（一）

    一.为什么要打造 Java要学的东西太多了,所以准备把这些知识汇总到一起,而小程序是一个比较好的入口,借助微信客户端,打开方便. 二.打造成什么样 首页展示:包含了Java各大知识点模块 知识点展示: ...

  5. [go]map基本使用和底层原理

    1.map基本使用 map声明 var m4 map[int]int //只是声明 没有开辟空间 m4[1]=100 //报错 log.Println(m4) 创建 //1 m3:=make(map[ ...

  6. scala_spark实践2

    参考:jianshu.com/p/9d2d225c1951 监听socket获取数据,代码如下:这里使用nc -lk 9999 在ip为10.121.33.44的机器上发送消息 object Sock ...

  7. 查看jdk 线程 日志

    命令:jstack(查看线程).jmap(查看内存)和jstat(性能分析)命令 这些命令 必须 在 linux jdk bin 路径 下执行 eq: ./jstack 10303 即可  如果想把 ...

  8. 解决xcode ***is missing from working copy

    这是由于SVN置顶文件导致的,cd 至项目根目录 命令行 输入 find . -type d -name .svn | xargs rm -rf

  9. [模板]SPFA判负环

    目录 一.BFS法判负环 二.DFS法判负环 三.SPFA判正环 一.BFS法判负环 Code: #include<bits/stdc++.h> #define re register # ...

  10. Extended Traffic LightOJ - 1074 （经典SPFA问题）

    题目大意:每一个城市都有一定的繁荣度,然后给出m条有向边i->j,定义这条边的权值为pow(arr[j]-arr[i],3),然后给你q个询问,每个询问输入一个x. 然后问你点1到x的距离,如果 ...