Electron包装网站的问题

2021-08-26 10:04:17 阅读：215 来源： 互联网

标签：包装 res cache dest 网站 Electron html sec fetch

原文链接

Preface

最近尝试了很多不错的在线工具，只是每次都要进入网站，有点麻烦，于是想到之前了解过的electron，尝试一下打包成本地应用。

1.下载所有源文件

通过开发者工具，'copy all as Node.js fetch'，然后配合 node-fetch 库，将需要用到的资源下载到本地：

const fs = require('fs')
const fetch = require('node-fetch');

function checkAndWrite(filepath,res) {
   console.log("ok , here it is:",filepath);
   //todo create directory loop  
   const dirpath = filepath.substr(0,filepath.lastIndexOf("/"));
   console.log(dirpath);
   if(!fs.existsSync(dirpath)){
       fs.mkdir(dirpath,{recursive:true},(err)=>{
           if(err != null) {
               console.log("mkdir err:",err);
               return;
           }
           const dest = fs.createWriteStream(filepath);
           res.body.pipe(dest);
       })
       return;
   }

   const dest = fs.createWriteStream(filepath);
   res.body.pipe(dest);
}
// 这个是主页
fetch("https://material.io/resources/color/", {
 "headers": {
   "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
   "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
   "cache-control": "no-cache",
   "pragma": "no-cache",
   "sec-ch-ua": "\"Chromium\";v=\"92\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"92\"",
   "sec-ch-ua-mobile": "?0",
   "sec-fetch-dest": "document",
   "sec-fetch-mode": "navigate",
   "sec-fetch-site": "none",
   "sec-fetch-user": "?1",
   "upgrade-insecure-requests": "1",
   "cookie": "_ga=GA1.2.682063148.1629876102; _gid=GA1.2.1595024389.1629876102"
 },
 "referrerPolicy": "strict-origin-when-cross-origin",
 "body": null,
 "method": "GET",
 "mode": "cors"
}).then(res=>{
   checkAndWrite('./html/main.html',res)
})

// 这个是其中的一个资源
fetch("https://material.io/resources/color/styles/vendor-bab328c105.css", {
 "headers": {
   "accept": "text/css,*/*;q=0.1",
   "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
   "cache-control": "no-cache",
   "pragma": "no-cache",
   "sec-ch-ua": "\"Chromium\";v=\"92\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"92\"",
   "sec-ch-ua-mobile": "?0",
   "sec-fetch-dest": "style",
   "sec-fetch-mode": "no-cors",
   "sec-fetch-site": "same-origin",
   "cookie": "_ga=GA1.2.682063148.1629876102; _gid=GA1.2.1595024389.1629876102; _gat=1"
 },
 "referrer": "https://material.io/resources/color/",
 "referrerPolicy": "strict-origin-when-cross-origin",
 "body": null,
 "method": "GET",
 "mode": "cors"
}).then(res=>{
   checkAndWrite('./html/styles/vendor-bab328c105.css',res)
})

2.在electron中加载

mainWindow = new BrowserWindow({width: 1000, height: 800, webPreferences:{webSecurity:false}})

mainWindow.loadURL(url.format({
    pathname:path.join(__dirname,"/html/main.html"),
    protocol: "file",
    slashes: true
}))

3. 注意的点

main.html 下载下来之后，需要将对应的资源路径改为*相对的本地路径
google-analysis相关的东西都去掉了，应该是用不上的
其他非https://material.io域名下的文件也要下载下来，并且到对应的文件里面去修改相对路径

效果图

源代码

Gitee
Github

标签：包装,res,cache,dest,网站,Electron,html,sec,fetch
来源： https://www.cnblogs.com/adoontheway/p/15188084.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9