使用Vue开发Android应用

2023.08.31 23:27:45

使用Vue开发一个安卓应用，同时上架到应用商店。

把Vue打包成PWA

把Vue开发的应用，转换成PWA（Progressive Web Apps）。这里我们使用Vite，安装vite-plugin-pwa插件，来实现这个。

pnpm add vite-plugin-pwa -D

修改一下 vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA()
  ]
}

这样build出来的App就带上了manifest、registerSW.js等内容。成为一个PWA，在没有网络的情况下也能正常打开应用。
把这个App部署到服务器，生成一个manifest.json的URL。比如：https://blog.iwangtao.com/manifest.webmanifest

bubblewrap生成apk文件和aab文件

bubblewrap可以把一个PWA打包成一个Android程序。

安装   
bubblewrapnpm i -g @bubblewrap/cli

第一次运行bubblewrap时会自动安装jdk和Android工具。网络不好的可能会等很久

根据manifest.webmanifest文件初始化应用  
bubblewrap init --manifest=https://blog.iwangtao.com/manifest.webmanifest

之后就是填写应用信息。

packageId一定要注意，每个由.分隔的部分必须以字母开头。

Display mode:
standalone：这种显示模式下，应用看起来像是一个常规的移动应用。它将在其自己的窗口中运行，不同于在浏览器标签页中。
fullscreen：应用将全屏显示，不显示任何浏览器的UI。
fullscreen-sticky：这是全屏模式的一个变种，其中某些元素（如导航栏）可能在特定的用户交互下显示或隐藏。

? Key store location: (/Projects/dist/android.keystore) 这种是提示选择一个密钥保存的位置，一定要在dist之外的目录保存。免得下次再build Vue代码的把密钥清空。

buildbubblewrap build

在服务器上生成.well-known/assetlinks.json

如果服务器上没有.well-known/assetlinks.json文件，安装的apk包也会有丑丑的地址栏，一点也不原生了

一个文件assetlinks.json大概是这样：

[
    {
        "relation":
        [
            "delegate_permission/common.handle_all_urls"
        ],
        "target":
        {
            "namespace": "android_app",
            "package_name": "your.package.name",
            "sha256_cert_fingerprints":
            [
                "YOUR_SHA256_FINGERPRINT"
            ]
        }
    }
]

其中your.package.name需要替换成你应用的packageId。

sha256_cert_fingerprints里保存了指纹列表，一个应用可以有多个指纹，一般本地打包时一个指纹，上架到Google Play也有一个指纹。

获得本地打包指纹keytool -list -v -keystore path_to_your_keystore.jks

SHA256那一行就是需要的指纹信息。

assetlinks.json一定要放到你PWA域名每在网站的根目录。要能通过https://pws.domain/.well-known/assetlinks.json才行。

在bubblewrap build之后，会有一个.aab文件，把.aab文件上传到Google Play。通过Google Play审核后，需要把Google Play里的指纹更新到assetlinks.json里。
在Google Play Console后台，打开刚刚提交的PWA应用。
点击“设置”或“应用设置”。
选择“应用签名”。
在这里，你将看到与Google Play App Signing相关的信息，包括SHA-1和SHA-256指纹。

Vue