pwa静态页面限制

Question

我有一个 pwa，旨在用于连接性较差的地区。当我缓存少于 100 pages/assets 时，SW 寄存器和页面被缓存并且一切正常。

当我超过 100 pages/assets 时，SW 无法注册。（关闭 2000 页）

我尝试缓存的总文件大小为 20mb，因此这不是磁盘 space 问题。

None 我找到的文献表明存在这样的资产限制。

有页数限制吗？

这是我的工作代码：

const app_version = '2';
const staticCacheName = 'site-static-v2';
const dynamicCacheName = 'site-dynamic-v1';
const assets = [
'/',
'/index.html',
'/library.html',
'/view_offline.html',
'/player.html',
'/json.js',
'/content.js',
'/js/app.js',
'/js/ui.js',
'/js/materialize.min.js',
'/css/styles.css',
'/css/h5p.css',
'/css/materialize.min.css',
'/img/dish.png',
'https://fonts.googleapis.com/icon?family=Material+Icons',
'https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2',
'/pages/fallback.html',
//HERE IS WHERE I WANT TO ADD THE OTHER 1990 odd pages in the same method
];

// install event
self.addEventListener('install', evt => {
  console.log('service worker installed');
  evt.waitUntil(
    caches.open(staticCacheName).then((cache) => {
      console.log('caching shell assets');
      cache.addAll(assets);
    })
  );
});

Answer 1

提供离线体验并不一定等同于确保整个 website/app 都可以离线使用。不。相反，我们应该努力保留最常见的交互和核心功能（Application Shell）。如果用户在我们现有缓存的内容之外发出请求（离线时），则显示适当的消息。

但是，如果您坚持让超过 2k 页面的内容离线可用，那么您应该考虑创建一个 聚合页面，即 pre-updated（在服务器端) 以及来自 pre-determined 页面范围的信息。使用此方法，您只需缓存一个页面而不是数千个页面。

或者，您可以将许多页面的文本内容存储在离线数据库中，例如 IndexedDB。请在此处查看 Google 的教程：https://www.youtube.com/watch?v=VNFDoawcmNc

拥有一个离谱大小的缓存也会在较慢的设备上遭受性能损失。推荐使用lazy-loading来维护快加载应用。请记住，我们不需要在用户第一次访问您的主页时加载整个网站。

Additional Information

PWA 的存储限制：。

提高 PWA client-side 性能的最佳实践：https://dev.mobify.com/v1.x/how-to-guides/categories/performance/client-side-performance

pwa静态页面限制

pwa static page limit

javascript

progressive-web-apps