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

Question

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

谢谢

Answer 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从

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

到

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

大功告成。它将在构建应用程序时发挥作用

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

How to add additional files to CRA WorkBox Precache?

reactjs

webpack

progressive-web-apps

workbox