查看原文
其他

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

IT服务圈儿 2022-09-11

The following article is from 开源前哨 Author 小秋

作者丨小秋

来源丨开源前哨(ID:osfront)


【导语】:把 Web 页面变成本地应用的命令行工具。

简介

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

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

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:

npm install -g nativefier

用法

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

nativefier "medium.com"

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

nativefier --name 'My Medium App' 'medium.com'

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

-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 拉取最新的稳定镜像:
docker pull nativefier/nativefier
  • 或者自己构建镜像:
docker build -t local/nativefier .
  • 使用 docker 构建本地应用:
docker run --rm -v ~/nativefier-apps:/target/ local/nativefier https://mail.google.com/ /target/


1、微信小程序官方推出!这可能是最好的小程序开源框架

2、微信之父张小龙:做PC版微信是一种破坏

3、硬核图解!断网了,还能ping通 127.0.0.1 吗?为什么?

4、所有计算机考研学校的真题都在这了!

点分享

点点赞

点在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存