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预缓存？

1 个答案: