iOS上PWA添加到主屏幕后为什么没有离线功能？

巧云的笔记提问于 2026-03-17 15:56:22 阅读 69

移动

我在Safari里把PWA加到主屏幕了，但一断网就打不开页面，安卓上明明可以离线用的。是不是iOS不支持Service Worker？还是我哪里配置错了？

manifest.json和service worker都按教程写了，navigator.serviceWorker.register()在Safari里也能注册成功，但离线时请求还是直接失败。

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

iOS支持 PWA移动

我来解答赞 6 收藏

反馈

1 条解答

打工人哲玮 Lv1

iOS Safari确实支持Service Worker，但有个坑：它的缓存策略和Chrome不太一样，你写的这个Cache-First策略在iOS上可能不生效。

问题在于iOS Safari的PWA更偏向“网络优先”，不太愿意直接用缓存。试试改成Stale-while-revalidate或者先尝试网络，失败了再走缓存：

self.addEventListener('fetch', event => {

  event.respondWith(

    fetch(event.request).catch(() => {

      return caches.match(event.request);

    })

  );

});

这样iOS会先尝试网络请求，断网了才用缓存，比你原来的逻辑更适合Safari的行为。

另外确认几件事：

manifest.json里display要设成standalone，还有start_url要对。还有HTML里要加iOS的meta标签：

最后提醒一下，iOS的PWA缓存不太靠谱，有时候系统会悄悄清掉缓存数据。如果对离线要求特别高，可以考虑同时用IndexedDB在页面JS里也存一份关键数据，双重保障。

2026-03-17 19:17