• 150632

    文章

  • 1244

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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


简介

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

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

  
  1. 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:

  
  1. npm install -g nativefier 

用法

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

  
  1. nativefier "medium.com" 

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

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

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

  
  1. -h, --help 打印使用信息 
  2.  
  3. -v, --version 打印 nativefier 版本 
  4.  
  5. -a, --arch <value> 构建时的目标处理器架构,ia32, x64, armv7l, arm64 
  6.  
  7. -c, --conceal 指定本地化应用程序中的源代码是否一并打包,默认为 false 
  8.  
  9. -e, --electron-version <value> 指定 Electron 版本 
  10.  
  11. -i, --icon <path> 指定应用程序图标 
  12.  
  13. 为 Windows 打包时,必须是 .ico 文件的路径。 
  14.  
  15. 为 Linux 打包时,必须是 .png 文件的路径。 
  16.  
  17. 为 macOS 打包时,如果安装了可选的依赖项,则必须是一个 .icns 或一个 .png 文件。如果有图像转换工具(iconutil,或 ImageMagick 的 conver + identify,或 GraphicsMagick 的 gm),Nativefier 将把 .png 自动转换为 .icns 
  18.  
  19. -n, --name <value> 应用程序的名称,Linux 上使用时不要包含空格 
  20.  
  21. --no-overwrite 指定目标目录是否不应被覆盖,默认为 false 
  22.  
  23. -p, --platform <value> 执行平台。默认为当前操作系统,也可以指定为 linux,windows,osx或mas 
  24.  
  25. --portable 使应用程序将用户数据(cookie、缓存等)存储在应用程序文件夹中 
  26.  
  27. --always-on-top 应用程序启动时保持在屏幕最上层 
  28.  
  29. --background-color <string> 指定背景颜色,https://www.electronjs.org/docs/api/browser-window#setting-backgroundcolor 
  30.  
  31. --bookmarks-menu <string> 定义书签菜单的 JSON 文件的路径,如: 
  32.  
  33.  
  34. "menuLabel""&Music"
  35.  
  36. "bookmarks": [ 
  37.  
  38.  
  39. "title""lofi.cafe"
  40.  
  41. "url""https://lofi.cafe/"
  42.  
  43. "type""link"
  44.  
  45. "shortcut""CmdOrCtrl+1" 
  46.  
  47. }, 
  48.  
  49.  
  50. "title""beats to relax/study to"
  51.  
  52. "url""https://www.youtube.com/watch?v=5qap5aO4i9A"
  53.  
  54. "type""link"
  55.  
  56. "shortcut""CmdOrCtrl+2" 
  57.  
  58. }, 
  59.  
  60.  
  61. "type""separator" 
  62.  
  63. }, 
  64.  
  65.  
  66. "title""RÜFÜS DU SOL Live from Joshua Tree"
  67.  
  68. "type""link"
  69.  
  70. "url""https://www.youtube.com/watch?v=Zy4KtD98S2c" 
  71.  
  72.  
  73.  
  74.  
  75. --disable-context-menu 禁用上下文菜单 
  76.  
  77. --disable-dev-tools 禁用 Chrome 开发者工具 
  78.  
  79. --full-screen 使打包的应用程序全屏启动 
  80.  
  81. --height <value> 打包应用的高度,默认为800px 
  82.  
  83. --hide-window-frame 禁用窗口框架和控件 
  84.  
  85. --max-height <value> 打包应用的最大高度,默认为无限制 
  86.  
  87. --max-width <value> 打包应用的最大宽度,默认为无限制 
  88.  
  89. --maximize 使打包的应用程序最大化启动 
  90.  
  91. --min-height <value> 打包应用的最小高度,默认为0 
  92.  
  93. -m, --show-menu-bar 是否应显示菜单栏 
  94.  
  95. --single-instance 单例,防止应用程序多次运行 
  96.  
  97. --title-bar-style <value> 设置应用标题栏的样式 
  98.  
  99. /* site.css */ 
  100.  
  101. /* header is draggable... */ 
  102.  
  103. header { 
  104.  
  105. -webkit-app-region: drag; 
  106.  
  107.  
  108. /* but any buttons inside the header shouldn't be draggable */ 
  109.  
  110. header button { 
  111.  
  112. -webkit-app-region: no-drag; 
  113.  
  114.  
  115. /* perhaps move some items out of way for the traffic light */ 
  116.  
  117. header div:first-child { 
  118.  
  119. margin-left: 100px; 
  120.  
  121. margin-top: 25px; 
  122.  
  123.  
  124. --x <value> 打包应用程序窗口的 X 位置 
  125.  
  126. --y <value> 打包应用程序窗口的 Y 位置 
  127.  
  128. --zoom <value> 设置应用程序打开时要使用的默认缩放系数,默认为1.0 
  129.  
  130. --lang <value> 设置语言,"fr""en-US""es"等 

与 Docker 一起使用

Nativefier 也可以在 Docker 中使用。

  • 从 Docker Hub 拉取最新的稳定镜像:
  
  1. docker pull nativefier/nativefier 

或者自己构建镜像:

  
  1. docker build -t local/nativefier . 

使用 docker 构建本地应用:

  
  1. docker run --rm -v ~/nativefier-apps:/target/ local/nativefier https://mail.google.com/ /target/ 

【编辑推荐】



695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客