如何向 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"
   //...
}
//...
}

你完成了。 它會在構建應用程序時發揮作用