如何向 CRA WorkBox Precache 添加其他文件？答案

【问题标题】：How to add additional files to CRA WorkBox Precache?如何向 CRA WorkBox Precache 添加其他文件？
【发布时间】：2020-08-08 14:21:02
【问题描述】：

所以，我想为我的一个 CRA 项目制作 PWA。该应用程序每次加载时都有不同的壁纸，它通过 API 获取。但是由于 PWA 应该具有离线支持，所以我想要一个缓存的后备壁纸。或者，更好的是，API 的最后一个结果被缓存并返回，直到用户离线。有点像StaleWhileRevalidate 策略。但是如果不从create-react-app 弹出，我无法弄清楚如何实现这一点。有什么想法吗？

谢谢

【问题讨论】：

标签： reactjs webpack progressive-web-apps workbox

【解决方案1】：

好的，我自己想通了。如果其他人需要这个，您可以在项目的根目录中创建一个名为 add_to_precache.js 的文件，并将以下代码添加到其中：

let fs = require('fs');
let build_dir = "./build";
let precache_re = /precache-manifest\.[a-zA-Z0-9]*\.js/

let urls_to_add = [
   /*
 Path to files you want to add relative to build directory. Along with any other homepage value you have. Eg: "/app/background.jpg"
*/
]

function generate_revision(){
    var chars = "abcdefghijklmnopqrstuvwxyzABCDEEFGHIJKLMNOPQRSTUVWXYZ0123456789".split('');
    var revision = '';
    for(let i=0;i<24;i++){
        revision += chars[Math.round(Math.random() * 62)];
    }
    return revision;
}


fs.readdir(build_dir, (err, files) => {
    for(let file of files){
        if(precache_re.test(file)){
            let cont = fs.readFileSync(build_dir + '/' + file).toString()
            cont = cont.slice(0, cont.length - 4)

            urls_to_add.forEach((url) => {
                cont += `,\n  {\n    "url": "${url}",\n    "revision": "${generate_revision()}"\n  }`
            })

            cont += `\n]);`
            fs.writeFileSync(build_dir + '/' + file, cont);
            break;
        }
    }
})

然后修改你的package.json from

//....
"scripts": {
   //....
   "build": "react-scripts build"
   //...
}
//...
}

到

//....
"scripts": {
   //....
   "build": "react-scripts build && node add_to_precache"
   //...
}
//...
}

你就完成了。它会在构建应用程序时发挥作用

【讨论】：

嘿，这为我节省了很多时间，非常感谢！