logo标签列表

在Service Worker中预加载生成的资产

javascriptaemservice-workeroffline-caching
3

我有一些在运行时或构建过程中生成的资源，例如脚本、CSS等。

文件格式类似于main.min.63716273681.js，其他资源也类似。

不幸的是，我不能使用sw-precache库或任何与我的构建集成的东西。

我该如何预缓存这些资源？是否可以使用正则表达式来完成？

注意：该问题是关于预缓存资源，而这些资源是由AEM（Adobe Experience Manager）生成的。

问题到底是什么？问题是你不知道要缓存的文件的确切名称吗？如果是这种情况，没有更多关于您的构建系统的信息，我们无法帮助您。否则，只需使用 toolbox.precache(arrayOfURLs)。 - Wendelin
是的，我不知道每次构建后生成的数字是多少。 - bhansa
你在使用webpack吗？ - Vipin Yadav
1个回答
2

安装webpack-manifest-plugin并将其导入到您的webpack配置文件的顶部

const ManifestPlugin = require('webpack-manifest-plugin');

在你的webpack插件部分中使用以下代码，它会生成一个名为asset-manifest.json的文件，其中包含由webpack构建的所有资产。

new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath: your public path here,
 }),

它将生成类似以下内容的文件：
// asset-manifest.json
{
  "files": {
    "about.js": "/static/js/about.bc816d03.chunk.js",
    "about.js.map": "/static/js/about.bc816d03.chunk.js.map",
    "dashboard.js": "/static/js/dashboard.f180c270.chunk.js",
    "dashboard.js.map": "/static/js/dashboard.f180c270.chunk.js.map",
    "homepage.js": "/static/js/homepage.4dd0316c.chunk.js",
    "homepage.js.map": "/static/js/homepage.4dd0316c.chunk.js.map",
    "login.js": "/static/js/login.1b8cf466.chunk.js",
    "login.js.map": "/static/js/login.1b8cf466.chunk.js.map",
    "logout.js": "/static/js/logout.ac3c5758.chunk.js",
    "logout.js.map": "/static/js/logout.ac3c5758.chunk.js.map",
    "main.css": "/static/css/main.977b6895.chunk.css",
    "main.js": "/static/js/main.a65a1d5d.chunk.js",
    "main.js.map": "/static/js/main.a65a1d5d.chunk.js.map",
    "profile.js": "/static/js/profile.20ae3dae.chunk.js",
    "profile.js.map": "/static/js/profile.20ae3dae.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.ad8b0a50.js",
    "runtime-main.js.map": "/static/js/runtime-main.ad8b0a50.js.map",
    "static/js/8.796ce7e3.chunk.js": "/static/js/8.796ce7e3.chunk.js",
    "static/js/8.796ce7e3.chunk.js.map": "/static/js/8.796ce7e3.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.e770a629726af82e25b547dd941bae89.js": "/precache-manifest.e770a629726af82e25b547dd941bae89.js",
    "service-worker.js": "/service-worker.js",
    "static/css/main.977b6895.chunk.css.map": "/static/css/main.977b6895.chunk.css.map",
    "static/js/8.796ce7e3.chunk.js.LICENSE.txt": "/static/js/8.796ce7e3.chunk.js.LICENSE.txt",
    "static/media/arvidsson.jpg": "/static/media/arvidsson.4d6f8e0d.jpg",
    "static/media/logo.jpg": "/static/media/logo.8caa15b8.jpg",
    "static/media/pekka.jpg": "/static/media/pekka.1eab475c.jpg"
  },
  "entrypoints": [
    "static/js/runtime-main.ad8b0a50.js",
    "static/js/8.796ce7e3.chunk.js",
    "static/css/main.977b6895.chunk.css",
    "static/js/main.a65a1d5d.chunk.js"
  ]
}

你可以阅读asset-manifest.json文件并获取其中的文件对象，然后迭代并检查以.js结尾的键。
希望这能回答你的问题。
感谢您的回答，Vipin。我正在使用AEM，并且由它生成资源（clientlibs）。我可能需要在某个时候迁移到webpack，因此这个答案很有帮助。 - bhansa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接