Folia PWA 手机端安装指南3 步装好歌词动画播放器【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 歌词动画播放器可以以 PWA渐进式 Web 应用形式装到手机上不用下载 App 安装包把网页添加进主屏幕就得到一个独立图标点开即全屏听歌服务端发版后客户端自动跟上。这篇指南讲清从部署到安装再到验收的完整路径。一、安装前自检三项前置条件动手之前花两分钟核对下表缺任何一项后面的流程都会卡住检查项达标标准不达标会怎样部署地址手机浏览器能直接打开的地址局域网或公网域名均可页面都打不开谈不上安装HTTPS地址以https开头证书链被浏览器信任菜单里不会出现安装选项离线缓存也不可用浏览器安卓选 ChromeiOS 选 Safari其他浏览器的 PWA 入口可能不完整或不显示为什么必须 HTTPS浏览器的安装为应用与离线缓存都只向安全上下文开放协议不对入口本身就不会生成。二、获取访问地址三档部署方案任选PWA 的唯一前置就是一个能访问的 Folia 地址。按你的条件挑一条路方案一无服务器一键托管适合想最快跑起来的人。把仓库导入 Vercel / Cloudflare 这类平台即可拿到带域名的地址平台直接提供 HTTPS不用操心证书。用 QQ 音乐时环境变量写法照 docs/qq-music-deployment.md 配置即可。方案二NAS 或自建服务器Docker 全栈私有化适合想整套自托管的人。将 deploy/docker/compose.yaml 与.env模板下载到同一目录为SYNC_TOKEN写入至少 8 位随机串再执行docker compose up -d启动后默认访问地址是http://NAS-IP:18080。反向代理与完整配置说明见 deploy/docker/README.md。方案三逐条自定义克隆仓库自部署适合想逐项调整配置的人。执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major取得源码环境变量逐项说明看 docs/technical.md任意支持 Node.js 的平台都能运行。HTTPS 证书检查⚠️ 菜单里的添加应用入口与离线缓存是浏览器只授予安全上下文的能力非 HTTPS 地址没有安装机会。免费托管平台会直接发好证书无需处理NAS 自建则需配置反向代理装上浏览器信任的证书链——自签发的不被认可。若选项始终不出现先怀疑证书。地址就绪后打开首页即是这样的界面三、双端安装对照安卓添加主屏幕 vs iPhone 安装 PWA两端都是三步差别只在入口位置步骤安卓 · ChromeiOS · Safari① 打开地址Chrome 中打开 Folia 地址Safari 打开iOS 上仅此浏览器走这套流程② 找到入口右上角 ⋮ 菜单 →添加到主屏幕或安装应用底部分享按钮向上箭头方框→ 列表上滑找到添加到主屏幕③ 确认安装核对名称后点添加核对名称后点添加两处差异单独提醒入口形态不同安卓藏在右上角菜单iOS 藏在底部分享面板图标与位置都不相同。首次访问提示安装提示有时只在首次访问时弹出未出现的话重载一次页面再看仍没有通常是浏览器或地址没对齐对照下面速查表排查。四、装完验收歌词动画、主题速编与自动更新点图标进入的是一扇独立窗口地址栏与标签栏消失画面归播放器独占体验贴近原生应用。这些行为在构建时即已声明——vite.config.ts 写明了display: standalone窗口模式、#09090b主题色与 512×512 图标index.html 则附带apple-mobile-web-app-capable一类的全屏元标签因此安卓与 iPhone 各自拿到的都是同一套全屏表现。可以逐项验收的核心体验竖屏版式自适应歌词排版随窗口变化自动重组竖着拿手机动画也不降质每个全屏主题还各有独立的视觉氛围。主题速编切换风格不必翻设置层层找主题速编入口直达。AI 推导色板整组配色可以由 AI 按歌曲情绪与歌词内容推导手机端同样可用——前提是部署时配置了 AI 密钥实现位于 shared/ai/ 目录。在线曲库如常网易云、QQ 音乐、酷狗等登录态留在手机浏览器里搜索、播放与歌词动画照旧这是手机端的主力用法。冷启动与自动更新主界面资源在安装时已预缓存图标启动比浏览器开页快不少Service Worker 走autoUpdate策略服务端发版后下次打开即切新版无需手动清缓存。比如群唱主题会把每句歌词放进气泡里竖屏下的节奏更紧凑五、私有曲库选项Navidrome 接入三步手机端导入不了本地文件家里的歌怎么办官方路径是 Navidrome 私有曲库NAS 起服务用 Docker 运行一个 Navidrome 实例挂载音乐所在目录账户页配置在 Folia 的账户页填入该 Navidrome 地址完成接入数据对齐曲库、封面与歌词会一并拉取动画照常驱动缺失部分由智能匹配自动补全。文件始终留在 NAS手机只通过网络取流播放既不挤占存储也不怎么耗流量。本地曲库管理的细节可参考 docs/local-library-management.md该文档按桌面端导入流程撰写接 Navidrome 的思路相通。六、排障速查表现象原因解法找不到添加到主屏幕 / 安装应用入口地址未走 HTTPS或浏览器不是 Chrome安卓/ SafariiOS核对地址协议与浏览器型号再重载一次页面服务端已更新手机仍停留旧版Service Worker 的 autoUpdate 一般下次启动即切换异常时会滞留清除该站点数据或移除图标后重新安装任选其一即可恢复想在手机里导入本地音乐文件本地目录导入依赖 File System Access API仅桌面端 Chromium 系浏览器开放移动端拿不到该权限改用 Navidrome 曲库方案见上一节地铁 / 弱网下启动或播放表现异常启动界面命中预缓存、不依赖网络音频流本身仍需走网弱网卡顿属预期表现启动不受影响播放卡顿待信号恢复即回正七、收尾整套流程就是配置、打开、安装。现在掏出手机试一次看看歌词动画在主屏幕上的样子。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/3 9:53:04 · 阅读 1.2k Folia PWA 手机端安装指南：3 步装好歌词动画播放器
Folia PWA 手机端安装指南3 步装好歌词动画播放器【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 歌词动画播放器可以以 PWA渐进式 Web 应用形式装到手机上不用下载 App 安装包把网页添加进主屏幕就得到一个独立图标点开即全屏听歌服务端发版后客户端自动跟上。这篇指南讲清从部署到安装再到验收的完整路径。一、安装前自检三项前置条件动手之前花两分钟核对下表缺任何一项后面的流程都会卡住检查项达标标准不达标会怎样部署地址手机浏览器能直接打开的地址局域网或公网域名均可页面都打不开谈不上安装HTTPS地址以https开头证书链被浏览器信任菜单里不会出现安装选项离线缓存也不可用浏览器安卓选 ChromeiOS 选 Safari其他浏览器的 PWA 入口可能不完整或不显示为什么必须 HTTPS浏览器的安装为应用与离线缓存都只向安全上下文开放协议不对入口本身就不会生成。二、获取访问地址三档部署方案任选PWA 的唯一前置就是一个能访问的 Folia 地址。按你的条件挑一条路方案一无服务器一键托管适合想最快跑起来的人。把仓库导入 Vercel / Cloudflare 这类平台即可拿到带域名的地址平台直接提供 HTTPS不用操心证书。用 QQ 音乐时环境变量写法照 docs/qq-music-deployment.md 配置即可。方案二NAS 或自建服务器Docker 全栈私有化适合想整套自托管的人。将 deploy/docker/compose.yaml 与.env模板下载到同一目录为SYNC_TOKEN写入至少 8 位随机串再执行docker compose up -d启动后默认访问地址是http://NAS-IP:18080。反向代理与完整配置说明见 deploy/docker/README.md。方案三逐条自定义克隆仓库自部署适合想逐项调整配置的人。执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major取得源码环境变量逐项说明看 docs/technical.md任意支持 Node.js 的平台都能运行。HTTPS 证书检查⚠️ 菜单里的添加应用入口与离线缓存是浏览器只授予安全上下文的能力非 HTTPS 地址没有安装机会。免费托管平台会直接发好证书无需处理NAS 自建则需配置反向代理装上浏览器信任的证书链——自签发的不被认可。若选项始终不出现先怀疑证书。地址就绪后打开首页即是这样的界面三、双端安装对照安卓添加主屏幕 vs iPhone 安装 PWA两端都是三步差别只在入口位置步骤安卓 · ChromeiOS · Safari① 打开地址Chrome 中打开 Folia 地址Safari 打开iOS 上仅此浏览器走这套流程② 找到入口右上角 ⋮ 菜单 →添加到主屏幕或安装应用底部分享按钮向上箭头方框→ 列表上滑找到添加到主屏幕③ 确认安装核对名称后点添加核对名称后点添加两处差异单独提醒入口形态不同安卓藏在右上角菜单iOS 藏在底部分享面板图标与位置都不相同。首次访问提示安装提示有时只在首次访问时弹出未出现的话重载一次页面再看仍没有通常是浏览器或地址没对齐对照下面速查表排查。四、装完验收歌词动画、主题速编与自动更新点图标进入的是一扇独立窗口地址栏与标签栏消失画面归播放器独占体验贴近原生应用。这些行为在构建时即已声明——vite.config.ts 写明了display: standalone窗口模式、#09090b主题色与 512×512 图标index.html 则附带apple-mobile-web-app-capable一类的全屏元标签因此安卓与 iPhone 各自拿到的都是同一套全屏表现。可以逐项验收的核心体验竖屏版式自适应歌词排版随窗口变化自动重组竖着拿手机动画也不降质每个全屏主题还各有独立的视觉氛围。主题速编切换风格不必翻设置层层找主题速编入口直达。AI 推导色板整组配色可以由 AI 按歌曲情绪与歌词内容推导手机端同样可用——前提是部署时配置了 AI 密钥实现位于 shared/ai/ 目录。在线曲库如常网易云、QQ 音乐、酷狗等登录态留在手机浏览器里搜索、播放与歌词动画照旧这是手机端的主力用法。冷启动与自动更新主界面资源在安装时已预缓存图标启动比浏览器开页快不少Service Worker 走autoUpdate策略服务端发版后下次打开即切新版无需手动清缓存。比如群唱主题会把每句歌词放进气泡里竖屏下的节奏更紧凑五、私有曲库选项Navidrome 接入三步手机端导入不了本地文件家里的歌怎么办官方路径是 Navidrome 私有曲库NAS 起服务用 Docker 运行一个 Navidrome 实例挂载音乐所在目录账户页配置在 Folia 的账户页填入该 Navidrome 地址完成接入数据对齐曲库、封面与歌词会一并拉取动画照常驱动缺失部分由智能匹配自动补全。文件始终留在 NAS手机只通过网络取流播放既不挤占存储也不怎么耗流量。本地曲库管理的细节可参考 docs/local-library-management.md该文档按桌面端导入流程撰写接 Navidrome 的思路相通。六、排障速查表现象原因解法找不到添加到主屏幕 / 安装应用入口地址未走 HTTPS或浏览器不是 Chrome安卓/ SafariiOS核对地址协议与浏览器型号再重载一次页面服务端已更新手机仍停留旧版Service Worker 的 autoUpdate 一般下次启动即切换异常时会滞留清除该站点数据或移除图标后重新安装任选其一即可恢复想在手机里导入本地音乐文件本地目录导入依赖 File System Access API仅桌面端 Chromium 系浏览器开放移动端拿不到该权限改用 Navidrome 曲库方案见上一节地铁 / 弱网下启动或播放表现异常启动界面命中预缓存、不依赖网络音频流本身仍需走网弱网卡顿属预期表现启动不受影响播放卡顿待信号恢复即回正七、收尾整套流程就是配置、打开、安装。现在掏出手机试一次看看歌词动画在主屏幕上的样子。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考