如何将应用转换成系统应用

Converting a website to a native app, whether on mobile or desktop, can be quite useful.  The problem with bookmarks, especially for software engineers, is that we often need to work in different browsers, so having everything in one browser's bookmark set can be a pain.  I'd also argue that websites with a specific purpose area great case for converting a website to desktop app.  I recently found nativefier, an open source utility that creates a native desktop app by wrapping the site in Electron.

将网站转换为本地应用程序(无论是在移动设备还是台式机上)都非常有用。 书签的问题特别是对于软件工程师而言，是我们经常需要在不同的浏览器中工作，因此在一个浏览器的书签集中设置所有内容可能会很麻烦。 我也认为具有特定用途区域的网站是将网站转换为桌面应用程序的绝佳案例。 我最近找到了nativefier ，这是一个开放源代码实用程序，它通过将网站包装在Electron中来创建本地桌面应用程序。

安装 (Installation)

You can use NPM to install nativefier and node-icns, which we'll use to create a custom icon for the app:

您可以使用NPM安装nativefier和node-icns，我们将使用它们来为应用创建自定义图标：

npm install -g nativefier # App creator
npm install -g node-icns  # Icon creator

The nativefier docs provide a method for creating the desktop app icon but ImageMagick and iconutils are required -- node-icns will save you some pain.

nativefier文档提供了一种用于创建桌面应用程序图标的方法，但是需要ImageMagick和iconutils-node-icns可以减轻您的痛苦。

创建应用程序图标 (Create the App Icon)

It's important to create the app icon before creating the app itself.  You can create an app icon with node-icns and an image of your choice:

在创建应用程序本身之前创建应用程序图标很重要。 您可以创建带有节点图标和您选择的图像的应用程序图标：

# Generate icon set required by macOS
nicns --in app-icon.png --out app-icon.icns

Use a high-quality, square-shaped PNG -- transparency will be preserved and file size doesn't matter since the files will live on your machine.

使用高质量的方形PNG-将保留透明性，并且文件大小并不重要，因为文件将保留在您的计算机上。

创建应用 (Creating the App)

nativefier provides a whole host of configuration parameters you can use to create your app.  Let's create an app using many of the useful parameters:

nativefier提供了许多配置参数 ，可用于创建应用程序。 让我们使用许多有用的参数创建一个应用程序：

nativefier \
--name "David Walsh Blog" \
--verbose \
--counter \
--icon app-icons.icns \
--fast-quit \
--inject custom-css.css \
--inject custom-js.js \
--flash # gross
"https://davidwalsh.name"

A directory named "{appname}-darwin-x64" will be generated and within that directory will be the app file, which you can drag to your Applications folder (or whatever your OS equivalent is) and to your dock.  You'll note that you can add custom user JavaScript and CSS files so that you can hide advertisements, modify colors and behavior, and so on.  The --counter argument is particularly interesting -- a web app like Gmail that updates its <title> tag as a pseudo-notification will trigger a red notification dot over the app icon when an update is made.

将生成一个名为“ {appname} -darwin-x64”的目录，该目录中将包含该应用程序文件，您可以将其拖到“ Applications文件夹(或任何等效于OS的文件夹)中，并拖到扩展坞中。 您会注意到，您可以添加自定义用户JavaScript和CSS文件，以便隐藏广告，修改颜色和行为等。 counter argument特别有趣-像Gmail这样的网络应用程序将其<title>标记更新为伪通知时，会在进行更新时在应用程序图标上触发一个红色的通知点。

Web apps like IRCCloud and websites like DevDocs are perfect candidates for conversion to desktop app.

Web应用程序像IRCCloud和喜欢的网站DevDocs是用于转换为桌面应用程序，完美的候选人。

Thanks to Byron Jones for letting me know about nativefier!

感谢拜伦·琼斯(Byron Jones)让我知道了nativefier！

翻译自: https://davidwalsh.name/convert-websites-apps

如何将应用转换成系统应用