怎样在 Windows 中将网站变成桌面应用程序

由于用户可以通过 Web 浏览器访问它们,因此今天的许多 Web 开发人员没有看到为其网站开发 Windows 应用程序的实际好处。 如果您喜欢以不同的方式做事,您可以轻松地将这些网站变成桌面应用程序。

内容

桌面应用程序的优势

桌面应用程序可让您更快地访问网站,您可以方便地将其快捷方式添加到任务栏、开始菜单或桌面。 应用程序容器中的网站也占据了整个窗口框架或可选的整个屏幕,而没有任何分散注意力的元素,如浏览器工具栏或地址栏。

1. Microsoft Edge

Microsoft Edge 提供了将网站转换为应用程序的最快方式,因为它预装了 Windows。 当您将网站安装为应用程序时, Edge 将网站与浏览器分开,在任务栏上创建自己的图标和实例,并删除工具栏,使网站看起来更像一个应用程序。 此外, Edge 仍将为整个应用程序提供动力,因此您可以使用任何已启用的扩展程序并使用您保存的任何数据自动填写表单。

  1. 在里面 Edge 浏览器,访问您要转换为应用程序的网站。
  1. 单击屏幕上的水平三点图标 Edge 工具栏(或按 Alt + F)。
  2. 转到“应用程序”,然后单击“将此站点安装为应用程序”。
Jr Screenshot00016 Sitestodesktopapps02
  1. 如果需要,更改应用程序的名称,然后单击“安装”将应用程序添加到 Edge 应用程序列表。
Jr Screenshot00017 Sitestodesktopapps03
  1. 根据需要配置应用程序权限,然后单击“允许”以应用这些更改。
Jr Screenshot00018 Sitestodesktopapps04

优点

  • 快速且易于设置。
  • 适用于任何网站。
  • 方便的应用程序菜单,用于启动任何转换后的应用程序。
  • 可以访问允许您执行网络搜索的侧边栏。
  • 自动更新。

缺点

  • 消耗更多内存。
  • 仅限于一个会话。
  • 不支持同步。

2. Google Chrome

如果你不想 Microsoft Edge 要为您的应用程序供电,您可以尝试 Google Chrome 相反,因为转换的步骤是相似的。

  1. 在 Chrome,访问您想变成应用程序的网站。
Jr Screenshot00019 Sitestodesktopapps05
  1. 单击屏幕上的三点图标 Chrome 工具栏(或按 Alt + F)。
  2. 从那里转到“更多工具”,然后单击“创建快捷方式”。
Jr Screenshot00020 Sitestodesktopapps06
  1. 如果需要,更改应用程序的名称,勾选“打开为窗口”复选框,然后单击“创建”以完成转换。
Jr Screenshot00021 Sitestodesktopapps07

小费:这也是创建 Gmail 桌面应用程序的最简单方法。

优点

  • 快速且易于设置。
  • 支持 Chrome 表单的扩展和自动填充。
  • 适用于任何网站。
  • 应用程序跨桌面同步 Chrome 通过您的 Google 帐户进行安装。
  • 带有更大图标的更干净的专用应用程序页面。

缺点

  • 消耗更多内存。
  • 仅限于一个会话。

3. 网络目录

网络目录 是一个第三方应用程序,包含一个流行网站库,您可以将其安装为桌面应用程序。 不像 Microsoft Edge,每个应用程序都包含在自己的称为 Photon 的浏览器引擎中。

Photon 在基于 Chromium 的框架 Electron 上运行,它将 WebCatalog 应用程序与其他浏览器和其他浏览器隔离开来,同时保持与大多数网站的良好兼容性。

这使得 WebCatalog 更加安全,因为您的默认浏览器上的任何潜在妥协都不会影响任何 WebCatalog 应用程序,因为每个应用程序都有自己的 cookie、缓存和独特的会话。 WebCatalog 还为您提供了创建网站的多个会话的选项,而无需您切换浏览器配置文件。

  1. 安装程序后,打开 WebCatalog 并使用搜索栏查找您希望安装为应用程序的网站。
  2. 单击网站图标下的“安装”,让 WebCatalog 创建应用程序。 WebCatalog 还将在“开始”菜单的“应用程序”部分添加快捷方式。
Jr Screenshot00022 Sitestodesktopapps08
  1. 如果 WebCatalog 未在其目录中列出您希望转换的网站,请单击“创建自定义应用程序”图块以显示一个对话框,您可以在其中自定义应用程序。
Jr Screenshot00023 Sitestodesktopapps09
  1. 为应用程序命名并在 URL 字段中输入网站地址。 使用 URL 字段下方的任何选项指定网站的图标,然后单击“安装”以设置应用程序。
Jr Screenshot00024 Sitestodesktopapps10

优点

  • 内置目录可让您发现新的网站和服务。
  • 孤立的会话。
  • 不 Chrome 或者 Edge 追踪。
  • 可定制的界面。
  • 自动更新。
  • 完整版内置广告和跟踪器拦截器。

