企业官网建设流程全解析

Folia 手机 PWA 完整指南：把全屏歌词动画免费装进手机

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

Folia 是一款 Web 版音乐播放器，核心卖点就是全屏歌词动画，曲库覆盖网易云、QQ 音乐、酷狗与 Navidrome。商店没有现成 App，但把 Web 版以 PWA 加到手机主屏，就能当独立全屏应用跑。

🎯 Folia 手机端能力速览：能干什么，不能干什么

手机端不是桌面版的完整复制，能力被切成了两半，装之前值得先看清楚。

能做的

• 全屏歌词动画，各主题排版自动适配竖屏，不裁剪也不拥挤
• 搜索播放网易云、QQ 音乐、酷狗在线曲库，登录态存在浏览器里，登录一次管很久
• 接入 Navidrome 个人曲库，流式播放自己的歌
• 随时切换主题，AI 自动给歌曲生成配色（部署时配好 AI 密钥即可）

不能做的

• 把手机存储里的音频文件导入曲库——本地目录导入依赖 File System Access API，只有桌面端 Chromium 系浏览器支持
• 使用桌面版的本地曲库管理功能

手机本地导入这件事留给桌面版，手机上听「在云里的歌」就够了。

🚀 Folia 部署最快的方式：三条路线选一条

没有服务器？照样能拿到一个几分钟内上线、手机随时能打开的地址。手机要装成应用，前提就是有一个稳定可达的地址，选哪条路线取决于你有没有服务器。

路线一：一键托管（Vercel / Cloudflare）。适合没有服务器的你。项目带一键部署按钮，HTTPS 和域名都自带，几分钟上线，零配置，细节在 docs/technical.md。

路线二：Docker 全栈。适合 NAS 或自建服务器用户。编辑.env后执行docker compose up -d，默认地址是NAS-IP:18080。记得.env里要填至少 8 位的SYNC_TOKEN，编排文件是deploy/docker/compose.yaml，部署说明见 deploy/docker/README.md。

路线三：克隆仓库自行部署。自由度最高，环境变量和 HTTPS 全由你掌握。执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major后按文档配置即可，QQ 音乐的 serverless 配置可查 docs/qq-music-deployment.md。

新手直接走一键托管：不用管服务器、域名和证书，部署完的地址手机直接能打开。

📲 Folia 怎么装到手机主屏：四步走通

装到手机主屏只要四步，安卓和 iPhone 流程一致：

1. 用浏览器打开 Folia 的访问地址。
2. 打开浏览器菜单（安卓）或分享面板（iPhone）。
3. 选中「安装应用」或「添加到主屏幕」。
4. 确认名称显示为 Folia，保存。

安卓用 Chrome：点页面右上角的菜单，选「安装应用」或「添加到主屏幕」。

iPhone 用 Safari：点页面底部的分享图标，上滑找到「添加到主屏幕」，确认后添加。

怎么确认装对了？点开主屏上的图标，直接以独立全屏窗口启动，没有地址栏，没有标签页，看不到任何浏览器痕迹，就是装对了。

🗄️ Folia 进阶：用 Navidrome 把 NAS 上的歌搬进手机

想听自己存的音乐？路已经铺好：歌放在 NAS 上，Navidrome 扫描后以流媒体曲库对外服务，手机 PWA 只负责拉曲库、封面和歌词。

1. 在 NAS 上用 Docker 部署 Navidrome，挂载你的音乐目录。
2. 在 Folia 的账户页接入 Navidrome 服务。
3. 曲库与封面同步完成后直接播放，缺失的歌词可以由智能匹配自动补齐，歌词动画照常驱动。

一个注意点：Navidrome 的地址必须每台设备都够得到，Folia 页面是 HTTPS 时它也得是 HTTPS，否则浏览器会直接拦截混合内容。

桌面端本地曲库的管理方式可以看 docs/local-library-management.md，手机端则统一走 Navidrome 这条路。

🛠️ Folia 手机端问题速查：五个高频坑

出问题时先对号入座这五处，十次里有九次能命中。

菜单里找不到「添加到主屏幕」入口

原因：打开的是 HTTP 地址，或者没用 Chrome / Safari。

处理：换成 HTTPS 地址（一键托管自带，NAS 用户配反向代理和可信证书），再重载一次页面。

更新后打开还是旧界面

原因：Service Worker 缓存，更新一般下次打开生效，偶尔会卡住。

处理：清除一次站点数据，或者把主屏图标删掉重新添加。

Navidrome 连上了，曲库和封面却拉不下来

原因：填了 Docker 内部主机名手机够不到，或页面是 HTTPS 而地址是 HTTP。

处理：改成每台设备都能访问的地址，需要时对齐到 HTTPS。

换 HTTPS 后登录态和设置都空了

原因：两个地址属于不同 origin，数据不会自动迁移。

处理：重新登录并配置一遍，上线后不要来回切换协议。

手机上没有本地导入入口

原因：本地目录导入依赖 File System Access API，只在桌面 Chromium 浏览器可用。

处理：手机端的「自己的歌」走 Navidrome 路线，本地导入留在桌面版做。

🧭 收尾：建议这样体验 Folia 手机端

别急着一次把功能全跑满。先用一键托管上线，接一个在线曲库，把全屏歌词动画的流程完整走一遍；等这套组合稳定了，再接上 Navidrome，把 NAS 里的歌搬进手机。按这个顺序，一天之内你就能在手机上拿到完整的 Folia 体验，还不占手机空间。

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