开始为 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 应用,必须执行以下操作:

  1. 安装所需的组件 -- Java 开发工具包 (JDK)、Gradle 和 Android SDK。

  2. 创建 Android 虚拟设备 (AVD):请参阅 [Android 开发人员指南]](https://developer.android.com/studio/run/managing-avds.html)。

  3. 输入命令,以便 Ionic 生成应用并将其部署到仿真器:ionic cordova emulate [] [options]。 在本例中,该命令应为:

Bash复制

ionic cordova emulate android --list

有关详细信息,请参阅 Ionic 文档中的 Cordova 仿真器。

开始为 Android 开发 PWA 或混合 Web 应用_第1张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)