缺点

  • 消耗的磁盘空间比 Edge 或者 Chrome 应用。
  • 免费版仅限 10 个应用程序和每个应用程序 2 个会话。

4. 使用 Nativefier

像网络目录一样, 本地人 依靠 Electron 将网站放置在隔离容器中以提高安全性。 但是,Nativefier 不提供任何图形用户界面或目录来强制您使用命令行将站点转换为应用程序。

没有花里胡哨的东西使 Nativefier 成为低 RAM 计算机的不错选择。 由于没有中央集线器将 Nativefier 驱动的应用程序捆绑在一起,因此您可以完全自由地放置这些应用程序,并且可以将它们复制或移动到便携式存储设备。 Nativefier 也是开源的,您可以制作任意数量的应用程序而无需支付额外费用。

Nativefier 需要最多的安装步骤,但一旦安装,您就可以从命令行一步制作 Nativefier 驱动的应用程序。

  1. 安装 Node.js 的最新 LTS 版本 在您的 PC 上。

笔记:不要更改安装程序中的任何设置。

Jr Screenshot00025 Sitestodesktopapps11
  1. 启动“开始”菜单或 Windows 搜索并搜索“终端”。
  2. 单击搜索结果侧面板上的“以管理员身份运行”以打开 Windows 终端窗口 admin 特权。
Jr Screenshot00026 Sitestodesktopapps12 1
  1. 单击 Windows 终端标题栏上指向下方的小箭头,然后转到“设置”(或按 Ctrl + ,)。
网站进入 PC 应用程序设置终端
  1. 在“启动”中,将“默认配置文件”设置为“命令提示符”,因为此步骤将简化制作 Nativefier 应用程序的过程。
网站进入 PC 应用程序默认配置文件
  1. 点击 ”Save” 以应用更改。
  1. 按标题栏上的小“+”图标以在终端中打开命令提示符窗口。
网站进入 PC 应用程序新窗口终端
  1. Enter 在终端中使用以下命令安装 Nativefier。
    npm install -g nativefier
  2. 等待 Node Package Manager 下载 Nativefier 工作所需的依赖项。
Jr Screenshot00028 Sitestodesktopapps14 2
  1. 启动 Windows 资源管理器并浏览到您希望放置 Nativefier 应用程序的文件夹位置。
  2. 按住 Shift 键的同时右键单击文件夹,然后单击“在终端中打开”。
Jr Screenshot00028 Sitestodesktopapps14
  1. 要创建基本的 Nativefier 应用程序,请使用以下格式输入此命令:
nativefier --name "Website Name" https://www.websitename.com

笔记:将引号之间的“网站名称”替换为您要转换的网站的名称,并将“websitename.com”替换为该站点的地址。 等待 Nativefier 下载任何所需的文件并构建应用程序。

Jr Screenshot00030 Sitestodesktopapps16
  1. 返回资源管理器窗口并打开包含您新创建的应用程序的文件夹。
  2. 在那里启动唯一的可执行文件。 然后,您可以将应用程序固定到任务栏或开始菜单,就像您对任何其他 Windows 应用程序所做的那样。
Jr Screenshot00031 Sitestodesktopapps17

优点

  • 创建任意数量的应用程序和隔离会话。
  • 不 Chrome 或者 Edge 追踪。
  • 点亮资源。
  • 完全便携。
  • 开源架构。

缺点

  • 没有图形用户界面。
  • 应用程序必须手动单独更新。
  • 某些网站(例如 Google 服务)存在兼容性问题。
  • 消耗的磁盘空间比 Edge 或者 Chrome 应用。

经常问的问题

我可以在同一台计算机上尝试所有解决方案吗?

是的! Microsoft Edge, Google Chrome、WebCatalog 和 Nativefier 都可以在 Windows 中共存。 实际上,您可以拥有 4 个不同的应用程序,每个应用程序都包含同一个网站,并具有各自的会话和 cookie。

怎样使用自定义设置构建 Nativefier 应用程序?

打开终端并输入此命令以列出所有 Nativefier 的命令行参数,以进一步自定义应用程序: nativefier --help.

怎样查看我制作的所有转换后的应用程序?

在 Microsoft Edge,单击工具栏上的三点图标,转到“应用程序”,然后单击“管理应用程序”。 在 Google Chrome,单击“收藏夹”栏上的“应用程序”按钮。 如果您看不到“收藏夹”栏或图标,请转至以下网址: chrome://应用/. 要查看您使用 WebCatalog 创建的所有应用程序,请从“开始”菜单启动 WebCatalog,然后单击左侧边栏上的“已安装”。 Nativefier 不会跟踪您制作的应用程序。

图片来源: 乌克斯温. John Ruiz 的所有截图

订阅我们的新闻!

我们最新的教程直接发送到您的收件箱

注册所有时事通讯。 注册即表示您同意我们的隐私政策并且欧洲用户同意数据传输政策。 我们不会共享您的数据,您可以随时取消订阅。 订阅