开始为 Android 开发 PWA 或混合 Web 应用

2023-09-17 20:14:03

 🎬 岸边的风：个人主页

 🔥 个人专栏 :《 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 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 [<platform>] [options]。 在本例中，该命令应为：

Bash复制

ionic cordova emulate android --list

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

更多推荐

推进“数智+数治”，中期科技智慧公厕驱动城市公厕更新升级发展

随着城市化的快速发展和人口的不断增加，公共厕所这一基础设施的更新升级成为了亟待解决的问题。过去的传统公厕往往存在着环境脏乱差、无法保证使用者的舒适度等诸多问题。而智慧公厕则能够通过互联网和物联网的技术手段，实现智能化的运行管理，为市民提供更加便捷、舒适的使用体验。如中期科技「智慧公厕-智慧厕所」，拥有厕位智能监测与引导

【Python深度学习】深度学习框架Tensorflow、Pytorch介绍

深度学习已经成为了人工智能领域的一股重要力量，而深度学习框架则是在这个领域中进行研究和应用的必备工具。常见的深度学习框架包括TensorFlow、PyTorch、Keras、Theano和Caffe等，其中TensorFlow和PyTorch是最受欢迎的两个框架。本文将着重介绍这两个框架的优缺点以及应用领域。1.Ten

企业架构LNMP学习笔记40

