首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

2.7 万 Star!这个开源工具把网页变成本地应用程序

简介

Nativefier 是一个命令行工具,可以以最少的配置轻松地为任何网站创建桌面应用程序,把 Web 页面变成本地应用的命令行工具。通过 Electron + Chromium 把网站包装成本地 .app、.exe 等可执行文件,支持运行在 Windows、macOS 和 Linux 操作系统上。

例如,为 WhatsApp Web 制作可执行文件,只需要运行以下命令:

代码语言:javascript
复制
nativefier?'web.whatsapp.com'?

项目地址是:

https://github.com/nativefier/nativefier

安装

  • macOS 10.9 + Windows + Linux
  • Node.js >= 12.9 并且 npm >= 6.9
  • 可选依赖

? ? ? ? ?使用 ImageMagick 或 GraphicsMagick来转换图标。确保 convert 和 identify 或 gm 在系统路径 $PATH 中。

? ? ? ? ?Wine 在非 Windows 平台下打包 Windows 应用程序。确保wine在系统路径 $PATH 中。

然后,使用全局安装 Nativefier:

代码语言:javascript
复制
npm?install?-g?nativefier?

用法

要为 medium.com 创建本机桌面应用程序,只需执行以下命令:

代码语言:javascript
复制
nativefier?"medium.com"?

Nativefier 将默认设置应用程序名称以及许多其他选项。用户也可以覆盖这些选项。例如,要覆盖名称:

代码语言:javascript
复制
nativefier?--name?'My?Medium?App'?'medium.com'?

常见的命令行选项有以下这些:

代码语言:javascript
复制
-h,?--help?打印使用信息??-v,?--version?打印?nativefier?版本??-a,?--arch?<value>?构建时的目标处理器架构,ia32,?x64,?armv7l,?arm64??-c,?--conceal?指定本地化应用程序中的源代码是否一并打包,默认为?false??-e,?--electron-version?<value>?指定?Electron?版本??-i,?--icon?<path>?指定应用程序图标??为?Windows?打包时,必须是?.ico?文件的路径。??为?Linux?打包时,必须是?.png?文件的路径。??为?macOS?打包时,如果安装了可选的依赖项,则必须是一个?.icns?或一个?.png?文件。如果有图像转换工具(iconutil,或?ImageMagick?的?conver?+?identify,或?GraphicsMagick?的?gm),Nativefier?将把?.png?自动转换为?.icns??-n,?--name?<value>?应用程序的名称,Linux?上使用时不要包含空格??--no-overwrite?指定目标目录是否不应被覆盖,默认为?false??-p,?--platform?<value>?执行平台。默认为当前操作系统,也可以指定为?linux,windows,osx或mas??--portable?使应用程序将用户数据(cookie、缓存等)存储在应用程序文件夹中??--always-on-top?应用程序启动时保持在屏幕最上层??--background-color?<string>?指定背景颜色,https://www.electronjs.org/docs/api/browser-window#setting-backgroundcolor??--bookmarks-menu?<string>?定义书签菜单的?JSON?文件的路径,如:??{??"menuLabel":?"&Music",??"bookmarks":?[??{??"title":?"lofi.cafe",??"url":?"https://lofi.cafe/",??"type":?"link",??"shortcut":?"CmdOrCtrl+1"??},??{??"title":?"beats?to?relax/study?to",??"url":?"https://www.youtube.com/watch?v=5qap5aO4i9A",??"type":?"link",??"shortcut":?"CmdOrCtrl+2"??},??{??"type":?"separator"??},??{??"title":?"R?F?S?DU?SOL?Live?from?Joshua?Tree",??"type":?"link",??"url":?"https://www.youtube.com/watch?v=Zy4KtD98S2c"??}??]??}??--disable-context-menu?禁用上下文菜单??--disable-dev-tools?禁用?Chrome?开发者工具??--full-screen?使打包的应用程序全屏启动??--height?<value>?打包应用的高度,默认为800px??--hide-window-frame?禁用窗口框架和控件??--max-height?<value>?打包应用的最大高度,默认为无限制??--max-width?<value>?打包应用的最大宽度,默认为无限制??--maximize?使打包的应用程序最大化启动??--min-height?<value>?打包应用的最小高度,默认为0??-m,?--show-menu-bar?是否应显示菜单栏??--single-instance?单例,防止应用程序多次运行??--title-bar-style?<value>?设置应用标题栏的样式??/*?site.css?*/??/*?header?is?draggable...?*/??header?{??-webkit-app-region:?drag;??}??/*?but?any?buttons?inside?the?header?shouldn't?be?draggable?*/??header?button?{??-webkit-app-region:?no-drag;??}??/*?perhaps?move?some?items?out?of?way?for?the?traffic?light?*/??header?div:first-child?{??margin-left:?100px;??margin-top:?25px;??}??--x?<value>?打包应用程序窗口的?X?位置??--y?<value>?打包应用程序窗口的?Y?位置??--zoom?<value>?设置应用程序打开时要使用的默认缩放系数,默认为1.0??--lang?<value>?设置语言,"fr",?"en-US",?"es"等?

与 Docker 一起使用

Nativefier 也可以在 Docker 中使用。

  • 从 Docker Hub 拉取最新的稳定镜像:
代码语言:javascript
复制
docker?pull?nativefier/nativefier?

或者自己构建镜像:

代码语言:javascript
复制
docker?build?-t?local/nativefier?.?

使用 docker 构建本地应用:

代码语言:javascript
复制
docker?run?--rm?-v?~/nativefier-apps:/target/?local/nativefier?https://mail.google.com/?/target/?
  • 发表于:
  • 原文链接http://news.51cto.com/art/202107/672170.htm
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券
http://www.vxiaotou.com