如何使用HTML5中PeriodicBackgroundSync在后台自动拉取每日更新的新闻-H5教程-PHP中文网

PeriodicBackgroundSync API 已被彻底废弃：Chrome 90+ 移除，Firefox 和 Safari 从未支持，W3C 标记为“Inactive”，调用会报 TypeError；应改用 Background Sync 配合时间判断或 Push API 实现机会型每日同步。

如何使用html5中periodicbackgroundsync在后台自动拉取每日更新的新闻

PeriodicBackgroundSync 无法使用。

这个 API 已被彻底废弃：Chrome 90+ 版本中已移除，Firefox 和 Safari 从未支持，W3C 规范也标记为“Inactive”。任何尝试调用 navigator.periodicSync.register() 的代码都会报错，例如：

TypeError: navigator.periodicSync is undefined

它不是“还没普及”，而是已失效、不可用、不应再写入新项目。

替代方案：用 BackgroundSync 模拟“每日新闻同步”

虽然不能真正定时唤醒，但可通过以下方式，在用户设备联网且页面活跃/可见时，检查是否超过24小时并触发一次新闻拉取：

✅ 推荐做法：网络恢复 + 时间判断

在 Service Worker 中监听 'sync' 事件，结合本地时间缓存判断间隔：

self.addEventListener('sync', async (event) => {
  if (event.tag === 'daily-news-fetch') {
    const cache = await caches.open('meta');
    const lastTimeResp = await cache.match('/last-news-sync');
    const lastTime = lastTimeResp ? parseInt(await lastTimeResp.text()) : 0;
    const now = Date.now();
    const interval = 24 * 60 * 60 * 1000; // 24 小时

    if (now - lastTime >= interval) {
      event.waitUntil(fetchAndCacheNews());
      await cache.put('/last-news-sync', new Response(now.toString()));
    }
  }
});

⚠️ 注意：sync 事件只在网络恢复时触发，不是定时器。所以这是“机会型同步”——用户开网页、切回标签页、重连Wi-Fi时才可能执行，但能保证每天至少尝试一次（只要用户有联网行为）。

HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

更可靠的做法：结合 Push API（需用户授权）

如果你的网站已获得推送权限，后端可每天固定时间向用户推送一个无声消息（{"type":"news-update"}），Service Worker 收到后立即拉取新闻：

self.addEventListener('push', async (event) => {
  const data = event.data?.json();
  if (data?.type === 'news-update') {
    event.waitUntil(fetchAndCacheNews());
  }
});

优点：真正可控、接近每日定时；
缺点：需用户开启通知权限，且部分浏览器对无交互推送有限制。

前台兜底：页面加载时检查

在网页 JS 中，每次加载时判断是否超时，并主动触发同步注册（仅限前台）：

if ('serviceWorker' in navigator && 'sync' in navigator.serviceWorker) {
  navigator.serviceWorker.ready.then(reg => {
    reg.sync.register('daily-news-fetch');
  });
}

这不会唤醒后台，但能确保下次网络恢复时有机会执行。

不复杂但容易忽略：浏览器禁止无用户参与的后台周期任务，这是出于隐私与续航的强制限制。所谓“每日自动拉新闻”，必须接受它的非精确性——重点是保证最终送达，而非准时送达。