【Chrome web.dev Live 2020总结】第二天第5集:将PWA作为Android应用发布

举报
华为云官网技术团队 发表于 2020/07/23 10:29:05 2020/07/23
【摘要】 PWA:Progressive web apps,渐进式 Web 应用目标:Reliable + Fast + Engaging优势:减少开发成本,使用js语言完成跨端应用开发无需安装,开发上线即可。

什么是PWA

  • PWA:Progressive web apps,渐进式 Web 应用

  • 目标:Reliable + Fast + Engaging

  • 优势:

    • 减少开发成本,使用js语言完成跨端应用开发

    • 无需安装,开发上线即可,无需等待应用商城审核

  • 核心特性:

    • Web App Manifest

    • Service Worker

    • Cache API 缓存

    • Push&Notification 推送与通知

    • Background Sync 后台同步

    • 响应式设计

  • 上手入门:

    • PWA介绍及快速上手搭建一个PWA应用

    • Your First Progressive Web App

集成PWA的思路

传统的方法

  • Webview:不支持Web Notifications, Web Bluetooth, Web USB等现代Web API

  • 使用自定义内嵌浏览器:包体积太大,并且有大量的工程方面的工作

使用Trusted Web Activity

  • 提供全量的Web Platform API

  • 可减少包的体积

  • 但是开发者还是需要了解Android Developer Tooling (Android studio, Java/Kotlin, Gradle)

  • 可以通过使用Bubblewrap来解决跨端的障碍

Bubblewrap

What is Bubblewrap

  • Bubblewrap是一个Node.js项目,包含库和命令行界面,可以通过使用它来构建Android项目

 How to use Bubblewrap

  • 需要Node.js或者以上的node开发环境 + 一台android手机方便用于真机调试

  • 下载Bubblewrap的外部依赖:JDK + Android Command-line tools

  • npm install: npm i -g @bubblewrap/cli

  • init初始化项目,传入PWA项目的manifest.json文件路径,且需要JDK和Android命令行工具的目录地址: bubblewrap init --manifest=xxxx

  • build构建项目:bubblewrap build 输出三个文件

    • 质量报告

    • assetlink.json 用于验证Trusted Web Activity中打开的域名

    • app-release-signed.apk

install运行项目:bubblewrap install 运行这个由PWA生成的Android原生应用程序

Bubblewrap入门上手

  • Github


【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容, 举报邮箱:cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。