Folia 手机 PWA 安装指南：四步把歌词动画播放器装进手机

Folia 手机 PWA 安装指南四步把歌词动画播放器装进手机【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一个主打歌词动画的本地音乐 / Navidrome / 在线多平台播放器。这篇教程带你走完整条 Folia 手机 PWA 安装路径选部署路线、拿到地址、装进主屏幕再连上自己的曲库。装好长什么样安装完成后主屏幕多一个 Folia 图标点开的窗口没有地址栏、没有标签页状态栏和应用融为一体观感跟原生 App 没区别。界面布局还会随窗口尺寸响应式重排竖着拿手机时歌词自动重新排布动画效果不打折。一键拿到能访问的地址PWA可安装成 App 的网页本质还是网页前提是手机先连得上它。三条路线按自己的情况挑路线适合谁能拿到什么免费托管一键部署没有服务器想几分钟上线自带 HTTPS 的地址全程不用自己的服务器用平台内置 QQ 音乐接口时VITE_QQ_API_BASE填/api/qq即可细节见 docs/qq-music-deployment.mdNAS 上 Docker有 NAS想自己掌控空目录里放好compose.yaml与.env模板填SYNC_TOKENopenssl rand -hex 32生成跑docker compose up -d --wait默认访问http://NAS-IP:18080流程见 deploy/docker/README.md克隆仓库自建域名与密钥全想自己掌控git clone https://gitcode.com/GitHub_Trending/fo/folia-major按 docs/technical.md 的环境变量说明部署到任意支持 Node.js 的平台地址务必是 HTTPS这不是走过场。局域网 IP 上的普通 HTTP 不属于浏览器安全上下文Service Worker浏览器里的离线缓存与后台更新机制装不牢PWA 安装入口和离线能力都会降级。解决办法是让 NAS 自带反向代理加一张受信任证书把 HTTPS 终止掉现成代理配置示例在 deploy/docker/README.md 的HTTPS 与浏览器安全上下文一节。Folia 添加到主屏幕安卓 Chrome 四步安装用 Chrome 打开 Folia 网页点右上角菜单⋮选安装应用或添加到主屏幕确认名称是 Folia点添加Folia 添加到主屏幕iPhone Safari用 Safari 打开 Folia 网页点底部分享按钮上滑找到添加到主屏幕确认名称点添加双端装完表现一致是有技术原因的manifest 声明了standalone独立窗口模式index.html 也内置了apple-mobile-web-app-capable等元标签安卓和 iPhone 都不需要额外配置。Folia 连接 Navidrome播放自己的歌曲库走 Navidrome一个自托管的音乐库服务接入三步在 NAS 上用 Docker 部署 Navidrome挂载你的音乐目录在 Folia 的账户设置里填入 Navidrome 地址与账号Folia 拉取曲库、封面与歌词歌词动画照常驱动走 Docker 全栈部署的话.env里再补NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项之后新打开的浏览器会自动登录这个 Navidrome手机不用单独输账号改完执行docker compose up -d --force-recreate backend生效规则细节看 deploy/docker/README.md 的Navidrome 预置账号一节。这里提前说清一个边界手机浏览器导入不了本地音频文件。本地目录导入依赖 File System Access API目前只有桌面端 Chromium 系浏览器支持HTTPS 也补不齐这块短板。所以手机端的自己的歌直接走 Navidrome 路线音乐文件留在 NAS手机通过 PWA 远程访问省流量也省空间歌词还能智能匹配自动补齐。出问题先自查现象先查什么怎么办找不到安装应用 / 添加到主屏幕入口地址是不是 HTTPS浏览器是不是 Chrome / Safari换成对应浏览器安装提示有时只在首次访问出现重新加载页面再找菜单服务端已更新手机上还是旧版PWA 用autoUpdate策略缓存异常会卡旧版正常打开一次等它生效长时间不更新就清除该站点数据或删掉 PWA 重新添加找不到导入手机音频文件的入口本地导入依赖 File System Access API手机浏览器不支持别在这条路上硬耗手机端的自己的歌走 Navidrome 方案地铁、弱网环境能不能用核心界面已预缓存可离线启动音乐流必须联网弱网下可快速打开、看歌词动画听歌需等网络恢复挑一条部署路线把 Folia 上线再把地址加到主屏幕——手机上那个新图标就是你的歌词动画播放器。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考