在 Service Worker 中預緩存生成的資產

Question

我有一些在運行時或構建時生成的資源，例如腳本、CSS 等。
文件格式類似於main.min.63716273681.js ，其他資源也類似。

不幸的是，我不能使用sw-precache庫或與我的構建集成的任何東西。

我如何預緩存這些資源，是否可以使用正則表達式來做到這一點？

注意：問題是關於預緩存資源和資源由 AEM（Adobe 體驗管理器）生成

Answer 1

安裝 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,
 }),

它將生成具有如下內容的文件

// 資產清單.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文件並獲取文件object並迭代並檢查最后的密鑰have.js。

希望這能回答你的問題。