普通网站套壳打包，上线谷歌play - 胡东东博客

PWA介绍

PWA是渐进式网页应用（Progressive Web App）的缩写，通过Service Worker、缓存等技术让网页类似于原生App一样在手机运行。支持安装在手机桌面直接打开、推送通知、通过缓存离线使用。

主要依赖这几个关键技术：

HTTPS：保证安全，全站https是必须的前提。
Service Worker：让网页可以离线运行、缓存资源
Web App Manifest：通过manifest.json文件定义应用图标、启动方式、颜色等

本质上还是网页，所以性能肯定比不上原生App，并且访问硬件也有限制。但是通过pwa可以类似于app安装在用户桌面，点击打开，比用户直接去搜索或者输入网址更快捷，而且缓存也比浏览器更高效。

TWA介绍

PWA就是上面说的，用户可以打开浏览器，添加到桌面（类似于进一步的快捷方式，点击就可以打开指定网站）。而TWA是（Trusted Web Activity ）缩写，是对PWA的进一步处理，将PWA封装并部署为Android原生应用。通过TWA可以直接打包成APK或AAB文件，给googlepay送审上架，用户可以下载安装。TWA仅限Android系统使用，类似于给网站套了一层安卓的壳。

而Bubblewrap就是谷歌官方推荐的TWA打包工具，配置pwa之后，最终通过Bubblewrap操作打包。实操开始。

网站PWA改造

1、logo图标

两个log图标，png格式，分辨率分别是192*192、512*152，例如命名为icon-192.png、icon-512.png，放到网站根目录

2、manifest.json配置

网站根目录新建manifest.json，内容模板可以参考下面，值修改为实际内容

