云社区 博客 博客详情
云社区 博客 博客详情

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

华为云官网技术团队 发表于 2020-07-23 10:29:05 07-23 10:29
华为云官网技术团队 发表于 2020-07-23 10:29:05 2020/07/23
0
0

【摘要】 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


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消