企业官网建设流程全解析

Folia 歌词动画播放器装进手机主屏幕：3 分钟 PWA 免 App 安装指南

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major

Folia 是一款主打歌词动画效果的播放器，支持本地音乐、Navidrome 和多平台在线音乐，没有官方手机 App，但 Web 版原生支持 PWA（渐进式 Web 应用，指能像 App 一样装进主屏幕、全屏独立运行的网页应用）。照这份 PWA 安装指南操作，约 3 分钟完成部署加安装，手机主屏幕上就多了一个独立图标的全屏歌词动画播放器。

🧭 适合谁，不适合谁

先说清楚手机端能干什么、不能干什么，免得白折腾：

• 能做：在线搜索网易云、QQ、酷狗的歌曲（登录态存在手机浏览器里，不用反复登录）；竖屏看全屏歌词动画，各主题随窗口尺寸响应式重排；接 Navidrome 听 NAS 上的私有曲库；核心资源有离线缓存，弱网下打开明显快于普通网页。
• 不能做：在手机上导入本地音乐文件。目录导入依赖桌面浏览器的 File System Access API（文件选择接口），手机浏览器没有这个能力。手机想听"自己的歌"，走 Navidrome 路线即可（见后文进阶部分）。

🚦 先选路线，再动手

PWA 本质是带安装入口的网页，所以第一件事是把 Web 版部署到手机够得到的地方。三条路线对号入座：

推荐一键托管。PWA 的可靠安装和离线运行都依赖 HTTPS 安全上下文（浏览器只在这类地址里开放完整能力），托管平台免费解决这件事，是新手阻力最小的路径。

📋 动手前自检清单

五项都打勾再开始，每项附了验证方法：

• 一台能上网的手机，安卓用 Chrome、iPhone 用 Safari。验证：打开浏览器能正常访问任意网站
• 一个手机能访问的 Folia Web 地址（托管平台分配的域名，或 NAS 局域网 IP + 端口）。验证：手机浏览器打开能看到 Folia 启动画面
• 地址栏是 HTTPS。验证：地址前有锁形标识，而不是http://
• Docker 路线才需要：Docker Engine 24+ 与 Compose v2。验证：终端执行docker version有输出
• 手机与 Folia 在同一网络（局域网部署时）或地址已暴露公网。验证：手机浏览器能打开该地址

🚀 主流程：从部署到装进主屏幕

把 Web 版部署到手机能打开的地址

托管路线：按 docs/technical.md 中"一键部署到 Vercel"一节的入口创建项目，部署完成后在项目设置里补齐环境变量即可。

Docker 路线：在一个空目录下载 deploy/docker/compose.yaml 和.env模板，用openssl rand -hex 32生成随机串填入SYNC_TOKEN（必填，至少八位），然后执行：

docker compose up -d --wait

注意：Docker 默认入口http://NAS-IP:18080是普通 HTTP，不属于安全上下文，手机上会找不到安装入口。NAS 用户请在反向代理上挂可信证书，把域名指到127.0.0.1:18080，细节见 deploy/docker/README.md 的"HTTPS 与浏览器安全上下文"一节。

克隆路线：clone 仓库（https://gitcode.com/GitHub_Trending/fo/folia-major）后自行构建，变量按需配置，不再赘述。

部署成功的验证标准：手机浏览器打开你的地址，能看到 Folia 启动动画和曲库首页，页面不报证书错误。

安卓走这里：Chrome 装到主屏幕

用 Chrome 打开 Folia 地址：

1. 点右上角 ⋮ 菜单
2. 选"添加到主屏幕"
3. 确认名称显示为 Folia，点"添加"

iPhone 走这里：Safari 装到主屏幕

用 Safari 打开 Folia 地址。页面需带apple-mobile-web-app-capable等元标签（index.html 已全部配好），步骤：

1. 点底部 ⬆️ 分享按钮
2. 上滑找到"添加到主屏幕"
3. 确认名称与图标，点"添加"

连接网易云后，手机上看到的曲库首页长这样：

✅ 装完怎么确认它真的好了

两个现象都能对上，才算装成功：

1. 图标点开是全屏独立窗口。返回桌面点 Folia 图标，页面以全屏窗口启动，没有地址栏，状态栏与界面颜色融为一体——这是 manifest 里standalone模式生效的表现，也是判断装成功的直接证据。
2. 歌词动画跑得顺。播放任意带歌词的歌曲，看全屏歌词动画：

"cappella"群唱主题把歌词排成左右交替的对话气泡，像一场合唱推进，竖屏窄屏下依然好读：

"pendolo"主题是机械齿轮与星空轨道，主歌词横排在一侧，副歌高亮逐字亮起。动画帧率正常、无掉帧，说明 Service Worker 缓存与渲染都在正常工作：

🎵 让私有曲库跑起来：Navidrome 三步

想让自己的歌出现在 PWA 里，用 Navidrome 做中间层：

1. 在 NAS 上用 Docker 部署 Navidrome，挂载音乐目录
2. 在 Folia 的.env中填入NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项
3. 手机新打开浏览器，自动登录并启用 Navidrome，无需在手机上手动填账号

注意：NAVIDROME_URL必须写各设备都能访问到的地址，不能是 Docker 内部主机名；Folia 走 HTTPS 时它也要是 HTTPS，否则浏览器会拦截混合内容。

配置生效后，PWA 首页就是这样的私有曲库视图：

🛠️ 出问题先查这张表

从第一行往下对照：

部署加安装总共 3 分钟，手机主屏幕上就多了一台全屏歌词动画播放器：在线搜索、Navidrome 曲库、离线秒开都在这个图标里。部署细节与 QQ 音乐等音源配置，回看 deploy/docker/README.md 和 docs/technical.md。

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major