Javascript 在Service Worker中预处理生成的资产

Javascript 在Service Worker中预处理生成的资产,javascript,aem,service-worker,offline-caching,Javascript,Aem,Service Worker,Offline Caching,我有一些在运行时或构建时生成的资源,例如脚本、CSS等。 文件格式类似于main.min.63716273681.js,对于其他资源也是如此 不幸的是,我不能使用sw precache库或任何与我的构建集成的东西 如何预缓存这些资源,是否可以使用regex进行预缓存 注意:问题是关于预编译资源,资源由AEM(Adobe experience manager)生成。安装网页清单插件并在网页配置文件顶部导入 const ManifestPlugin = require('webpack-manife

我有一些在运行时或构建时生成的资源,例如脚本、CSS等。
文件格式类似于
main.min.63716273681.js
,对于其他资源也是如此

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

如何预缓存这些资源,是否可以使用regex进行预缓存


注意:问题是关于预编译资源,资源由AEM(Adobe experience manager)生成。

安装网页清单插件并在网页配置文件顶部导入

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"
  ]
}
您可以读取
assetmanifest.json
文件,获取files对象,迭代并检查最后包含.js的键


希望这能回答您的问题。

到底是什么问题?问题是您不知道要缓存的文件的确切名称吗?在这种情况下,如果没有关于构建系统的更多信息,就不可能帮助您。否则只需使用Yes,我不知道每次构建后生成的数字。您使用的是webpack吗?感谢Vipin的回答,我使用的是AEM,资源(clientlibs)由此生成。我可能在某个时候迁移到了webpack,所以这个答案很有帮助。