企业官网建设流程全解析

Folia 没有手机 App？PWA 三步把歌词动画播放器装进主屏幕

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

Folia 没有官方手机 App，但它的 Web 版本身就是 PWA，浏览器能直接装进手机。总耗时 10 分钟以内：部署约 5 分钟，手机上装图标约 1 分钟。读完这篇，你能从拿到访问地址走到点开 Folia 图标，全屏看歌词动画。

先搞一个手机能打开的地址

PWA 一句话：能装进主屏幕、全屏跑的网页。不下载，不进应用商店。所以第一步，是让 Folia 有一个手机打得开的地址。三条路径，按你的条件挑：

• 平台一键部署：没服务器的你 → 点仓库里指向 Vercel / Cloudflare 的部署按钮 → 约 5 分钟
• Docker 全栈部署：有 NAS / 自建服务器 → 拷 compose.yaml 和.env模板，填好SYNC_TOKEN（至少八位随机串），执行启动命令：

docker compose up -d

默认地址http://NAS-IP:18080，完整步骤见 deploy/docker/README.md → 约 5 分钟

• 克隆仓库自行部署：想掌控每个环节 →git clone https://gitcode.com/GitHub_Trending/fo/folia-major，按环境变量说明 部署到任意 Node.js 平台 → 看环境

QQ 音乐等在线平台的接入配置，部署时按对应文档填环境变量即可，留空也不影响先跑起来。

⚠️ HTTPS 是硬前提。浏览器只给 HTTPS 页面显示安装入口，地址不是 HTTPS，手机上就找不到"添加到主屏幕"。免费平台自带证书；NAS 自部署要配好反向代理和可信证书。

安卓和 iPhone 上四步装完

安卓（Chrome）

1. 手机 Chrome 打开 Folia 地址
2. 点右上角菜单（⋮）
3. 选**「添加到主屏幕」**
4. 确认名称为 Folia，点**「添加」**

iPhone（Safari）

1. Safari 打开 Folia 地址
2. 点底部分享按钮（⬆️）
3. 上滑找到**「添加到主屏幕」**
4. 确认名称，点**「添加」**

装完主屏幕多一个独立图标，点开没有地址栏，整屏都是歌词动画。

装完能干嘛、不能干嘛

装完直接能用的

• 在线搜索、播放：网易云音乐、QQ 音乐、酷狗
• 歌词动画主题，响应式布局自动适配竖屏
• Navidrome 私有曲库，远程拉取照常播放
• 弱网快速启动，核心资源已预缓存

目前做不到的（及替代）

• 导入本地音乐文件（依赖桌面端 File System Access API，手机浏览器没有选本地目录的能力，走 Navidrome 补位）
• 本地曲库扫描与管理（桌面端功能，手机侧只读远程曲库）
• 视频导出（桌面端专属，手机端不开放）

它为什么接近原生？四个机制叠出来的：独立图标直接启动，不经过浏览器；standalone显示模式全屏窗口跑，没地址栏；核心资源由 Service Worker 预缓存到手机本地，弱网也秒开；autoUpdate策略下部署新版后，下次打开自动生效，不用手动升级。这些配置写在 vite.config.ts 的 PWA manifest 里，index.html 还内置了 iOS 全屏元标签，安卓和 iPhone 拿到的体验对等。

竖着拿，歌词动画自动重排

手机竖着拿，歌词布局自动重算，动画不缩水、不截断。

• 流光（Lumière）：深色底叠加流动光效，歌词逐字入场、光晕强调，OLED 屏上尤其好看
• 群唱（Cappella）：歌词排成对话气泡，多人轮流「开口」，适合合唱向曲目

主题配色还能按歌曲情绪和歌词由 AI 生成，配了 AI 密钥才有，没配不影响播放。

Navidrome 三步接私有曲库

手机不能直接读本地音频文件，Navidrome 补上这环：

1. NAS 上 Docker 起 Navidrome，挂音乐目录
2. Folia 账户页接入你的 Navidrome 服务
3. 曲库、封面、歌词自动拉取，放歌

音频文件始终留在 NAS，手机只走 PWA 远程播，不占手机存储。本地曲库的管理细节看 本地曲库管理文档。

卡住了查这里

• 找不到安装入口→ 确认地址是 HTTPS；安卓用 Chrome、iOS 用 Safari，其他浏览器可能不显示入口；刷新一次页面
• 部署更新后手机还是旧版→autoUpdate策略下次打开即生效；长时间不变就清一次站点数据，或删图标重新添加
• 想导本地文件→ 桌面端专属，手机上走 Navidrome 补位
• 弱网打不开→ 核心资源已预缓存能秒开，但音乐流本身要联网

在线曲库、私有曲库、全屏歌词动画，以后都收在主屏幕那一个图标里。

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