怎么通过HTML5中Manifest属性配置离线应用并处理资源的增量更新逻辑-H5教程-PHP中文网

html5 manifest已彻底废弃，无法实现增量更新；应改用service worker，它支持按需缓存、版本管理、api响应缓存及运行时控制。

怎么通过html5中manifest属性配置离线应用并处理资源的增量更新逻辑

HTML5 的 manifest 属性已彻底不可用，不能用于配置离线应用，也无法实现可靠的资源增量更新。

Chrome 自 78 版起移除支持，Firefox 85+ 禁用，Safari 从未完整实现，W3C 已将其从标准中删除。你现在写的 manifest="cache.manifest" 不仅不会触发缓存，还可能在控制台报错、阻断资源加载，甚至导致页面白屏。

它所谓的“增量更新”根本不存在——只要 manifest 文件任意字节变化（包括一个空格或注释时间戳），整个缓存组就会被清空并重新下载所有资源。没有版本管理、无法按需更新单个文件、不区分静态资源与 API 响应，也不提供运行时 API 控制。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

✅ 正确方案：用 Service Worker 替代 Manifest

Service Worker 是目前唯一标准支持、可精确控制离线行为的机制，能真正实现按需缓存、条件更新、API 响应缓存、版本化管理。

1. 注册 Service Worker（放在页面 JS 中）

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW registration failed:', err));
  });
}

⚠️ 必须通过 HTTPS（或 localhost）提供服务，否则注册静默失败。

2. 编写 `service-worker.js`

const CACHE_NAME = 'my-site-v2';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

3. 实现真正的“增量更新”

更新逻辑由你完全控制：修改 service-worker.js 文件内容（如改 CACHE_NAME = 'my-site-v3'），浏览器下次访问会拉取新脚本、触发 install，并在 activate 阶段清理旧缓存：

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.map(key => {
          if (key !== CACHE_NAME) return caches.delete(key);
        })
      )
    )
  );
});