{
  "name": "Damon胡东东",
  "short_name": "hudd",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3、新建Service Worker文件

网站根目录新建sw.js文件，内容为

self.addEventListener('fetch', () => {});

这个最简单的处理就是不做任何功能，就是为了自动检测，如果你想个性化处理缓存可以搜索更详细的Service Worker配置。比如install、fetch回调更新缓存等。

4、首页index.html引用

在首页的<head>标签之内，引用json和js文件，不要放到body标签，有时候浏览器不识别。

<link rel="manifest" href="/manifest.json">

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

5、验证

配置好之后，谷歌浏览器地址栏会显示安装按钮。

2026-06-23T04:30:10.png

打开谷歌浏览器调试面板，在Application菜单栏，可以看到Manifest和Service workers配置，Service workers的sw.js的状态可以看到是activated and is running。至此pwa工作结束。

2026-06-23T04:27:22.png

Bubblewrap安装

网站pwa处理好，接下来安装Bubblewrap，后续使用Bubblewrap进行TWA处理打包。

1、安装node.js

mac可以参考这个文章：Node Mac安装Brew教程及多版本node切换

2、安装Bubblewrap

终端执行

npm i -g @bubblewrap/cli

3、初始化bubblewrap项目

创建新的空白文件夹，执行下面bubblewrap init命令，记得把域名修改为实际域名。

bubblewrap init --manifest=https://hudd.cn/manifest.json

省事：可以一路按回车，Bubblewrap会默认处理它的配置，如果提示有配置没找到，会问你要不要帮你下载。输入 Y，让它全自动处理即可。

网速太慢了，总是下载失败怎么办？

命令行对代理的支持的确不好，需要下载的jdk和安卓sdk都是一百多M容易断线，所以可以直接指定配置。

这个配置文件保存在电脑用户的.bubblewrap文件夹下的config.json里面，想省事就把jdk和安卓sdk解压后的都放到这个文件夹。

以mac为例：

1、下载JDK17的压缩版本：https://adoptium.net/zh-CN/temurin/releases?version=17

例如jdk-17.0.11+9.tar.gz解压，解压之后可以放到用户目录的.bubblewrap的jdk文件夹

2、下载安卓sdk的command命令行版本：https://developer.android.com/studio?hl=zh-cn#command-line-tools-only

解压之后，解压后的文件夹必须重命名为tools，放到用户目录的.bubblewrap的android-sdk文件夹。

这样在用户的隐藏目录结构是这样的

.bubblewrap/
├── android-sdk/
│   └── tools/
│       ├── bin/
│       ├── lib/
│       └── ...
├── jdk/
│   └── jdk-17.0.11+9/ 
│       └── Contents/
│           ├── Home/
│           │     ├── bin/
│           │     ├── lib/
│           │     └── ...
│           ├── MacOS/
│           └── ...
└── config.json

之后重新运行上面的bubblewrap init命令，输入配置的时候输入n回车，会要求指定jdk和安卓sdk的位置，这时候将两个解压过的 jdk-17.0.11+9和android-sdk的路径输入进去即可。

按照上面的结构的话，最终这个目录的config.json的内容是这样的

{"jdkPath":"/Users/damon/.bubblewrap/jdk/jdk-17.0.11+9","androidSdkPath":"/Users/damon/.bubblewrap/android-sdk"}

Bubblewrap配置TWA打包

上面的环境搭建好之后，运行bubblewrap init时就会到基础配置步骤啦。这时候是根据manifest.json自动设置默认值，你可以在运行的时候修改，比如软件名之类的。

根据实际情况开始设置域名、目录、软件名Application name、软件idApplication ID等配置，如果是和manifest.json一致的话，基本配置一路回车即可。

注意：Include support for Play Billing 是否包含谷歌支付，如果网页没有这个谷歌支付功能的话，要选否n，支付审核的严，并且有版本要求。

KeyStore密码：

输入基本信息之后，最后一步会填信息生成的keystore文件，默认就是android.keystore。这个生成之后要保存好，后续更新打包很多地方都会用。可以保存在git或者云盘。

信息配置之后，这个空白文件夹里就是已经创建好的网站的twa项目啦。

Bubblewrap编译打包项目

上一步init之后的文件夹产物就是安卓项目，可以用Android Studio打开修改代码，也可以用命令行运行bubblewrap build命令，输入keystore的密码，自动打包。

执行bubblewrap build命令，接受用户协议，等待Building the Android App...结束。

build命令会自动安装依赖，比如platform-tools、platforms、build-tools等，会自动下载到前面init时指定的android-sdk文件夹下。如果报错想手动安装这些依赖，可以执行下面这三个命令。

JAVA_HOME=~/.bubblewrap/jdk/jdk-17.0.11+9/Contents/Home

PATH=$JAVA_HOME/bin:$PATH

~/.bubblewrap/android-sdk/tools/bin/sdkmanager "platform-tools" "build-tools;35.0.0" "platforms;android-35"

结束之后会生成apk和aab文件，这个就是送审的软件包。

2026-06-23T04:29:15.png

配置网站的assetlinks

assetlinks.json文件是为了验证你是网站所有者，如果网站没有配置这个文件或者不匹配，APP打开运行时会显示顶部的地址栏。

创建assetlinks.json文件，将该文件上传到网站根目录的.well-known文件夹，例如https://hudd.cn/.well-known/assetlinks.json，文件内容为

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "你的Package ID",
    "sha256_cert_fingerprints": ["你的SHA-256指纹"]
  }
}]

Package ID就是软件的id，sha256是包的指纹，是数组类型，可以放多个。

sha256可以通过上面的android.keystore获取，

keytool -list -v -keystore /实际路径/android.keystore

输入密码之后，SHA256:后面的值就是指纹

也可以通过签过名的apk文件获取，值和通过.keystore获取的是一样的。

keytool -printcert -jarfile /实际路径/app-release-signed.apk

这样最终的assetlinks.json内容就是

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "cn.hudd.www", 
    "sha256_cert_fingerprints": ["3E:FD:7B:B0:B2:5F:46:54:3E:94:50:38:CC:...]
  }
}]

至此全部完工。