共计 5055 个字符,预计需要花费 13 分钟才能阅读完成。
翻译 |《JavaScript Everywhere》第 19 章 将现有的 Web 应用程序与 Electron 集成
写在最后面
大家好呀,我是毛小悠,是一位前端开发工程师。正在翻译一本英文技术书籍。
为了进步大家的浏览体验,对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央,或者你有任何意见或者倡议,能够在评论区留言,或者加我的微信:code
_maomao,欢送互相沟通交流学习。
(σ゚∀゚)σ..:*☆哎哟不错哦
第 19 章 将现有的 Web 应用程序与 Electron 集成
我喜爱收集浏览器书签,就像一个小孩在沙滩上收集贝壳一样。我不是肯定要收集它们,然而到一天完结时,我曾经在几个浏览器窗口中关上了许多选项卡。我并不是夸耀,但我狐疑应该不止我一个人是这样。所以,我应用了一些最罕用的 Web
应用程序的桌面版本。通常,这些应用程序比照网页版并没有什么劣势,然而独立应用程序的便利性使它们全天易于拜访、查找和切换。
在本章中,咱们将钻研如何获取现有的 Web
应用程序并将其包装在 Electron Shell
中。在持续之前,你将须要装置示例 API
和Web
应用程序的本地正本。如果你还没有浏览整本书,请拜访附录 A
和附录 B
进行操作。
集成咱们的 Web 应用程序
在上一章中,咱们设置了 Electron
应用程序加载 index.html
文件。咱们也能够加载特定的 URL
。在本例中,咱们将从加载本地运行的Web
应用程序的 URL
开始。首先,请确保你的 Web
应用程序和 API
在本地运行。而后咱们能够更新 src/index.js
文件,首先将 BrowserWindow
中的 nodeIntegration
设置为false
。这将防止本地运行的节点应用程序拜访内部站点的平安危险。
webPreferences: {nodeIntegration: false},
当初,更改window.loadFile
(‘index.html
‘);,如下:
window.loadURL('http://localhost:1234');
运行 Web 应用程序
你的 Web
应用程序的本地实例将须要在 1234
端口上运行。如果你始终在浏览本书,请从 Web
应用程序目录的根目录运行 npm start
来启动开发服务器。
这将批示 Electron
加载 URL
,而不是文件。当初,如果你应用npm start
运行该应用程序,你会看到它已加载到 Electron
窗口中,但有一些正告。
正告和谬误
Electron
浏览器开发者工具和咱们的终端显示了大量正告和谬误。让咱们看一下其中的每一个(见图19-1
)。
图19-1
。咱们的应用程序正在运行,但显示大量谬误和正告。
首先,咱们的终端显示了大量 SyntaxError
:Unexpected Token errors.
此外,咱们的开发者工具会显示几个相应的正告,指出 DevTools
无奈解析 SourceMap
。这两个谬误与Parcel
生成 source map
和Electron
读取 source map
的形式无关。可怜的是,联合咱们正在应用的技术,仿佛没有针对此问题的正当解决方案。最好的抉择是禁用 JavaScript
源映射。在应用程序窗口的开发人员工具中,单击“设置”,而后勾销选中“启用 JavaScript
源映射”(请参见图19-2
)。
图19-2
。禁用源映射将缩小谬误和正告的数量
当初,如果退出并重新启动应用程序,将不再看到与源地图无关的问题。这样做的代价是,在 Electron
内调试客户端 JavaScript
可能会更加艰难,然而值得庆幸的是,咱们依然能够在 Web
浏览器中拜访此性能和咱们的应用程序。
最初两个正告与 Electron
的安全性无关。在将生产应用程序捆绑在一起之前,咱们将解决这些问题,然而当初值得探讨这些正告是什么。
Electron Security Warning
(Insecure Resources
)电子平安正告(资源不平安)
此正告告诉咱们,咱们正在通过 http
连贯加载 Web
资源。在生产中,咱们应始终通过 https
加载资源,以确保隐衷和平安。在开发中,通过 http
加载本地主机不是问题,因为咱们将援用托管网站,该网站在捆绑的应用程序中应用https
。
Electron Security Warning
(Insecure Content-Security-Policy
)电子平安正告(不平安的内容安全策略)
此正告告诉咱们咱们尚未设置内容安全策略(CSP
)。CSP
容许咱们指定容许咱们的应用程序从哪个域加载资源,从而大大降低了跨站点脚本(XSS
)攻打的危险。同样,在本地开发期间这不是问题,但在生产中很重要。咱们将在本章稍后局部应用CSP
。
解决了咱们的谬误后,咱们就能够设置应用程序的配置文件了。
配置
在本地进行开发时,咱们心愿可能运行 Web
应用程序的本地版本,然而在将应用程序捆绑以供其他人应用时,咱们心愿它援用公共可用的URL
。咱们能够设置一个简略的配置文件来解决此问题。
在咱们的 ./ src
目录,咱们将增加一个 config.js
文件,咱们能够在其中存储特定于应用程序的属性。我已蕴含一个配置模板。你可用于从终端轻松复制它:
cp src/config.example.js src/config.js
当初咱们能够填写应用程序的属性:
const config = {
LOCAL_WEB_URL: 'http://localhost:1234/',
PRODUCTION_WEB_URL: 'https://YOUR_DEPLOYED_WEB_APP_URL',
PRODUCTION_API_URL: 'https://YOUR_DEPLOYED_API_URL'
};
module.exports = config;
为什么不应用.env?
在以前的环境中,咱们应用.env
文件来治理特定于环境的设置。在这种状况下,因为 Electron
应用程序捆绑其依赖项的形式,咱们应用了 JavaScript
配置文件。
当初在 Electron
应用程序的次要过程中,咱们能够应用配置文件来指定咱们要在开发和生产中加载的 URL
。在src/index.js
,首先导入config.js
文件:
const config = require('./config');
当初,咱们能够更新 loadURL
性能认为每种环境加载不同的URL
:
// load the URL
if (is.development) {window.loadURL(config.LOCAL_WEB_URL);
} else {window.loadURL(config.PRODUCTION_WEB_URL);
}
通过应用配置文件,咱们能够轻松地为 Electron
提供特定于环境的设置。
内容平安政策
如本章后面所述,CSP
容许咱们限度应用程序是否有权从中加载资源的域名。这有助于限度潜在的 XSS
和数据注入攻打。在 Electron
中,咱们能够指定 CSP
设置来帮忙进步应用程序的安全性。要理解无关电子和 Web
应用程序的 CSP
的更多信息,我倡议你无关该主题的 MDN
文章。
Electron
提供了用于 CSP
的内置 API
,然而electronic-util
库提供了更简略,更简洁的语法。在咱们的 src/index.js
的顶部,更新 electronic-util
导入语句以蕴含setContentSecurityPolicy
:
const {is, setContentSecurityPolicy} = require('electron-util');
当初,咱们能够为应用程序的生产版本设置CSP
:
// set the CSP in production mode
if (!is.development) {
setContentSecurityPolicy(`
default-src 'none';
script-src 'self';
img-src 'self' https://www.gravatar.com;
style-src 'self' 'unsafe-inline';
font-src 'self';
connect-src 'self' ${config.PRODUCTION_API_URL};
base-uri 'none';
form-action 'none';
frame-ancestors 'none';
`);
}
通过编写 CSP
,咱们能够应用CSP
评估程序工具查看谬误。如果咱们无意通过其余 URL
拜访资源,则能够将其增加到 CSP
规定集中。
咱们最终的 src/index.js
文件的内容如下:
const {app, BrowserWindow} = require('electron');
const {is, setContentSecurityPolicy} = require('electron-util');
const config = require('./config');
// to avoid garbage collection, declare the window as a variable
let window;
// specify the details of the browser window
function createWindow() {
window = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {nodeIntegration: false}
});
// load the URL
if (is.development) {window.loadURL(config.LOCAL_WEB_URL);
} else {window.loadURL(config.PRODUCTION_WEB_URL);
}
// if in development mode, open the browser dev tools
if (is.development) {window.webContents.openDevTools();
}
// set the CSP in production mode
if (!is.development) {
setContentSecurityPolicy(` default-src 'none';
script-src 'self';
img-src 'self' https://www.gravatar.com;
style-src 'self' 'unsafe-inline';
font-src 'self';
connect-src 'self' ${config.PRODUCTION_API_URL};
base-uri 'none';
form-action 'none';
frame-ancestors 'none'; `);
}
// when the window is closed, dereference the window object
window.on('closed', () => {window = null;});
}
// when electron is ready, create the application window
app.on('ready', createWindow);
// quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS only quit when a user explicitly quits the application
if (process.platform !== 'darwin') {app.quit();
}
});
app.on('activate', () => {
// on macOS, re-create the window when the icon is clicked in the dock
if (window === null) {createWindow();
}
});
这样,咱们就能够在 Electron Shell
中运行 Web
应用程序(如图 19-3
所示)。
图 19-3
。咱们在Electron
应用程序 shell
中运行的 Web
应用程序
论断
在本章中,咱们将现有的 Web
应用程序集成到 Electron
桌面应用程序中,这使咱们可能疾速将桌面应用程序推向市场。值得注意的是,这种办法须要衡量取舍,因为它提供了特定于桌面的劣势,并且须要 Internet
连贯能力拜访应用程序的全副性能。对于心愿将台式机应用程序推向市场的咱们来说,这些毛病可能值得。在下一章中,咱们将钻研如何构建和散发 Electron
应用程序。
如果有了解不到位的中央,欢送大家纠错。如果感觉还能够,麻烦您点赞珍藏或者分享一下,心愿能够帮到更多人。