Folia 歌词动画播放器装进手机主屏幕3 分钟 PWA 免 App 安装指南【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款主打歌词动画效果的播放器支持本地音乐、Navidrome 和多平台在线音乐没有官方手机 App但 Web 版原生支持 PWA渐进式 Web 应用指能像 App 一样装进主屏幕、全屏独立运行的网页应用。照这份 PWA 安装指南操作约 3 分钟完成部署加安装手机主屏幕上就多了一个独立图标的全屏歌词动画播放器。 适合谁不适合谁先说清楚手机端能干什么、不能干什么免得白折腾能做在线搜索网易云、QQ、酷狗的歌曲登录态存在手机浏览器里不用反复登录竖屏看全屏歌词动画各主题随窗口尺寸响应式重排接 Navidrome 听 NAS 上的私有曲库核心资源有离线缓存弱网下打开明显快于普通网页。不能做在手机上导入本地音乐文件。目录导入依赖桌面浏览器的 File System Access API文件选择接口手机浏览器没有这个能力。手机想听自己的歌走 Navidrome 路线即可见后文进阶部分。 先选路线再动手PWA 本质是带安装入口的网页所以第一件事是把 Web 版部署到手机够得到的地方。三条路线对号入座路线适合谁成本一键托管Vercel / Cloudflare新手、没有服务器的人平台自带 HTTPS 和域名低几分钟出结果Docker 全栈有 NAS 或自建服务器的用户一套 compose 拉起前端网关、音乐接口和 Sync Server中需再配一层反向代理拿证书克隆仓库自行部署想完全自定义构建和变量的人最高推荐一键托管。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 地址点右上角 ⋮ 菜单选添加到主屏幕确认名称显示为 Folia点添加iPhone 走这里Safari 装到主屏幕用 Safari 打开 Folia 地址。页面需带apple-mobile-web-app-capable等元标签index.html 已全部配好步骤点底部 ⬆️ 分享按钮上滑找到添加到主屏幕确认名称与图标点添加连接网易云后手机上看到的曲库首页长这样✅ 装完怎么确认它真的好了两个现象都能对上才算装成功图标点开是全屏独立窗口。返回桌面点 Folia 图标页面以全屏窗口启动没有地址栏状态栏与界面颜色融为一体——这是 manifest 里standalone模式生效的表现也是判断装成功的直接证据。歌词动画跑得顺。播放任意带歌词的歌曲看全屏歌词动画cappella群唱主题把歌词排成左右交替的对话气泡像一场合唱推进竖屏窄屏下依然好读pendolo主题是机械齿轮与星空轨道主歌词横排在一侧副歌高亮逐字亮起。动画帧率正常、无掉帧说明 Service Worker 缓存与渲染都在正常工作 让私有曲库跑起来Navidrome 三步想让自己的歌出现在 PWA 里用 Navidrome 做中间层在 NAS 上用 Docker 部署 Navidrome挂载音乐目录在 Folia 的.env中填入NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项手机新打开浏览器自动登录并启用 Navidrome无需在手机上手动填账号注意NAVIDROME_URL必须写各设备都能访问到的地址不能是 Docker 内部主机名Folia 走 HTTPS 时它也要是 HTTPS否则浏览器会拦截混合内容。配置生效后PWA 首页就是这样的私有曲库视图️ 出问题先查这张表从第一行往下对照现象可能原因处理动作浏览器里找不到添加到主屏幕地址是 HTTP非安全上下文或没使用 Chrome / Safari确认地址栏是 HTTPS换 Chrome安卓或 SafariiOS重新加载页面再试服务端更新了手机还是旧版本Service Worker网页的离线缓存与更新代理采用autoUpdate策略更新在下一次冷启动才生效完全关闭后重新打开一次长期不更新则清除站点数据卸载图标后重新添加HTTPS 下封面不缓存、选不了音频输出设备证书链不完整未构成可信安全上下文OPFS浏览器本地文件存储与设备枚举被降级用浏览器查看证书详情确认链完整自签名证书不算数换可信证书后重启 PWA填了 Navidrome 三项变量手机端没自动登录NAVIDROME_URL手机访问不到或混合内容被拦截或该浏览器曾手动关过 Navidrome 开关用同一网络的手机直接打开NAVIDROME_URL验证连通性在 Folia 设置里手动打开 Navidrome 开关部署加安装总共 3 分钟手机主屏幕上就多了一台全屏歌词动画播放器在线搜索、Navidrome 曲库、离线秒开都在这个图标里。部署细节与 QQ 音乐等音源配置回看 deploy/docker/README.md 和 docs/technical.md。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/21 10:52:58 · 阅读 1.2k Folia 歌词动画播放器装进手机主屏幕：3 分钟 PWA 免 App 安装指南
Folia 歌词动画播放器装进手机主屏幕3 分钟 PWA 免 App 安装指南【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款主打歌词动画效果的播放器支持本地音乐、Navidrome 和多平台在线音乐没有官方手机 App但 Web 版原生支持 PWA渐进式 Web 应用指能像 App 一样装进主屏幕、全屏独立运行的网页应用。照这份 PWA 安装指南操作约 3 分钟完成部署加安装手机主屏幕上就多了一个独立图标的全屏歌词动画播放器。 适合谁不适合谁先说清楚手机端能干什么、不能干什么免得白折腾能做在线搜索网易云、QQ、酷狗的歌曲登录态存在手机浏览器里不用反复登录竖屏看全屏歌词动画各主题随窗口尺寸响应式重排接 Navidrome 听 NAS 上的私有曲库核心资源有离线缓存弱网下打开明显快于普通网页。不能做在手机上导入本地音乐文件。目录导入依赖桌面浏览器的 File System Access API文件选择接口手机浏览器没有这个能力。手机想听自己的歌走 Navidrome 路线即可见后文进阶部分。 先选路线再动手PWA 本质是带安装入口的网页所以第一件事是把 Web 版部署到手机够得到的地方。三条路线对号入座路线适合谁成本一键托管Vercel / Cloudflare新手、没有服务器的人平台自带 HTTPS 和域名低几分钟出结果Docker 全栈有 NAS 或自建服务器的用户一套 compose 拉起前端网关、音乐接口和 Sync Server中需再配一层反向代理拿证书克隆仓库自行部署想完全自定义构建和变量的人最高推荐一键托管。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 地址点右上角 ⋮ 菜单选添加到主屏幕确认名称显示为 Folia点添加iPhone 走这里Safari 装到主屏幕用 Safari 打开 Folia 地址。页面需带apple-mobile-web-app-capable等元标签index.html 已全部配好步骤点底部 ⬆️ 分享按钮上滑找到添加到主屏幕确认名称与图标点添加连接网易云后手机上看到的曲库首页长这样✅ 装完怎么确认它真的好了两个现象都能对上才算装成功图标点开是全屏独立窗口。返回桌面点 Folia 图标页面以全屏窗口启动没有地址栏状态栏与界面颜色融为一体——这是 manifest 里standalone模式生效的表现也是判断装成功的直接证据。歌词动画跑得顺。播放任意带歌词的歌曲看全屏歌词动画cappella群唱主题把歌词排成左右交替的对话气泡像一场合唱推进竖屏窄屏下依然好读pendolo主题是机械齿轮与星空轨道主歌词横排在一侧副歌高亮逐字亮起。动画帧率正常、无掉帧说明 Service Worker 缓存与渲染都在正常工作 让私有曲库跑起来Navidrome 三步想让自己的歌出现在 PWA 里用 Navidrome 做中间层在 NAS 上用 Docker 部署 Navidrome挂载音乐目录在 Folia 的.env中填入NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项手机新打开浏览器自动登录并启用 Navidrome无需在手机上手动填账号注意NAVIDROME_URL必须写各设备都能访问到的地址不能是 Docker 内部主机名Folia 走 HTTPS 时它也要是 HTTPS否则浏览器会拦截混合内容。配置生效后PWA 首页就是这样的私有曲库视图️ 出问题先查这张表从第一行往下对照现象可能原因处理动作浏览器里找不到添加到主屏幕地址是 HTTP非安全上下文或没使用 Chrome / Safari确认地址栏是 HTTPS换 Chrome安卓或 SafariiOS重新加载页面再试服务端更新了手机还是旧版本Service Worker网页的离线缓存与更新代理采用autoUpdate策略更新在下一次冷启动才生效完全关闭后重新打开一次长期不更新则清除站点数据卸载图标后重新添加HTTPS 下封面不缓存、选不了音频输出设备证书链不完整未构成可信安全上下文OPFS浏览器本地文件存储与设备枚举被降级用浏览器查看证书详情确认链完整自签名证书不算数换可信证书后重启 PWA填了 Navidrome 三项变量手机端没自动登录NAVIDROME_URL手机访问不到或混合内容被拦截或该浏览器曾手动关过 Navidrome 开关用同一网络的手机直接打开NAVIDROME_URL验证连通性在 Folia 设置里手动打开 Navidrome 开关部署加安装总共 3 分钟手机主屏幕上就多了一台全屏歌词动画播放器在线搜索、Navidrome 曲库、离线秒开都在这个图标里。部署细节与 QQ 音乐等音源配置回看 deploy/docker/README.md 和 docs/technical.md。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考