Folia PWA 安装指南把歌词动画播放器装进手机主屏幕的完整清单【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一个歌词动画播放器有意思的一点是它不是原生 App装上之后却完全是 App 的样子。网页版本身内置了 PWA 能力把独立图标放进手机主屏幕点开就是全屏窗口没有地址栏核心界面资源会预缓存冷启动更快服务端更新后手机端也会自动跟上新版。这篇指南面向想在手机上听在线音乐、看歌词动画同时又想把私有曲库接进同一个入口的用户从部署到安装到进阶用法一次讲清。Folia 手机 PWA 适合谁先分清楚能做什么、不能做什么这一节用一分钟帮你判断值不值得装省得装完发现用不上。适合你如果你平时用网易云、QQ 音乐或酷狗想在手机上继续听并且要歌词动画体验。登录态留在手机浏览器里搜索、播放都照旧。你家里有 NAS想把私有曲库接进来。走 Navidrome 通道即可后面有完整路线。你想要一个没有地址栏、没有标签页的全屏应用。构建层已经把整套能力接好了standalone 独立窗口模式、#09090b 主题色、512×512 图标页面里还有 apple-mobile-web-app-capable 这类 iOS 全屏元标签所以安卓和 iPhone 拿到的是同一套全屏体验不需要你配置任何东西。不适合你如果你想把手机里存的 MP3 文件夹直接拖进播放器。这条路在手机上走不通因为本地导入依赖 File System Access API只有桌面端的 Chromium 系浏览器支持手机浏览器里没有这个入口。别灰心有一条官方替代路线Navidrome读到第 7 节。没有服务器怎么部署三种方式按你的条件挑一条装 PWA 的前提是先有一个 Folia 访问地址。对着下面的问题选就行。我没有服务器。走 Vercel 或 Cloudflare 一键托管平台自带 HTTPS几分钟就能拿到带域名的地址最省事。QQ 音乐相关的环境变量写法查 docs/qq-music-deployment.md 即可。我有 NAS。走 Docker 全栈部署。把 deploy/docker/compose.yaml 与环境变量模板放进同一目录在 .env 里填好SYNC_TOKEN执行docker compose up -d启动默认访问地址就是http://NAS-IP:18080从几分钟到半小时不等。我想把配置逐条自定义。克隆仓库自行部署任何支持 Node.js 的平台都可以环境变量的完整说明在 docs/technical.md。仓库克隆地址git clone https://gitcode.com/GitHub_Trending/fo/folia-major。为什么点不到安装应用HTTPS 与证书链必须排在安装之前这一节单独拎出来因为找不到安装入口是最常见的卡点而它几乎都由同一个原因造成。PWA 的安装入口和离线缓存只在 HTTPS 安全上下文里稳定生效。这里要把因果说透浏览器出于安全考虑不信任明文地址所以地址不带 https 时安装应用这个选项可能根本不出现不是你的操作问题。免费托管平台自带证书这一条你不用管。NAS 自部署必须自己补上配好反向代理并安装浏览器信任的证书链。注意自签名证书不算数浏览器照样不认。反向代理的完整配置示例见 deploy/docker/README.md。记住一个自检动作在手机上打开地址后先看地址栏有没有锁形标志。没有就先解决证书再去谈安装。手机上怎么安装 Folia安卓和 iPhone 各四步地址就绪、锁形标志就位之后这一节完成最后一段路。两个系统的入口位置不同分开看。安卓Chrome用 Chrome 打开 Folia 的 https 地址点右上角菜单⋮选添加到主屏幕或安装应用确认名称为 Folia点添加iOSSafari用 Safari 打开 Folia 的 https 地址点底部的分享按钮在列表里找到添加到主屏幕确认名称点添加两个细节系统有时只在首次访问时弹安装横幅没看到的话刷新一次页面再看别换浏览器其他浏览器可能压根不显示这个入口。装好之后的样子点图标应用以全屏独立窗口启动没有地址栏、没有标签页观感和原生 App 很难分清。Folia PWA 装完看到什么竖屏歌词动画与自动重排主题装完最想确认的就是效果这一节直接说你会看到什么。Folia 的强项是一整套全屏歌词主题每个主题都有自己的排版氛围和一批可调参数。关键在于版式会跟着窗口尺寸走你把手机竖过来歌词布局自动重新组织动画不打折、不卡顿。竖屏正是 PWA 场景里最常用的拿法。上图的群唱主题把每句歌词排成聊天气泡竖屏上排布更紧凑是演示主题重排的好例子。想换风格走主题速编入口就行不用翻设置。还有一个加分项是 AI 生成配色主题的色板会按歌曲情绪和歌词内容自动推导手机端同样能用前提是部署时配好了 AI 密钥。手机上能不能听本地歌Navidrome 替代路线手机导入不了本地文件但这节给出官方认可的做法让歌留在 NAS 上、手机远程听。在 NAS 上用 Docker 跑起 Navidrome挂载放着音乐的目录在 Folia 的账户页填入这个 Navidrome 服务完成接入Folia 把曲库、封面、歌词一次拉全歌词动画照常驱动歌安静地待在 NAS 上手机远程连同一个曲库不占手机存储流量消耗也小。缺歌词的歌还能走智能匹配自动补上。本地曲库的管理细节可以看 docs/local-library-management.md该文档按桌面端导入流程撰写。常见问题现象、原因、动作三段速查出问题时按这个顺序对先认出现象再找原因最后执行动作。现象手机上找不到添加到主屏幕 / 安装应用。原因地址不是 HTTPS或没用对浏览器。动作确认地址带 https安卓用 Chrome、iOS 用 Safari刷新页面再试。现象服务端更新过了手机还停在旧版。原因Service Worker 采用 autoUpdate 策略正常情况下次打开就切换。动作长时间没变的话清一次站点数据或者从主屏幕移除图标后重新添加。现象想在手机里导入本地音乐。原因这个能力只存在于桌面端手机端按设计不提供。动作走 Navidrome 曲库路线见上一节。现象地铁或弱网里打开慢。原因界面资源预缓存之后启动不挑网络慢的只是首屏前的网络往返音乐流本身仍要走网络。动作弱网下的播放卡顿属于预期表现不是故障换个网络环境即可。现在就做三步把 Folia 变成主屏幕上的应用别把这篇存起来收藏现在就动手第一步确认你的地址带 https 且浏览器锁形标志在位第二步按第 5 节的清单四步把图标加到主屏幕第三步点开图标放一首有歌词的歌看看竖屏里的动画效果。从网页到主屏幕 App中间只隔着四下点击。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考