Web App To Android native App

如何使用capaitor将web app 封装成android app,即封装成可安装的apk

发表于 2024/08/08 更新于 2024/08/09

作者 Zpekii

5 分钟阅读

Web APP到Android 原生APP

前言:

环境:`OS:Windows 11`

前端框架:`Sveltekit`

需求/准备:

一个可正常构建的项目(即可正常通过执行 npm run build构建并打包成一个build或dist的输出目录)
nodejs
android studio
android sdk
vscode ide（可选）

安装`android studio`并安装`android sdk`

访问官网:下载 Android Studio 和应用工具 - Android 开发者 | Android Developers

下载`android studio`

安装并启动`android studio`

打开`SDK manager`

选择一个安卓版本的`sdk`,这里我选择`Android 14`

其他安装（可选）

点击”Apply”确认安装

因网络问题无法正常下载sdk等解决方案

打开设置
找到代理设置，设置代理端口(与自己使用的代理软件监听端口一致)

在项目中安装`capacitor`

官方文档:[Capacitor Android Documentation

Capacitor Documentation (capacitorjs.com)](https://capacitorjs.com/docs/android)

在项目目录下执行`npm install`安装项目依赖(如果已安装可忽略)

npm install

执行`npm i @capacitor/core`安装`capacitor`核心包

npm i @capacitor/core

执行`npm i -D @capacitor/cli`安装`capacitor command line interface` （命令行接口）包

npm i -D @capacitor/cli

执行`npx cap init`初始化`capacitor`配置,依次输入app名和项目ID,回车确认

npx cap init

执行`npm install @capacitor/android`安装`@capacitor/android`包

npm install @capacitor/android

执行`npx cap add android`创建安卓项目,成功创建后将生成`android`项目目录

npx cap add android

构建项目并同步到安卓项目中

修改`svelte.config.js`配置文件，禁用预压缩，目的是在`vite build`过程中不要生成`.gz`和`.br`压缩文件，避免在后续安卓构建过程中出现”Duplicate resources”的问题（因文件重名导致）

官方文档相关说明：Static site generation • Docs • SvelteKit

precompress
If true, precompresses files with brotli and gzip. This will generate .br and .gz files.

// svelte.config.js

  
import adapter from '@sveltejs/adapter-static';

import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	onwarn: (warning, handler) => {
		if (warning.code.startsWith('a11y-')) {
			return;
		}
		handler(warning);
	},

	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			fallback: 'index.html',
			precompress: false, // 禁用预压缩
			strict: true,
		}),

	}
};

export default config;

执行`npm run build`构建web项目

npm run build

修改`capacitor.config.ts`web项目目录配置

  
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.zpekii.app',
  appName: 'myapp',
  webDir: 'build'// 默认为"dist",因为sveltekit构建后生成的是"build"目录，所以我需要做相应更改以正确执行后续的拷贝操作
};

export default config;