跳到主要内容

离线应用

如何构建web离线应用​

  • Service Worker和Cache API来实现离线缓存和离线访问功能
  • 要使用Cache API实现离线缓存和访问，您需要在Service Worker中编写缓存逻辑
  1. 在Service Worker脚本中，使用caches.open()方法创建一个新的缓存。
  2. 在caches.open()方法的回调函数中，使用cache.addAll()或cache.put()方法将您的静态资源添加到缓存中。cache.addAll()方法接受一个URL数组，将这些URL指定的文件添加到缓存中。cache.put()方法接受一个Request对象和一个Response对象，将Response对象添加到缓存中
  3. 在Service Worker脚本中，使用fetch事件拦截网络请求，并在缓存中查找相应的资源。如果缓存中存在匹配的资源，则返回缓存的响应。如果缓存中不存在匹配的资源，则继续从网络请求资源。
  4. 配置Service Worker的生命周期，使其在更新时自动清除旧的缓存。在Service Worker更新时，您可以使用caches.delete()方法从缓存中删除旧的缓存。

PWA​

让网站具备接近原生 App的体验，PWA = 可以被安装、可以独立窗口打开、可以缓存资源、可支持离线使用的网站

  • 用户不需要输入网址，直接点击桌面应用的图标，就能打开，类似APP的体验

  • PWA全称Progressive Web App，即渐进式WEB应用

    • 是提升WebApp的体验的一种新方法，能给用户原生应用的体验

  • 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

  • 可被浏览器主动发现

App Manifest 目的 将web应用程序安装到设备屏幕

PWA 的主要 技术点​

  • 离线可用 ( Service Worker )
  • 主屏图标 ( App Manifest )
  • 通知 ( Push API & Notification API )

离线访问​

  • PWA 可以用 Service Worker 缓存静态资源
  • 用户断网后，仍然可能打开页面