PWA（Progressive Web App）是一种新型的 Web 应用程序，它可以通过 Web 技术将 Web 应用程序变成像原生应用程序一样运行在用户的设备上。PWA 相对于原生应用程序的好处在于它无需用户下载和安装即可使用，而且可以与用户的操作系统和硬件设备相集成。pwabuilder-mac 是一个 Node.js 的 npm 包，它可以将 Web 应用程序转换成可以在 macOS 系统下完美使用的 Web 应用，同时还支持一些扩展特性，例如:NativeUI、Dock、Notifications等等。本篇文章将介绍如何使用 pwabuilder-mac，以及如何使用一些扩展特性。
安装
首先需要确认已经安装 Node.js，可以在命令行运行 node -v 查看当前 Node.js 的版本。接下来可以通过 npm 安装 pwabuilder-mac 包：
npm install -g pwabuilder-mac
安装完成之后就可以使用 pwabuilder-mac。
使用
使用 pwabuilder-mac 的方式非常简单，只需要在终端进入 Web 应用程序的根目录，然后运行命令：
pwabuilder-mac
pwabuilder-mac 会自动打包整个目录下的 Web 应用程序，并将其打包成 macOS 下可以使用的应用程序。
打包应用
使用 pwabuilder-mac 可以非常轻松地将 Web 应用程序包装成本地的 macOS 应用程序。在命令行运行以下命令即可完成打包：
pwabuilder-mac
命令执行完毕之后，会生成一个 app 目录，其中包含了打包好的应用程序。双击 app 目录下的应用程序，即可启动 Web 应用程序。
扩展特性
pwabuilder-mac 支持一些扩展特性，包括:NativeUI、Dock、Notifications 等等。下面将介绍如何使用这些扩展特性。
NativeUI
NativeUI 是 pwabuilder-mac 支持的一项高级功能，它允许 Web 应用程序能够展示本地操作系统的 UI 组件，例如：本地窗口、菜单栏、对话框等等。
为了使用 NativeUI，需要在应用程序的根目录下创建一个 nativeui.js 文件，然后在应用程序的主页面中引用这个文件，并调用 nativeui.init() 函数，这样就可以在页面上展示本地 UI 组件了。
-- -------------------- ---- -------
-- -----------
----- - ---- ----- ------------- - - -------------------
------------ - ---------- -
----- -------- - -
-
------ --------------
-------- -
- ----- ------- --
- ----- ----------- --
- ----- ------ -
-
--
-
------ -------
-------- -
- ----- ------ --
- ----- ------ --
- ----- ----------- --
- ----- ----- --
- ----- ------ --
- ----- ------- --
- ----- -------- --
- ----- ----------- -
-
--
-
------ -------
-------- -
- ----- -------- --
- ----- ------------- --
- ----- ---------------- --
- ----- ----------- --
- ----- ----------- --
- ----- -------- --
- ----- --------- --
- ----- ----------- --
- ----- ------------------ -
-
--
-
----- ---------
-------- -
------ ------------
------ --------
------ --------
-
--
-
----- ---- - --------------------------------
-----------------------------
----- --- - --------------------------------
--------------- -- -- -
-----------
---
--- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
--------- --- --- -----------
------- ---------------------------
-------
------
---------- -----------
--------
----------------
---------
-------
-------Dock
Dock 是 macOS 下的一个 UI 组件，其主要作用是在 Dock 中以应用程序的形式显示一个快捷方式。
为了使用 Dock，需要在应用程序的根目录下创建一个 dock.json 文件，然后在该文件中指定应用程序的名称、图标和启动路径等信息。
{
"name": "My Web App",
"path": "app/index.html",
"icon": "/path/to/icon.png",
"badge": "New",
"onClick": "app.focus()"
}在文件中，name 表示应用程序的名称，path 表示应用程序启动的路径，icon 表示应用程序的图标路径，badge 表示应用程序在 Dock 中显示的短标签，onClick 表示当应用程序被单击时的行为，可以是 JavaScript 代码或者是 URL。
Notifications
Notifications 是 macOS 下的一个 UI 组件，它允许应用程序在用户的操作系统上显示通知信息。
为了使用 Notifications，需要调用 Electron 的 new Notification(option) 构造函数。其中，option 可以是一个对象或一个字符串，用来指定通知的标题、图标和文本等信息。
const myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})总结
本文介绍了如何使用 pwabuilder-mac 将 Web 应用程序打包成 macOS 下的本地应用程序，并且介绍了如何使用 NativeUI、Dock、Notifications 等扩展特性。在使用扩展特性的过程中，必须要熟悉 PWA 和 Electron 的基本知识，同时需要了解一些 macOS 下的 UI 组件和 API。这样才能更好地利用 pwabuilder-mac，从而获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588981e8991b448d5cbd