{"topic":{"id":13614,"title":"把 HTML 等静态文件包裹成 APK 供离线浏览的一种方法","slug":"topic","categoryId":4,"createdAt":"2024-10-01 14:09:53.273772","bumpedAt":"2024-10-02 07:50:21.840833","views":203,"postsCount":3,"highestPostNumber":3,"likeCount":2,"closed":false,"pinned":false,"pinnedGlobally":false,"pinnedAt":null,"pinnedUntil":null,"isBanner":false,"excerpt":"在电梯和高铁上有些时候网络不好，这时候刷行動裝置加载不出来就很难受。很多时候刷手机都是访问一些网站，而很多网站都是全部由静态文件构成的。然而当你点击进主页的时候没有一次性将所有资源到下到行動裝置上，导致后续点击站内的链接需要等待加载。有没有可能将所有资源全都下载下来供浏览器浏览呢呢？一种方式是将所有 html，css，js 文件下载到手机，然后启动一个 darkhttpd 这样的 web server，再用浏览器导航到 local…","deletedAt":null,"isAnonymous":false,"category":{"id":4,"name":"谈笑风生","slug":"general","color":"25AAE2"},"author":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif"},"tags":[]},"posts":[{"id":41073,"postNumber":1,"raw":"在电梯和高铁上有些时候网络不好，这时候刷行動裝置加载不出来就很难受。\n\n很多时候刷手机都是访问一些网站，而很多网站都是全部由静态文件构成的。然而当你点击进主页的时候没有一次性将所有资源到下到行動裝置上，导致后续点击站内的链接需要等待加载。\n\n有没有可能将所有资源全都下载下来供浏览器浏览呢呢？\n一种方式是将所有 html，css，js 文件下载到手机，然后启动一个 [darkhttpd](https://github.com/emikulic/darkhttpd) 这样的 web server，再用浏览器导航到 localhost:8080 访问，不过这样有点繁琐。\n一个跨平台程序框架 [Tauri v2](https://v2.tauri.app/) 提供了更容易的方式，方法如下：\n\n使用 vanilla 模板新建工程\n```\npnpm create tauri-app -m pnpm -t vanilla --identifier app.xjtu.rust-doc xjtu-tauri-app-rust-doc\ncd xjtu-tauri-app-rust-doc\npnpm install\npnpm tauri android init\n```\n\n然后把包含 index.html 的静态资源目录全部放到 `src` 目录底下：\n```\nrsync -av --delete ~/.rustup/toolchains/stable-x86_64-unknown-linux-gnu/share/doc/rust/html/ ./src/\n```\n\n参照 https://v2.tauri.app/distribute/sign/android/ 修改以下文件，添加 release 编译所需的凭据信息：\n\n[details=\"src-tauri/gen/android/keystore.properties\"]\n```\npassword=7\nkeyAlias=xj\nstoreFile=/app.jks\n```\n[/details]\n\n\n\n[details=\"src-tauri/gen/android/app/build.gradle.kts\"]\n```\nimport java.util.Properties\nimport java.io.FileInputStream\n\nplugins {\n id(\"com.android.application\")\n id(\"org.jetbrains.kotlin.android\")\n id(\"rust\")\n}\n\nval tauriProperties = Properties().apply {\n val propFile = file(\"tauri.properties\")\n if (propFile.exists()) {\n propFile.inputStream().use { load(it) }\n }\n}\n\nandroid {\n compileSdk = 34\n namespace = \"app.xjtu.static_app\"\n defaultConfig {\n manifestPlaceholders[\"usesCleartextTraffic\"] = \"false\"\n applicationId = \"app.xjtu.static_app\"\n minSdk = 24\n targetSdk = 34\n versionCode = tauriProperties.getProperty(\"tauri.android.versionCode\", \"1\").toInt()\n versionName = tauriProperties.getProperty(\"tauri.android.versionName\", \"1.0\")\n }\n signingConfigs {\n create(\"release\") {\n val keystorePropertiesFile = rootProject.file(\"keystore.properties\")\n val keystoreProperties = Properties()\n if (keystorePropertiesFile.exists()) {\n keystoreProperties.load(FileInputStream(keystorePropertiesFile))\n }\n\n keyAlias = keystoreProperties[\"keyAlias\"] as String\n keyPassword = keystoreProperties[\"password\"] as String\n storeFile = file(keystoreProperties[\"storeFile\"] as String)\n storePassword = keystoreProperties[\"password\"] as String\n }\n }\n\n\n buildTypes {\n getByName(\"debug\") {\n manifestPlaceholders[\"usesCleartextTraffic\"] = \"true\"\n isDebuggable = true\n isJniDebuggable = true\n isMinifyEnabled = false\n packaging { jniLibs.keepDebugSymbols.add(\"*/arm64-v8a/*.so\")\n jniLibs.keepDebugSymbols.add(\"*/armeabi-v7a/*.so\")\n jniLibs.keepDebugSymbols.add(\"*/x86/*.so\")\n jniLibs.keepDebugSymbols.add(\"*/x86_64/*.so\")\n }\n }\n getByName(\"release\") {\n isMinifyEnabled = true\n signingConfig = signingConfigs.getByName(\"release\")\n proguardFiles(\n *fileTree(\".\") { include(\"**/*.pro\") }\n .plus(getDefaultProguardFile(\"proguard-android-optimize.txt\"))\n .toList().toTypedArray()\n )\n }\n }\n kotlinOptions {\n jvmTarget = \"1.8\"\n }\n buildFeatures {\n buildConfig = true\n }\n}\n\nrust {\n rootDirRel = \"../../../\"\n}\n\ndependencies {\n implementation(\"androidx.webkit:webkit:1.6.1\")\n implementation(\"androidx.appcompat:appcompat:1.6.1\")\n implementation(\"com.google.android.material:material:1.8.0\")\n testImplementation(\"junit:junit:4.13.2\")\n androidTestImplementation(\"androidx.test.ext:junit:1.1.4\")\n androidTestImplementation(\"androidx.test.espresso:espresso-core:3.5.0\")\n}\n\napply(from = \"tauri.build.gradle.kts\")\n```\n[/details]\n\n构建 APK：\n```\ntauri android build --apk --target aarch64\n```\n\n效果展示：\n* [Rails Guides with old UI](/t/topic/13456)：\nhttps://assets.xjtu.app/pool/app.xjtu.rails-guides.apk\n\n* Rust Doc ( `rustup doc --book` )\nhttps://assets.xjtu.app/pool/app.xjtu.rust-doc.apk\n\n[details=\"Hidden\"]\nPlay Store 上面有别人不知道用什么高级方法打包的 APK：\n\n \n[/details]\n\n\n* OI wiki\nhttps://assets.xjtu.app/pool/app.xjtu.oi-wiki.apk","cooked":"

在电梯和高铁上有些时候网络不好，这时候刷行動裝置加载不出来就很难受。

很多时候刷手机都是访问一些网站，而很多网站都是全部由静态文件构成的。然而当你点击进主页的时候没有一次性将所有资源到下到行動裝置上，导致后续点击站内的链接需要等待加载。

有没有可能将所有资源全都下载下来供浏览器浏览呢呢？
\n一种方式是将所有 html，css，js 文件下载到手机，然后启动一个 darkhttpd 这样的 web server，再用浏览器导航到 localhost:8080 访问，不过这样有点繁琐。
\n一个跨平台程序框架 Tauri v2 提供了更容易的方式，方法如下：

使用 vanilla 模板新建工程

pnpm create tauri-app -m pnpm -t vanilla --identifier app.xjtu.rust-doc xjtu-tauri-app-rust-doc\ncd xjtu-tauri-app-rust-doc\npnpm install\npnpm tauri android init\n

然后把包含 index.html 的静态资源目录全部放到 src 目录底下：

rsync  -av --delete ~/.rustup/toolchains/stable-x86_64-unknown-linux-gnu/share/doc/rust/html/ ./src/\n

参照 Android Code Signing 修改以下文件，添加 release 编译所需的凭据信息：

src-tauri/gen/android/keystore.properties

password=7\nkeyAlias=xj\nstoreFile=/app.jks\n

src-tauri/gen/android/app/build.gradle.kts

import java.util.Properties\nimport java.io.FileInputStream\n\nplugins {\n    id(\"com.android.application\")\n    id(\"org.jetbrains.kotlin.android\")\n    id(\"rust\")\n}\n\nval tauriProperties = Properties().apply {\n    val propFile = file(\"tauri.properties\")\n    if (propFile.exists()) {\n        propFile.inputStream().use { load(it) }\n    }\n}\n\nandroid {\n    compileSdk = 34\n    namespace = \"app.xjtu.static_app\"\n    defaultConfig {\n        manifestPlaceholders[\"usesCleartextTraffic\"] = \"false\"\n        applicationId = \"app.xjtu.static_app\"\n        minSdk = 24\n        targetSdk = 34\n        versionCode = tauriProperties.getProperty(\"tauri.android.versionCode\", \"1\").toInt()\n        versionName = tauriProperties.getProperty(\"tauri.android.versionName\", \"1.0\")\n    }\n    signingConfigs {\n      create(\"release\") {\n          val keystorePropertiesFile = rootProject.file(\"keystore.properties\")\n          val keystoreProperties = Properties()\n          if (keystorePropertiesFile.exists()) {\n              keystoreProperties.load(FileInputStream(keystorePropertiesFile))\n          }\n\n          keyAlias = keystoreProperties[\"keyAlias\"] as String\n          keyPassword = keystoreProperties[\"password\"] as String\n          storeFile = file(keystoreProperties[\"storeFile\"] as String)\n          storePassword = keystoreProperties[\"password\"] as String\n        }\n    }\n\n\n    buildTypes {\n        getByName(\"debug\") {\n            manifestPlaceholders[\"usesCleartextTraffic\"] = \"true\"\n            isDebuggable = true\n            isJniDebuggable = true\n            isMinifyEnabled = false\n            packaging {                jniLibs.keepDebugSymbols.add(\"*/arm64-v8a/*.so\")\n                jniLibs.keepDebugSymbols.add(\"*/armeabi-v7a/*.so\")\n                jniLibs.keepDebugSymbols.add(\"*/x86/*.so\")\n                jniLibs.keepDebugSymbols.add(\"*/x86_64/*.so\")\n            }\n        }\n        getByName(\"release\") {\n            isMinifyEnabled = true\n            signingConfig = signingConfigs.getByName(\"release\")\n            proguardFiles(\n                *fileTree(\".\") { include(\"**/*.pro\") }\n                    .plus(getDefaultProguardFile(\"proguard-android-optimize.txt\"))\n                    .toList().toTypedArray()\n            )\n        }\n    }\n    kotlinOptions {\n        jvmTarget = \"1.8\"\n    }\n    buildFeatures {\n        buildConfig = true\n    }\n}\n\nrust {\n    rootDirRel = \"../../../\"\n}\n\ndependencies {\n    implementation(\"androidx.webkit:webkit:1.6.1\")\n    implementation(\"androidx.appcompat:appcompat:1.6.1\")\n    implementation(\"com.google.android.material:material:1.8.0\")\n    testImplementation(\"junit:junit:4.13.2\")\n    androidTestImplementation(\"androidx.test.ext:junit:1.1.4\")\n    androidTestImplementation(\"androidx.test.espresso:espresso-core:3.5.0\")\n}\n\napply(from = \"tauri.build.gradle.kts\")\n

构建 APK：

tauri android build --apk --target aarch64\n

效果展示：

Rails Guides with old UI：

https://assets.xjtu.app/pool/app.xjtu.rails-guides.apk

Rust Doc ( rustup doc --book )

https://assets.xjtu.app/pool/app.xjtu.rust-doc.apk

Hidden

Play Store 上面有别人不知道用什么高级方法打包的 APK：
\nhttps://play.google.com/store/apps/details?id=com.rust_doc.md_ismail_hosen
\nhttps://play.google.com/store/apps/details?id=com.rust_book.example

OI wiki

https://assets.xjtu.app/pool/app.xjtu.oi-wiki.apk

","createdAt":"2024-10-01 14:09:53.491149","updatedAt":"2025-02-18 08:39:45.773053","replyToPostNumber":null,"replyCount":0,"likeCount":2,"wordCount":543,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"hugging_face_exploding_head","count":1,"users":[{"id":30,"username":"一只玉米人","name":"玉米🌽"}],"hasReacted":false},{"reaction":"wave_gif","count":1,"users":[{"id":1288,"username":"LittleWangInShanghai","name":"小王在上海"}],"hasReacted":false},{"reaction":"❤️","count":2,"users":[{"id":30,"username":"一只玉米人","name":"玉米🌽"},{"id":1288,"username":"LittleWangInShanghai","name":"小王在上海"}],"hasReacted":false}],"wiki":false,"version":6,"publicVersion":6,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":41077,"postNumber":2,"raw":"这么想想你站也可以做一个静态离线版的 app，仅浏览","cooked":"

这么想想你站也可以做一个静态离线版的 app，仅浏览

\n","createdAt":"2024-10-01 15:35:05.233878","updatedAt":"2024-10-01 15:35:05.233878","replyToPostNumber":null,"replyCount":1,"likeCount":0,"wordCount":22,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":41103,"postNumber":3,"raw":"好的，这是你站的所有帖子的文字和图片等富媒体资料归档在一起给人浏览的一个 APK，除了体积大了一点（**1650 MiB**），后续的浏览速度倒是快得飞起 :airplane_departure: \n\n\n\nP.S. 1：静态网页是在今天用：\n```\nwget --adjust-extension --mirror --page-requisites --convert-links --recursive --user-agent \"Googlebot\" https://xjtu.app\n```\n命令爬到的。\n\n假如把浏览器 User Agent 改成 `Googlebot` 也可获得同样的界面，或可直接访问：https://static.xjtu.app 感受。\n\nP.S. 2：你站所有静态资源加在一块总共有 1GiB+，编译太费时，提示这种基于 tauri 的方式 scale badly","cooked":"

好的，这是你站的所有帖子的文字和图片等富媒体资料归档在一起给人浏览的一个 APK，除了体积大了一点（1650 MiB），后续的浏览速度倒是快得飞起 🛫

https://assets.xjtu.app/pool/app.xjtu.static-app.apk

P.S. 1：静态网页是在今天用：

wget --adjust-extension --mirror --page-requisites --convert-links   --recursive  --user-agent \"Googlebot\" https://xjtu.app\n

命令爬到的。

假如把浏览器 User Agent 改成 Googlebot 也可获得同样的界面，或可直接访问：https://static.xjtu.app 感受。

P.S. 2：你站所有静态资源加在一块总共有 1GiB+，编译太费时，提示这种基于 tauri 的方式 scale badly

\n","createdAt":"2024-10-02 07:50:21.840833","updatedAt":"2024-12-22 15:08:44.932373","replyToPostNumber":2,"replyCount":0,"likeCount":0,"wordCount":158,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}}],"hasMore":false,"lastReadPostNumber":1,"hasUrlPostNumber":false}