freeCodeCamp.org
·
如何使用Bubblewrap将您的网站转换为Android应用
💡
原文英文，约2300词，阅读约需9分钟。
📝
内容提要
本文介绍了如何将网站转换为原生应用，使用渐进式Web应用（PWA）和Google的Bubblewrap工具。首先，确保网站公开并具备基本的Web开发知识。通过配置PWA的清单文件和服务工作者，使浏览器识别为可安装应用。然后，使用Bubblewrap将PWA打包为Android应用，以实现无浏览器地址栏的全屏体验，并提供自定义应用内体验的建议。
🎯
关键要点
- 本文介绍如何将网站转换为原生应用，使用渐进式Web应用（PWA）和Google的Bubblewrap工具。
- 确保网站公开并具备基本的Web开发知识，使用npm安装必要工具。
- PWA的目标是使网站看起来和感觉像原生应用，具备离线工作和推送通知等功能。
- PWA的两个主要组件是清单文件和服务工作者，浏览器需要这两个组件才能识别为可安装应用。
- Bubblewrap是一个命令行工具，可以将PWA转换为Android应用，使用受信任的Web活动（TWA）。
- TWA允许在Android应用中全屏显示网站，去除浏览器地址栏，提供原生应用体验。
- 信任通过数字资产链接系统验证，确保应用和网站所有者一致。
- 配置PWA时，需要添加清单文件和服务工作者，使用Vite插件简化过程。
- 使用Bubblewrap将PWA打包为Android应用，创建构建文件夹并初始化项目。
- 在构建应用之前，需要设置JDK和Android SDK，Bubblewrap会提供安装选项。
- 回答Bubblewrap的配置问题以生成twa-manifest.json文件，设置应用的基本信息。
- 构建应用后，设置TWA验证以去除浏览器地址栏，创建.assetlinks.json文件。
- 可以通过在twa-manifest.json中添加startUrl来定制应用内体验。
- Bubblewrap仅支持Android，若需跨平台支持，可考虑其他平台如Capacitor。
❓
延伸问答
如何将网站转换为原生应用？
可以通过将网站转化为渐进式Web应用（PWA），然后使用Google的Bubblewrap工具将其打包为Android应用来实现。
什么是渐进式Web应用（PWA）？
渐进式Web应用（PWA）是一种使网站看起来和感觉像原生应用的技术，具备离线工作和推送通知等功能。
Bubblewrap工具的主要功能是什么？
Bubblewrap是一个命令行工具，可以将PWA转换为Android应用，使用受信任的Web活动（TWA）来提供全屏体验。
如何配置PWA的清单文件和服务工作者？
可以使用Vite插件自动生成清单文件和服务工作者，确保浏览器能够识别为可安装的应用。
如何验证TWA的信任关系？
通过在网站上放置一个特殊的assetlinks.json文件，Android系统会检查该文件以验证应用和网站所有者的一致性。
Bubblewrap是否支持跨平台应用？
Bubblewrap仅支持Android，如果需要跨平台支持，可以考虑使用其他平台如Capacitor。
➡️
