不会被预缓存。配置 MaximumFileSizeToCacheInBytes 来更改此限制 (PWA)

Question

帮助我。运行“npm run dev”警告后出现问题：

css/app.css 中的警告为 4.13 MB，并且不会被预缓存。配置 MaximumFileSizeToCacheInBytes 以更改此限制。

警告是什么意思？谁能解释一下吗？以及如何解决呢？谢谢好心人^^

Answer 1

sw-precache 检查 Service Worker 在注册期间将立即缓存（预缓存）哪些文件。在构建期间 sw-precache 发现 app.css 是应用程序的一部分，并希望将其添加到预缓存文件列表中。 但你的 app.css 有 4.13 MB 大，这对于默认配置来说太大了。

首先建议是：检查您是否真的需要那么多 CSS，以及是否可以减小文件大小。

如果这不可能，您可以调整maximumFileSizeToCacheInBytes：

我不确定你是否使用 sw-precache，因为它已经过时了，你应该改用 workbox-build。

对于工作箱构建，通过设置 maximumFileSizeToCacheInBytes 使用以下配置：

// build-sw.js

import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  maximumFileSizeToCacheInBytes: <yourMaxFileSizeInBytesGoesHere>
  .....
});

Answer 2

我今天在使用 vue 3 和使用插件时遇到了类似的问题

@vue/cli-plugin-pwa

。对于任何使用 vuejs 的人，请在

vue.config.js

添加以下代码。

module.exports = {
  pwa: {
    name: "App name",
    themeColor: "#4338ca",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    workboxPluginMode: "GenerateSW",
    workboxOptions: {
      maximumFileSizeToCacheInBytes: 5000000, // <---- increasing the file size to cached 5mb
    },
  },
};

这应该可以解决问题。希望有帮助！

Answer 3

@stef-chäser 的答案是正确的， 如果有人使用 vite-plugin-pwa 请参阅：https://vite-pwa-org.netlify.app/guide/faq#missing-assets-from-sw-precache-manifest

可能有用。