开始为 Android 开发 PWA 或混合 Web 应用
本指南将帮助你开始使用单个 HTML/CSS/JavaScript 代码库在 Windows 上创建混合 Web 应用或渐进式 Web 应用 (PWA),这些代码库可在 Web 和跨设备平台(Android、iOS、Windows)上使用。
通过使用正确的框架和组件,基于 Web 的应用程序可以在 Android 设备上以一种与本机应用非常相似的方式运行。
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 是开放源代码框架,它可以通过使用插件来简化本地 WebView 中的 JavaScript 代码和原生 Android 平台之间的通信。 这些插件公开 JavaScript 终结点,这些终结点可从代码调用并用于调用本机 Android 设备 API。 一些示例 Cordova 插件具有对设备服务(如电池状态、文件访问、振动/铃声等)的访问权限。这些功能通常不适用于 web 应用或浏览器。
Cordova 有两个常用的分发版:
PhoneGap:Adobe 已停止提供支持。
Ionic 是一个框架,它可以调整应用的用户界面 (UI) 以匹配每个平台(Android、iOS、Windows)的设计语言。 Ionic 使你能够使用 Angular 或 React。
备注
有一个新版本的 Ionic 使用了 Cordova 的替代方法,这种方法名为“Capacitor”。 这种替代方法使用容器来使应用对 Web 更加友好。
若要开始使用 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:
npm install -g @ionic/cli cordova
通过输入以下命令,使用“Tabs”应用模板创建 Ionic Angular 应用:
ionic start photo-gallery tabs
更改为应用文件夹:
cd photo-gallery
在 Web 浏览器中运行应用:
ionic serve
有关详细信息,请参阅 Ionic Cordova Angular 文档。若要了解如何将应用从混合应用更改为 PWA,请访问 Ionic 文档的使 Angular 应用成为 PWA 部分。
在命令行中输入以下命令,安装 Ionic 和 Cordova-Res:
npm install -g @ionic/cli native-run cordova-res
通过输入以下命令,使用“Tabs”应用模板创建 Ionic Angular 应用并添加 Capacitor:
ionic start photo-gallery tabs --type=angular --capacitor
更改为应用文件夹:
cd photo-gallery
添加组件以使应用成为 PWA:
npm install @ionic/pwa-elements
通过将以下内容添加到 src/main.ts
文件,导入 @ionic/pwa-elements:
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
在 Web 浏览器中运行应用:
ionic serve
有关详细信息,请参阅 Ionic Capacitor Angular 文档。若要了解如何将应用从混合应用更改为 PWA,请访问 Ionic 文档的使 Angular 应用成为 PWA 部分。
在命令行中输入以下命令,安装 Ionic CLI:
npm install -g @ionic/cli
输入以下命令,使用 React 创建新项目:
ionic start myApp blank --type=react
更改为应用文件夹:
cd myApp
在 Web 浏览器中运行应用:
ionic serve
有关详细信息,请参阅 Ionic React 文档。若要了解如何将应用从混合应用更改为 PWA,请访问 Ionic 文档的使 React 应用成为 PWA 部分。
若要在 Android 设备上测试 Ionic 应用,请插入设备(确保已启用设备进行开发),然后在命令行中输入以下内容:
ionic cordova run android
若要在 Android 设备仿真器上测试 Ionic 应用,必须执行以下操作:
创建 Android 虚拟设备 (AVD):请参阅 [Android 开发人员指南]](https://developer.android.com/studio/run/managing-avds.html)。
输入命令,以便 Ionic 生成应用并将其部署到仿真器:
ionic cordova emulate [<platform>] [options]
。 在本例中,该命令应为:
ionic cordova emulate android --list
有关详细信息,请参阅 Ionic 文档中的 Cordova 仿真器。