Folia PWA 安装指南：3 步把歌词动画播放器搬上手机

Folia PWA 安装指南3 步把歌词动画播放器搬上手机【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款支持网易云、QQ、酷狗、Navidrome 的歌词动画播放器。它的 Web 版内置 PWA手机浏览器里添加到主屏幕就有独立图标和全屏窗口。部署加安装全程约 10 分钟。 路线选择拿到手机可访问地址的 3 种方式PWA 本质是带安装入口的网页前提是先把 Web 版放到手机能访问的地址。三条路线各有分工方式适合谁前置条件耗时一键托管新手、无服务器平台账号HTTPS 自带5~10 分钟Docker 全栈NAS / 自建用户Docker 24、反向代理15~30 分钟克隆仓库自建想完全自定义Node.js 24、会配环境变量30 分钟起一句话推荐一键托管平台直接给域名和 HTTPS你只需补齐变量。Docker 路线把 compose 文件拷下来填好 SYNC_TOKEN再执行docker compose up -d。默认在 18080 端口提供访问。自建路线则先克隆仓库填好 VITE_NETEASE_API_BASE 等变量再构建。克隆命令是git clone https://gitcode.com/GitHub_Trending/fo/folia-major。变量全表见 docs/technical.md。对手机端来说路线只影响地址从哪来后面的体验完全一致。✅ 动手前检查安装 Folia PWA 前确认的 3 件事Folia 手机安装的流程不长但有三个容易翻车的点。动手前先确认。地址必须是 HTTPS。安装入口、离线缓存、音频设备枚举都依赖安全上下文。用系统自带浏览器。安卓走 ChromeiPhone 走 Safari其他浏览器常不显示安装入口。地址对手机可达。NAS 自部署时确认手机与 NAS 同局域网或已暴露公网地址。地址栏不是 HTTPS 时添加到主屏幕入口可能不出现装上也跑不了离线。托管平台自带 HTTPS 最省心自部署要给 NAS 配反向代理和可信证书。这三项是安装的地基。缺一项后面都会卡住。 安装步骤安卓与 iPhone 添加到主屏幕地址打开后两个系统各走 5 步。安卓Chrome 添加到主屏幕Chrome 打开 Folia 地址点右上角三点菜单选添加到主屏幕确认名称与图标点添加完成iPhoneSafari 添加到主屏幕Safari 打开 Folia 地址点底部分享按钮上滑选添加到主屏幕确认名称与图标点添加完成装好后点图标会以独立全屏窗口启动没有浏览器地址栏。顺手说下确认弹窗里的名称与图标可以改默认就是 Folia。路线不同终点一致主屏幕一个图标全屏一个播放器。 效果呈现Folia PWA 在手机上长什么样连上网易云后曲库首页是下面这样。卡片网格会按竖屏自动重排。招牌是全屏歌词动画。每个主题都有独立排版且随窗口尺寸响应式重排。竖着拿手机歌词布局自动调整动画照旧。pendolo 时计是机械齿轮风cappella 群唱是左右对话气泡lumi 流光在 OLED 屏上尤其好看。部署时配了密钥的话配色还能由 AI 按歌曲情绪自动生成。作为对照本地曲库视图只有桌面版有。目录导入依赖 File System Access API手机浏览器不具备这项能力细节见 docs/local-library-management.md。一句话手机上拿的是在线曲库 歌词动画唯一缺的就是目录导入。能力在 Folia PWA 手机端的结论在线搜索与播放✅ 支持全屏歌词动画✅ 支持自动竖排重排Navidrome 私有曲库✅ 支持导入本地音乐文件❌ 仅桌面端 进阶玩法接入 Navidrome 用手机听自己的歌想听自己存的音乐最顺的路是 Navidrome。文件放 NAS手机走网络流播放省空间也省流量。前置条件有 Docker 的 NAS音乐文件已就位。NAS 上部署 Navidrome挂载音乐目录在 .env 填入 NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD 三项重建 backend 容器新打开的浏览器自动登录曲库照常加载接好后首页变成私有曲库视图注意预置只对新打开的浏览器生效。以前手动关过开关的要到设置里自己打开。Folia 走 HTTPS 时NAVIDROME_URL 也要是 HTTPS。否则浏览器拦截混合内容曲库加载不出来。预置账号的完整说明在 deploy/docker/README.md 的Navidrome 预置账号一节。这一步做完手机就成了随身私有曲库播放器。 排障用户最常问的 4 个问题Q我按步骤走了手机上没有添加到主屏幕去哪找先确认地址栏是 HTTPS安卓用 Chrome、iPhone 用 Safari。安装提示有时只在首次访问出现重新加载一次再试。Q部署了新版本手机里还是旧界面是不是翻车了离线缓存由 Service Worker 管理更新在下次冷启动生效。久不更新就清一次站点数据或者卸载图标重新添加。Q手机能导入自己的音乐文件吗电脑上明明可以。不能。目录导入依赖 File System Access API只有桌面 Chromium 系有。手机想听自己的歌走 Navidrome 方案。Q自部署后封面不缓存、输出设备也选不了HTTP 不是安全上下文Service Worker 与 OPFS 缓存都会降级。给 NAS 配好反向代理和可信证书再重启 PWA 即可。翻车时九成是安全上下文的问题先看地址栏。✅ 速查3 分钟回顾安装 Folia PWA步骤操作耗时1部署 Folia Web 版约 5 分钟2手机浏览器打开地址10 秒3菜单/分享添加到主屏幕1 分钟4点图标进入全屏即时一台手机一台随身歌词动画播放器在线搜索、Navidrome 私有曲库、全屏歌词动画都装进 Folia PWA 的窗口里。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考