document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-02-03 23:40:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

translated

Browse Source
This commit is contained in:
geekpi 2021-11-09 08:51:54 +08:00
parent 35a281e903
commit 94fe51eee3
2 changed files with 201 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
sources/tech/20211103 Turn any website into a Linux desktop app with open source tools.md
View File

@ -1,202 +0,0 @@
[#]: subject: "Turn any website into a Linux desktop app with open source tools"
[#]: via: "https://opensource.com/article/21/11/linux-apps-nativefier"
[#]: author: "Ayush Sharma https://opensource.com/users/ayushsharma"
[#]: collector: "lujun9972"
[#]: translator: "geekpi"
[#]: reviewer: " "
[#]: publisher: " "
[#]: url: " "
Turn any website into a Linux desktop app with open source tools
======
Nativefier and Electron creates desktop apps from any website.
![Text editor on a browser, in blue][1]
Mastodon is a great open source, decentralised social network. I use Mastodon every day, and it's probably most common to use Mastodon through its web interface (although being open source, there are many different ways to interact with it, including terminal-based applications and mobile apps), but I prefer dedicated application windows.
Recently, I discovered [Nativefier][2], and I can now enjoy Mastodon, or any other web app, as a desktop application on my Linux desktop. Nativefier takes a URL and wraps it with the Electron framework, which runs the open source Chromium browser as its backend but runs as its own executable application. Nativefier is licensed under the MIT license and is available for Linux, Windows, and macOS.
### Installing Nativefier
Nativefier requires Node.js
Installing Nativefier is as simple as running:
```
`$ sudo npm install -g nativefier`
```
On my Ubuntu desktop, I had to upgrade NodeJS first, so be sure to check what versions of Node is required when you install Nativefier.
Once installed, you can check your version of Nativefier to verify that it's been installed:
```
$ nativefier --version
45.0.4
```
Running `nativefier --help` lists all options the app supports.
### Setup
I recommend that you create a new folder called `~/NativeApps` before you start creating apps with Nativefier. This helps keep your applications nice and organized.
```
$ mkdir ~/NativeApps
cd ~/NativeApps
```
### Creating an app for Mastodon
I'll start by creating an app for [mastodon.technology][3].
Use the command:
```
$ nativefier --name Mastodon \
\--platform linux --arch x64 \
\--width 1024 --height 768 \
\--tray --disable-dev-tools \
\--single-instance <https://mastodon.technology>
```
The options in this example do the following:
* `--name`: Sets the app name to Mastodon
* `--platform`: Sets the app's platform to Linux
* \--arch x64: Sets the architecture to x64
* `--width 1024 --height 768`: Sets the apps' dimensions on launch
* `--tray`: Creates a tray icon for the app
* `--disable-dev-tools`: Disables Chrome dev tools
* `--single-instance`: Only allows one instance of the app
Running that single command shows the following output:
```
Preparing Electron app...
Converting icons...
Packaging... This will take a few seconds, maybe minutes if the requested Electron isn't cached yet...
Packaging app for platform linux x64 using electron v13.4.0 Finalizing build...
App built to /home/tux/NativeApps/Mastodon-linux-x64, move to wherever it makes sense for you and run the contained executable file (prefixing with ./ if necessary)
Menu/desktop shortcuts are up to you, because Nativefier cannot know where you're going to move the app. Search for "linux .desktop file" for help, or see <https://wiki.archlinux.org/index.php/Desktop\_entries>
```
The output shows that the files get placed in `/home/tux/NativeApps/Mastodon-linux-x64`. When you `cd` into this folder, you see a file named Mastodon. This is the main executable that launches the app. Before you can launch it, you must give it the appropriate permissions.
```
$ cd Mastodon-linux-x64
chmod +x Mastodon
```
Now, execute `./Mastodon` to see your Linux app launch!
![Mastodon app launched][4]
(Ayush Sharma, [CC BY-SA 4.0][5])
### Creating an app for my blog
For fun, I'm going to create an app for my blog website as well. What good is having a tech blog if there's no Linux app for it?
![Ayush Sharma blog][6]
(Ayush Sharma, [CC BY-SA 4.0][5])
The command:
```
$ nativefier -n ayushsharma \
-p linux -a x64 \
\--width 1024 --height 768 \
\--tray --disable-dev-tools \
\--single-instance <https://ayushsharma.in>
$ cd ayushsharma-linux-x64
chmod +x ayushsharma
```
### Creating an app for findmymastodon.com
And finally, here's an app for my pet project, [findmymastodon.com][7].
![Find my mastodon website][8]
(Ayush Sharma, [CC BY-SA 4.0][5])
The command:
```
$ nativefier -n findmymastodon \
-p linux -a x64 \
\--width 1024 --height 768 \
\--tray --disable-dev-tools \
\--single-instance <https://findmymastodon.com>
$ cd findmymastodon-linux-x64
chmod +x findmymastodon
```
### Creating Linux desktop icons
With the apps created and the executables ready to go, it's time to create desktop icons.
As a demonstration, here's how to create a desktop icon for the Mastodon launcher. First, download an icon for [Mastodon][9]. Place the icon in its Nativefier app directory as `icon.png`.
Then create a file called `Mastodon.desktop` and enter this text:
```
[Desktop Entry]
Type=Application
Name=Mastodon
Path=/home/tux/NativeApps/Mastodon-linux-x64
Exec=/home/tux/NativeApps/Mastodon-linux-x64/Mastodon
Icon=/home/tux/NativeApps/Mastodon-linux-x64/icon.png
```
You can move the `.desktop` file to your Linux desktop to have it as a desktop launcher. You can also place a copy of it in `~/.local/share/applications` so it shows up in your application menu or activity launcher.
### Conclusion
I love having dedicated apps for tools I use often. My favorite feature about having an app for Mastodon is that once I log in to Mastodon, I don't have to log in again! Nativefier runs Chromium underneath. So it's able to remember your session just like any browser does. I'd like to give a special thanks to the Nativefier team for taking the Linux desktop one step closer to perfection.
* * *
_This article originally appeared on the [author's website][10] and is republished with permission._
--------------------------------------------------------------------------------
via: https://opensource.com/article/21/11/linux-apps-nativefier
作者：[Ayush Sharma][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/ayushsharma
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/browser_blue_text_editor_web.png?itok=lcf-m6N7 (Text editor on a browser, in blue)
[2]: https://github.com/nativefier/nativefier
[3]: https://mastodon.technology/
[4]: https://opensource.com/sites/default/files/uploads/2_launch-mastodon-app.png (Mastodon app launched)
[5]: https://creativecommons.org/licenses/by-sa/4.0/
[6]: https://opensource.com/sites/default/files/uploads/3_ayush-shama-blog.png (Ayush Sharma blog)
[7]: https://findmymastodon.com/
[8]: https://opensource.com/sites/default/files/uploads/4_find-my-mastodon-app.png (Find my mastodon website)
[9]: https://icons8.com/icons/set/mastodon
[10]: https://ayushsharma.in/2021/10/make-linux-apps-for-notion-mastodon-webapps-using-nativefier

201
translated/tech/20211103 Turn any website into a Linux desktop app with open source tools.md Normal file
View File

@ -0,0 +1,201 @@
[#]: subject: "Turn any website into a Linux desktop app with open source tools"
[#]: via: "https://opensource.com/article/21/11/linux-apps-nativefier"
[#]: author: "Ayush Sharma https://opensource.com/users/ayushsharma"
[#]: collector: "lujun9972"
[#]: translator: "geekpi"
[#]: reviewer: " "
[#]: publisher: " "
[#]: url: " "
用开源工具将任何网站变成 Linux 桌面应用
======
使用 Nativefier 和 Electron 从任何网站创建桌面应用。
![Text editor on a browser, in blue][1]
Mastodon 是一个很好的开源、去中心化的社交网络。我每天都在使用 Mastodon，通过它的网页界面使用 Mastodon 可能是最常见的（尽管因为开源，它有许多不同的交互方式，包括基于终端的应用和移动应用），但我更喜欢专门的应用窗口。
最近，我发现了 [Nativefier][2]，现在我可以在我的 Linux 桌面上把 Mastodon 或其他任何网络应用作为桌面应用来使用。Nativefier 将一个 URL 用 Electron 框架包装起来，它将开源的 Chromium 浏览器作为后端，但使用自己的可执行程序运行。Nativefier 获得了 MIT 许可，可用于 Linux、Windows 和 MacOS。
### 安装 Nativefier
Nativefier 需要 Node.js。
安装 Nativefier 只需运行：
```
`$ sudo npm install -g nativefier`
```
在我的 Ubuntu 桌面上，我必须先升级 NodeJS，所以当你安装 Nativefier 时，一定要检查需要哪个 Node 版本。
安装完毕后，你可以检查你的 Nativefier 的版本，以验证它是否已经安装：
```
$ nativefier --version
45.0.4
```
运行 `nativefier --help` 列出了应用支持的所有选项。
### 设置
我建议你在开始用 Nativefier 创建应用之前，创建一个名为 `~/NativeApps` 的新文件夹。这有助于保持你的应用有序。
```
$ mkdir ~/NativeApps
cd ~/NativeApps
```
### 为 Mastodon 创建一个应用程序
我将首先为 [mastodon.technology][3] 创建一个应用。
使用以下命令：
```
$ nativefier --name Mastodon \
\--platform linux --arch x64 \
\--width 1024 --height 768 \
\--tray --disable-dev-tools \
\--single-instance <https://mastodon.technology>
```
这个例子中的选项做了以下工作：
* `--name`：设置应用的名称为 Mastodon
* `--platform`：设置应用程序的平台为 Linux
* `---arch x64`：设置架构为 x64
* `--width 1024 --height 768`：设置应用启动时的大小
* `--tray`：为应用创建一个托盘图标
* `--disable-dev-tools`：禁用 Chrome 开发工具
* `--single-instance`：只允许应用有一个实例
运行这条命令会显示以下输出：
```
Preparing Electron app...
Converting icons...
Packaging... This will take a few seconds, maybe minutes if the requested Electron isn't cached yet...
Packaging app for platform linux x64 using electron v13.4.0 Finalizing build...
App built to /home/tux/NativeApps/Mastodon-linux-x64, move to wherever it makes sense for you and run the contained executable file (prefixing with ./ if necessary)
Menu/desktop shortcuts are up to you, because Nativefier cannot know where you're going to move the app. Search for "linux .desktop file" for help, or see <https://wiki.archlinux.org/index.php/Desktop\_entries>
```
输出显示，文件被放置在 `/home/tux/NativeApps/Mastodon-linux-x64`。当你 `cd` 进入这个文件夹，你会看到一个名为 Mastodon 的文件。这是启动该应用的主要可执行文件。在你启动它之前，你必须给它适当的权限。
```
$ cd Mastodon-linux-x64
chmod +x Mastodon
```
现在，执行 `./Mastodon` 就可以看到你的 Linux 应用启动了！
![Mastodon app launched][4]
（Ayush Sharma, [CC BY-SA 4.0][5]）
### 为我的博客创建一个应用
为了好玩，我也要为我的博客创建一个应用。如果没有 Linux 应用，拥有一个技术博客有什么用？
![Ayush Sharma blog][6]
（Ayush Sharma, [CC BY-SA 4.0][5]）
命令是：
```
$ nativefier -n ayushsharma \
-p linux -a x64 \
\--width 1024 --height 768 \
\--tray --disable-dev-tools \
\--single-instance <https://ayushsharma.in>
$ cd ayushsharma-linux-x64
chmod +x ayushsharma
```
### 为 findmymastodon.com 创建一个应用
最后，这是为我的宠物项目 [findmymastodon.com][7] 制作的应用。
![Find my mastodon website][8]
（Ayush Sharma, [CC BY-SA 4.0][5]）
命令是：
```
$ nativefier -n findmymastodon \
-p linux -a x64 \
\--width 1024 --height 768 \
\--tray --disable-dev-tools \
\--single-instance <https://findmymastodon.com>
$ cd findmymastodon-linux-x64
chmod +x findmymastodon
```
### 创建 Linux 桌面图标
应用已经创建并可以执行了，现在是创建桌面图标的时候了。
作为示范，以下是如何为 Mastodon 启动器创建一个桌面图标。首先，下载一个 [Mastodon][9] 的图标。将该图标放在其 Nativefier 应用目录下，名为 `icon.png`。
然后创建一个名为 `Mastodon.desktop` 的文件并输入以下文本：
```
[Desktop Entry]
Type=Application
Name=Mastodon
Path=/home/tux/NativeApps/Mastodon-linux-x64
Exec=/home/tux/NativeApps/Mastodon-linux-x64/Mastodon
Icon=/home/tux/NativeApps/Mastodon-linux-x64/icon.png
```
你可以把 `.desktop` 文件移到你的 Linux 桌面上，把它作为一个桌面启动器。你也可以把它复制到 `~/.local/share/applications` 中，这样它就会出现在你的应用菜单或活动启动器中。
### 总结
我喜欢为我经常使用的工具配备专门的应用。我最喜欢的一个 Mastodon 应用特点是，当我登录到 Mastodon 后，我就不必再登录了! Nativefier 在底层运行 Chromium。所以它能够像其他浏览器一样记住你的会话。我想特别感谢 Nativefier 团队，他们让 Linux 桌面离完美更近了一步。
* * *
_本文最初发表在[作者的网站][10]上，并经授权转载。_
--------------------------------------------------------------------------------
via: https://opensource.com/article/21/11/linux-apps-nativefier
作者：[Ayush Sharma][a]
选题：[lujun9972][b]
译者：[geekpi](https://github.com/geekpi)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/ayushsharma
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/browser_blue_text_editor_web.png?itok=lcf-m6N7 (Text editor on a browser, in blue)
[2]: https://github.com/nativefier/nativefier
[3]: https://mastodon.technology/
[4]: https://opensource.com/sites/default/files/uploads/2_launch-mastodon-app.png (Mastodon app launched)
[5]: https://creativecommons.org/licenses/by-sa/4.0/
[6]: https://opensource.com/sites/default/files/uploads/3_ayush-shama-blog.png (Ayush Sharma blog)
[7]: https://findmymastodon.com/
[8]: https://opensource.com/sites/default/files/uploads/4_find-my-mastodon-app.png (Find my mastodon website)
[9]: https://icons8.com/icons/set/mastodon
[10]: https://ayushsharma.in/2021/10/make-linux-apps-for-notion-mastodon-webapps-using-nativefier