框架配置实现读写分离：1）修改项目配置文件：return[//数据库类型'type'=>'mysql',//服务器地址//1、主从数据库的连接地址主在前从在后'hostname'=>'192.168.17.100,192.168.17.105',//2、主从数据库的名称、用户、密码一样的话，只配置一份即可。如果不一样，

算法通过村第七关-树(递归/二叉树遍历)白银笔记|递归实战

文章目录前言1.深入理解前中后序遍历从小到大递推分情况讨论，明确结束条件组合出完整的方法：从大到小画图推演总结前言提示：没有客观公正的记忆这回事，所有的记忆都是偏见，都是为自己的存活而重组过的经验。--国强生《断代》1.深入理解前中后序遍历深度优先遍历有前中后序三种情况，大部分人看过后就可以写出来，但是很多人只是记住了

在比特币上使用可检索性证明支付存储费用

我们为用户开发了一种为云存储付费的新方法。与亚马逊的S3等传统云存储相比，用户不必信任服务器。我们使用比特币智能合约来确保支付取决于服务器的可检索性证明(PoR)，该证明只能在数据仍然可用且需要时可以检索的情况下生成。可检索性证明(PoR)许多人通过将他们的数据（如音乐、照片和文档）上传到远程服务器来外包存储，以确保可

mock技术在测试中的应用

技术简介mock技术又叫测试桩、挡板在软件测试中，对于一些不容易构造、获取的对象，用一个虚拟的对象来代替它，以达到相同的效果，这个虚拟的对象就是mock。mock技术并不是只有测试领域用，最早是在开发领域应用，典型例子：前后端联调。比如一个功能，前端功能写完了，但是后端还没做好，前端可以使用mock技术模拟后端发过来的

10:STM32------I2C通信

目录​​​​​​​一:I2C通信协议1:I2C简历2:硬件电路3:I2C时序基本单元A:开/终条件2:发送一个字节3:接收一个字节4:应答机制4:I2C时序1:指定地址写2:当前地址读3:指定地址读二:MPU60501:简历2:参数3:硬件电路4:框图5:寄存器地址三:案例A:软件I2C读写MPU60501:连接图2:

前端面试合集（三——浏览器）

浏览器的页面渲染1.浏览器是如何渲染页面的？2.什么是reflow(重排）？3.什么是repaint(重绘）？4.为什么transform效率高？1.浏览器是如何渲染页面的？当浏览器的网络线程收到HTML文档之后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲

005-第一代光电小工具(一)

第一代光电小工具(一)文章目录第一代光电小工具(一)项目介绍大致原理描述核心控件QCustomPlot关于QCustomPlot播放音频软件截图关键字：Qt、Qml、QCustomPlot、曲线、SQLite项目介绍欢迎来到我们的QML&C++项目！这个项目结合了QML（QtMeta-ObjectLanguage）和C

Pluma 插件管理框架

1.概述Pluma是一个用C++开发的可用于管理插件的开源架构，其官网地址为：http://pluma-framework.sourceforge.net/。该架构是个轻量级架构，非常易于理解。Pluma架构有以下基本概念：1）插件的外在行为体现为一个纯虚类，可以叫作插件接口；2）继承于同一个插件接口的若干派生类，被认

异地远程访问本地SQL Server数据库【无公网IP内网穿透】

文章目录1.前言2.SeaFile云盘设置2.1Owncould的安装环境设置2.2SeaFile下载安装2.3SeaFile的配置3.cpolar内网穿透3.1Cpolar下载安装3.2Cpolar的注册3.3Cpolar云端设置3.4Cpolar本地设置4.公网访问测试5.结语1.前言现在我们身边的只能设备越来越多

热文推荐
  1. 模板学堂｜数据可视化仪表板大屏设计流程梳理

    DataEase开源数据可视化分析平台于2022年6月正式发布模板市场（https：//dataease.io/templates/）。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板，方便用户根据自身的业务需求和使用场景选择对应的仪表板模板，并在优质模板的基础上轻松制作自己的仪表板。目前，Dat

  2. 可视化图表组件之股票数据分析应用

    股市是市场经济的必然产物，在一个国家的金融领域之中有着举足轻重的地位。在过去，人们对于市场走势的把握主要依赖于经验和直觉，往往容易受到主观因素的影响，导致决策上出现偏差。如今，通过数据可视化呈现，便可将历年数据和市场情报进行深度挖掘、分析，从中找到规律和趋势，帮助用户做出更准确的判断。回顾2022年A股市场的表现可谓是

  3. Python爬虫从端到端抓取网页

    网页抓取和RESTAPI简介网页抓取是使用计算机程序以自动方式从网站提取和解析数据的过程。这是创建用于研究和学习的数据集的有用技术。虽然网页抓取通常涉及解析和处理HTML文档，但某些平台还提供RESTAPI来以机器可读格式（如JSON）检索信息。在本教程中，我们将使用网络抓取和RESTAPI创建真实的数据集。如何运行代

  4. Git学习笔记1

    任务要求：1、使用git提交代码到仓库；2、实现自动代码发布系统；1、了解DevOps的发展历程和思想；2、学会git版本控制；3、会使用github公有仓库和gitlab私有仓库；4、了解CI/CD；5、使用jenkins实现自动发布；DevOps是一种实现Dev（开发）与Ops（运维）工作流有效联合的思想。最终目标

  5. 深入探索OCR技术：前沿算法与工业级部署方案揭秘

    深入探索OCR技术：前沿算法与工业级部署方案揭秘注：以上图片来自网络1.OCR技术背景1.1OCR技术的应用场景OCR是什么OCR（OpticalCharacterRecognition，光学字符识别）是计算机视觉重要方向之一。传统定义的OCR一般面向扫描文档类对象，现在我们常说的OCR一般指场景文字识别（SceneT

  6. 服务器数据恢复-热备盘同步过程中硬盘离线的RAID5数据恢复案例

    服务器数据恢复环境：华为OceanStor某型号存储，11块硬盘组建了一组RAID5阵列，另外1块硬盘作为热备盘使用。基于RAID5阵列的LUN分配给linux系统使用，存放Oracle数据库。服务器故障：RAID5阵列1块硬盘由于未知原因离线，热备盘激活开始同步数据，在热备盘同步的过程中又有1块硬盘离线，RAID5阵

  7. 一起学数据结构（7）——树及二叉树的基本概念及存储

    前面的关于数据结构的文章中，介绍了顺序表，链表，栈，队列等数据结构。对于以上数据结构，均是一对一的关系。本篇文章将对于一对多的数据结构——树进行解析。目录1.树的定义及基本概念：1.1树的定义：1.2树的基本概念及术语：2.树的存储：3.二叉树的概念及结构：3.1二叉树的概念：3.2两种特殊的二叉树：3.2.1满二叉树

  8. Learn Prompt-ChatGPT 精选案例:写作&博客

    在ChatGPT的帮助下，文本内容的产出，尤其是撰写博客文章的过程得到了进一步的简化。你可以让ChatGPT激发你的灵感，也可以让它美化你的文章内容。这里我们希望能通过prompt写出一篇以“ChatGPT对社会各行各业的影响”为主题的博客。本页我们希望你可以使用ChatGPT网页版，利用ChatGPT写作的过程应该是

  9. 「聊设计模式」之模板方法模式（Template Method）

    🏆本文收录于《聊设计模式》专栏，专门攻坚指数级提升，助你一臂之力，带你早日登顶🚀，欢迎持续关注&&收藏&&订阅！前言在软件开发中，设计模式是经典的解决方案，它们被广泛应用于面向对象的程序设计中。其中，模板方法模式（TemplateMethod）是一种常用的行为型设计模式，它定义一个操作中的算法骨架，而将一些步骤延迟