开始为 Android 开发 PWA 或混合 Web 应用
岸边的风：个人主页
个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想，就是为了理想的生活 !
目录
PWA 或混合 Web 应用的功能
Apache Cordova
Ionic
通过安装所需工具开始使用 Ionic
使用 Ionic Cordova 和 Angular 创建新项目
使用 Ionic Capacitor 和 Angular 创建新项目
使用 Ionic 和 React 创建新项目
在设备或仿真器上测试 Ionic 应用
本指南将帮助你开始使用单个 HTML/CSS/JavaScript 代码库在 Windows 上创建混合 Web 应用或渐进式 Web 应用 (PWA)，这些代码库可在 Web 和跨设备平台（Android、iOS、Windows）上使用。
通过使用正确的框架和组件，基于 Web 的应用程序可以在 Android 设备上以一种与本机应用非常相似的方式运行。
PWA 或混合 Web 应用的功能
Android 设备上可以安装两种主要类型的 Web 应用。 两种类型的主要区别在于应用程序代码是嵌入在应用包中（混合）还是托管在 Web 服务器 (pwa) 上。
-
混合 Web 应用：代码（HTML、JS、CSS）打包在 APK 中，并且可以通过 Google Play 商店分发。 查看引擎与用户的 Internet 浏览器隔离，无会话或缓存共享。
-
渐进式 Web 应用 (PWA)：代码（HTML、JS、CSS）位于 Web 上，不需要打包为 APK。 使用服务工作进程按需要下载和更新资源。 Chrome 浏览器将呈现并显示应用，但应用将以本机形式显示，而不包含常规的浏览器地址栏等。可以与浏览器共享存储、缓存和会话。 这基本上类似于在特殊模式下安装 Chrome 浏览器的快捷方式。 还可使用受信任的 Web 活动在 Google Play 商店中列出 PWA。
PWA 和混合 Web 应用非常类似于本机 Android 应用，因为它们：
- 可以通过应用商店安装（Google Play 商店和/或 Microsoft Store）
- 有权访问相机、GPS、蓝牙、通知和联系人列表等本机设备功能
- 可以脱机工作（无 Internet 连接）
PWA 还具有几个独特的功能：
- 可以直接从 Web（无需应用商店）安装到 Android 主屏幕
- 还可以使用受信任的 Web 活动通过 Google Play 商店进行安装
- 可以通过 Web 搜索发现或通过 URL 链接进行共享
- 依赖于服务工作进程，无需打包本机代码
不需要使用框架来创建混合应用或 PWA，但本指南中会介绍一些常用框架，包括 PhoneGap（带有 Cordova），以及 Ionic（带有使用 Angular 或 React 的 Cordova 或 Capacitor）。
Apache Cordova
Apache Cordova 是开放源代码框架，它可以通过使用插件来简化本地 WebView 中的 JavaScript 代码和原生 Android 平台之间的通信。 这些插件公开 JavaScript 终结点，这些终结点可从代码调用并用于调用本机 Android 设备 API。 一些示例 Cordova 插件具有对设备服务（如电池状态、文件访问、振动/铃声等）的访问权限。这些功能通常不适用于 web 应用或浏览器。
Cordova 有两个常用的分发版：
-
PhoneGap：Adobe 已停止提供支持。
-
Ionic
Ionic
Ionic 是一个框架，它可以调整应用的用户界面 (UI) 以匹配每个平台（Android、iOS、Windows）的设计语言。 Ionic 使你能够使用 Angular 或 React。
备注
有一个新版本的 Ionic 使用了 Cordova 的替代方法，这种方法名为“Capacitor”。 这种替代方法使用容器来使应用对 Web 更加友好。
通过安装所需工具开始使用 Ionic
若要开始使用 Ionic 构建 PWA 或混合 Web 应用，应首先安装以下工具：
-
用于与 Ionic 生态系统交互的 Node.js。 使用适用于 Linux 的 Windows 子系统 (WSL) 下载适用于 Windows 的 NodeJS或遵循 NodeJS 安装指南。 如果要处理多个 NodeJS 项目和版本，则可能需要考虑使用 Node 版本管理器 (nvm)。
-
用于编写代码的 VS Code。 适用于 Windows 的 VS Code。 如果希望使用 Linux 命令行生成应用，则可能还需要安装 WSL 远程扩展。
-
用于与首选命令行接口 (CLI) 结合使用的 Windows 终端。 从 Microsoft Store 安装 Windows 终端。
-
用于版本控制的 Git。 Git。
使用 Ionic Cordova 和 Angular 创建新项目
在命令行中输入以下命令，安装 Ionic 和 Cordova：
Bash复制
npm install -g @ionic/cli cordova
通过输入以下命令，使用“Tabs”应用模板创建 Ionic Angular 应用：
Bash复制
ionic start photo-gallery tabs
更改为应用文件夹：
Bash复制
cd photo-gallery
在 Web 浏览器中运行应用：
Bash复制
ionic serve
有关详细信息，请参阅 Ionic Cordova Angular 文档。若要了解如何将应用从混合应用更改为 PWA，请访问 Ionic 文档的使 Angular 应用成为 PWA 部分。
使用 Ionic Capacitor 和 Angular 创建新项目
在命令行中输入以下命令，安装 Ionic 和 Cordova-Res：
Bash复制
npm install -g @ionic/cli native-run cordova-res
通过输入以下命令，使用“Tabs”应用模板创建 Ionic Angular 应用并添加 Capacitor：
Bash复制
ionic start photo-gallery tabs --type=angular --capacitor
更改为应用文件夹：
Bash复制
cd photo-gallery
添加组件以使应用成为 PWA：
Bash复制
npm install @ionic/pwa-elements
通过将以下内容添加到 src/main.ts 文件，导入 @ionic/pwa-elements：
TypeScript复制
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
在 Web 浏览器中运行应用：
Bash复制
ionic serve
有关详细信息，请参阅 Ionic Capacitor Angular 文档。若要了解如何将应用从混合应用更改为 PWA，请访问 Ionic 文档的使 Angular 应用成为 PWA 部分。
使用 Ionic 和 React 创建新项目
在命令行中输入以下命令，安装 Ionic CLI：
Bash复制
npm install -g @ionic/cli
输入以下命令，使用 React 创建新项目：
Bash复制
ionic start myApp blank --type=react
更改为应用文件夹：
Bash复制
cd myApp
在 Web 浏览器中运行应用：
Bash复制
ionic serve
有关详细信息，请参阅 Ionic React 文档。若要了解如何将应用从混合应用更改为 PWA，请访问 Ionic 文档的使 React 应用成为 PWA 部分。
在设备或仿真器上测试 Ionic 应用
若要在 Android 设备上测试 Ionic 应用，请插入设备（确保已启用设备进行开发），然后在命令行中输入以下内容：
Bash复制
ionic cordova run android
若要在 Android 设备仿真器上测试 Ionic 应用，必须执行以下操作：
-
安装所需的组件 -- Java 开发工具包 (JDK)、Gradle 和 Android SDK。
-
创建 Android 虚拟设备 (AVD)：请参阅 [Android 开发人员指南]](https://developer.android.com/studio/run/managing-avds.html)。
-
输入命令，以便 Ionic 生成应用并将其部署到仿真器：
ionic cordova emulate [。 在本例中，该命令应为：] [options]
Bash复制
ionic cordova emulate android --list
有关详细信息，请参阅 Ionic 文档中的 Cordova 仿真器。
