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. php--理解PHP的依赖注入和laravel的服务容器

    写在前面 为了了解laravel的服务容器在网上搜了许多文章,其中大多数都有其侧重点,没有很系统的一套东西以供参考,看完之后仍觉似乎少了一根把他们串起来的绳子,近期有幸拜读了陈昊的<Larave ...

  2. 家庭记账本app实现登录注册界面以及仿微信操作界面（共4个实现一个）遇到了麻烦

    今天学习了数据的创建,以及关于数据库的相关操作. 今天主要是实现了对于数据库的增加和查找. 具体的代码如下: 首先是数据库的创建: DBOpenMessage.java package com.exa ...

  3. rest_framework-序列化-1

    序列化 定义模型类 from django.db import models # Create your models here. class StuModel(models.Model): SEX_ ...

  4. git log查看某文件的修改历史

    1. git log filename 可以看到fileName相关的commit记录 2. git log -p filename可以显示每次提交的diff 3. 只看某次提交中的某个文件变化,可以 ...

  5. JAVA debug 调试demo

    1.设置断点,在代码的行号后面鼠标左键即可2.想要看调用方法的执行流程,那么调用方法也要加断点. package day6_debug; /* * 1.设置断点,在代码的行号后面鼠标左键即可 * 2. ...

  6. mysql报错: unknown variable 'sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES'

    在修改mysql默认字符集的时候: 1. 需要拷贝/usr/share/mysql下的my-huge.cnf 或者my-small.cnf到 /etc/my.cnf,但是官网说:从5.7.18开始不在 ...

  7. git撤销远程commit

    git reset --hard [commit_id] git push origin HEAD --force

  8. 【python实现卷积神经网络】激活层实现

    代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...

  9. JAVA+HttpServletRequest文件上传

    public Result fileUp(HttpServletRequest request) { RowsVo vo = new RowsVo(); MultipartHttpServletReq ...

  10. 一、uart&tty驱动

    一.I.MX6 UART驱动 文件路径:\linux_IMX6_CoreC_3..35_for_Linux\drivers\tty\serial\imx.c .驱动入口函数:imx_serial_in ...