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

[[411273]]

简介

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

成都创新互联专注于召陵网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供召陵营销型网站建设，召陵网站制作、召陵网页设计、召陵网站官网定制、小程序开发服务，打造召陵网络公司原创品牌,更为您提供召陵网站排名全网营销落地服务。

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

 
 
 
 
    
  
  
  
  
  1. nativefier 'web.whatsapp.com' 
    2.

项目地址是：

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 
    2.

用法

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

 
 
 
 
    
  
  
  
  
  1. nativefier "medium.com" 
    2.

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

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

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

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

与 Docker 一起使用

Nativefier 也可以在 Docker 中使用。

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

或者自己构建镜像：

 
 
 
 
    
  
  
  
  
  1. docker build -t local/nativefier . 
    2.

使用 docker 构建本地应用：

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

 

 

本文标题：2.7万Star！这个开源工具把网页变成本地应用程序
文章分享：http://www.36103.cn/qtweb/news41/6291.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

关键词优化知识

分类信息网站

公路钻孔机　　 　成都网络营销　　 　二枢服务器托管　　 　渠县网站建设　　 　广安网站建设　　 　成都商城网站制作　　 　重庆网站建设　　 　成都小谭网创广告　　 　seo优化　　 　西云服务器托管　　 　益鑫餐饮　　 　做网站　　 　H5建站　　 　成都响应式网站建设公司　　 　服务器托管　　 　成都主机托管　　 　成都网络推广　　 　新网创想　　 　成都网站建设　　 　正泰动物