Folia 手机PWA安装方法零代码部署全屏歌词动画播放器到手机主屏【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款全屏歌词动画音乐播放器支持网易云、QQ 音乐、酷狗与 Navidrome 曲库。本文只解决两件事先把 Web 版部署到手机够得到的地址再用浏览器的 PWA 能力把它装进手机主屏全程零代码。Folia 手机PWA部署前自查清单HTTPS、浏览器与能力边界PWA 本质是可安装的网页安装入口只在 HTTPS 安全上下文里出现且安卓 Chrome 与 iOS Safari 才有完整的「添加到主屏幕」流程。下面三项花两分钟过完能省掉后面来回折腾。地址栏有没有锁标志纯 HTTP 地址不会显示安装入口部分浏览器能力也会降级。没有 HTTPS 时换自带 HTTPS 的托管平台或给 NAS 挂一层反向代理加可信证书。浏览器是不是指定款安卓用 ChromeiOS 用 Safari。其他浏览器经常没有「添加到主屏幕」入口先换浏览器再操作。预期对不对在线搜索播放、歌词动画、Navidrome 曲库在手机上都能用导入手机本地音频文件不能。把手机端理解成「歌词动画播放器 在线/Navidrome 曲库」就不会落空。Folia Web版部署三条路径一键托管、NAS Docker、克隆自建部署只为一个目的给手机一个稳定够得到的地址。按你的现状对号入座更多细节见部署文档。还没部署过服务器适合第一次折腾的人。项目内置了 Vercel 与 Cloudflare 的一键部署按钮点几下几分钟上线HTTPS 和域名都不用管。想在托管环境启用 QQ 音乐把VITE_QQ_API_BASE配成/api/qq再补一个服务端密钥QQ_SESSION_SECRET不加VITE_前缀不需要单独部署常驻 API完整步骤见QQ 音乐部署指南。NAS 已经在跑编排文件是 compose.yaml四步跑起来空目录里放两个文件compose.yaml和.env.env从模板deploy/docker/.env.example复制。生成访问令牌openssl rand -hex 32命令输出一个随机字符串填进.env的SYNC_TOKEN这是同步客户端的凭据至少 8 位。后台启动整套服务docker compose up -d --wait拉取镜像并启动全部容器等命令返回即可。浏览器打开http://NAS-IP:18080把NAS-IP换成 NAS 的局域网地址。看到 Folia 首页说明 Web 版已上线。端口、环境变量与反向代理的细节见 Docker 部署说明。想自己管构建与HTTPS自由度最高环境变量、构建、HTTPS 都归自己管。先克隆git clone https://gitcode.com/GitHub_Trending/fo/folia-major克隆下来后按部署文档自行配置构建成功后本地就能打开再挂上域名和证书给手机用。Folia PWA主屏安装步骤安卓Chrome与iPhone Safari分流安装动作全部发生在浏览器里浏览器把已部署的页面封装成主屏图标不走应用商店也没有安装包。按系统走对应路径。安卓Chrome 安装用 Chrome 打开 Folia 地址。点右上角菜单三个竖点。选「安装应用」或「添加到主屏幕」。确认名称为 Folia点「添加」。iPhoneSafari 安装用 Safari 打开 Folia 地址。点底部分享按钮。上滑找到「添加到主屏幕」点一下。确认名称点「添加」。两套系统的验证方式相同点主屏图标应用以独立全屏窗口启动没有地址栏和标签页直接进入全屏歌词动画界面。主题都会响应式适配竖屏不裁剪也不拥挤。想换风格走「主题速编」入口参数随时可调主题配色还能由 AI 按歌曲自动生成前提是部署时配了 AI 密钥。网易云、QQ 音乐、酷狗的登录态存在手机浏览器里登录一次后很长一段时间不用重复登。Folia 手机接入曲库在线库登录与首页确认登录态存在浏览器本地「接曲库」就是在应用里登一次打开账户页选平台登录。扫码或输完账号登录成功后首页会变成曲库卡片歌单、电台、专辑以磁贴排列点进去就能播。桌面端本地曲库的管理方式不同细节见本地曲库管理文档手机端不涉及这部分。Folia Navidrome自建曲库Docker接入把「自己的歌」放到手机原理一句话歌留在 NAS 上Navidrome 扫描后以流媒体曲库对外服务手机 PWA 只拉曲库、封面和歌词一个文件都不搬。在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录。在 Folia 的账户页填 Navidrome 服务地址。地址必须每台设备都够得到页面走 HTTPS 时它也得是 HTTPS否则浏览器会拦截混合内容。曲库与封面同步完成后直接播放。缺失的歌词可通过智能匹配自动补齐歌词动画照常驱动。走 Docker 全栈路线的话还可以在.env里填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项新打开的浏览器会自动登录这个 Navidrome省一次手动填写。这套组合省手机空间也省流量文件留在 NAS手机流式播放。Folia 手机装不上与用不顺排查三类常见故障定位手机端的问题几乎都落在两个原因上origin 不一致或地址够不到。先对症状再动手。装不上菜单里没有「添加到主屏幕」原因基本是访问了 HTTP 地址或浏览器不是 Chrome/Safari。动作换成 HTTPS 地址重载一次页面再用指定浏览器操作。装完用不顺点图标还是旧版界面Service Worker 的更新通常下次打开才生效偶尔会卡住。动作清一次该站点的浏览器数据或删掉图标重新添加。HTTP 换 HTTPS 后登录态和设置消失两个地址属于不同 origin数据不会自动迁移。动作重新登录配置一遍地址定型后不要来回切换。想导入本地歌曲却没有入口不是故障。本地目录导入依赖 File System Access API只有桌面端 Chromium 系浏览器支持手机端入口本身不存在。「自己的歌」走 Navidrome 路线。进阶坑点Navidrome 连上了曲库和封面拉不下来原因多半是填了 Docker 内部主机名手机够不到或页面是 HTTPS 而 Navidrome 地址是 HTTP。动作改成各设备可达的地址需要时对齐到 HTTPS。Folia 手机能做什么不能做什么能力边界与上手顺序别贪多按下面的顺序走完就行。边界手机端不支持导入手机本地的音频文件本地目录导入只属于桌面端前面自查列出的其余能力都能正常使用。建议的上手顺序先用一键托管把 Web 版跑起来接一个在线曲库把歌词动画流程完整跑通稳定之后再上 Navidrome把「自己的歌」补进来。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考