HTML5离线Web应用

跳房子的前端

于 2024-09-18 00:39:57 发布

阅读量98

点赞数 4

分类专栏： Html5 学习之路文章标签：前端 html5 html

本文链接：https://blog.csdn.net/shenfangda520/article/details/142321511

版权

Html5 学习之路专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML5离线Web应用

这个功能主要通过两种技术实现：应用缓存（Application Cache）和服务工作线程（Service Workers）。不过需要注意的是，应用缓存已经被废弃，现在更推荐使用服务工作线程。

应用缓存 (Application Cache)

虽然应用缓存已经被废弃，但了解它的概念可以帮助我们更好地理解离线Web应用的发展。

应用缓存使用一个缓存清单文件（manifest file）来指定哪些文件应该被缓存以供离线使用。

基本用法（仅作为历史参考）：

<html manifest="example.appcache">
  ...
</html>

manifest文件示例：

CACHE MANIFEST
# 2024-09-18 v1.0.0
/home.html
/style.css
/script.js
/logo.png

NETWORK:
*

FALLBACK:
/ /offline.html

服务工作线程 (Service Workers)

服务工作线程是一种更强大、更灵活的方式来实现离线功能。它们本质上是在后台运行的脚本，可以拦截网络请求，访问缓存和推送通知。

基本用法：

注册服务工作线程：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功，范围是：', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败：', error);
    });
}

创建服务工作线程脚本 (sw.js)：

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('缓存已打开');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});