3

I have some resources which are getting generated on runtime or on build for example scripts, CSS, etc.
The file format is something like this main.min.63716273681.js and similarly for other resources as well.

Unfortunately, I cannot use sw-precache library or anything integrated with my build.

How can I precache those resources, Is it possible to do it using regex?

Note: The question is about precaching the resource and resources are getting generated by AEM(Adobe experience manager)

bhansa
  • 7,282
  • 3
  • 30
  • 55
  • What exactly is the problem? Is the problem that you don't know the exact names of the files you want to cache? In that case it's not possible to help you without more info about your build system. Otherwise just use [toolbox.precache(arrayOfURLs)](https://googlechromelabs.github.io/sw-toolbox/api.html#toolboxprecachearrayofurls) – Wendelin Jun 23 '20 at 21:01
  • Yes, I do not know the number which is getting generated after every build. – bhansa Jun 24 '20 at 09:15
  • are you using webpack? – Vipin Yadav Jun 24 '20 at 12:10

1 Answers1

2

install webpack-manifest-plugin and import at the top of your webpack config file

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

use the below code in your webpack plugin section this will generate a file name asset-manifest.json with all the assets that are build by webpack

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

it will generate file having content like below

// 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"
  ]
}

you can read asset-manifest.json file and take the files object and iterate and check the key having .js in the end.

Hope this will answer your question.

Vipin Yadav
  • 947
  • 4
  • 13
  • Thanks for the answer Vipin, I am using AEM and resources(clientlibs) are getting generated by that. I may have migrate to webpack at some point, so this answer is helpful. – bhansa Jun 24 '20 at 17:27