Folia 手机 PWA 实操部署、安装与曲库接入全流程【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major手机没有官方 App但 Web 版能直接装成 Folia PWA登录态留在手机浏览器里。这篇讲清怎么选部署路径、怎么装进主屏幕、歌从哪来。先判断自己属于哪类人再挑路手里没服务器的走免费托管家里有 NAS 的起 Docker想域名密钥全握在手的就克隆仓库自建。三条路最后都给你一个能访问的地址差别只在运维成本。没有服务器的人用 Vercel 一键托管仓库自带一键部署入口Vercel 或 Cloudflare几分钟拿到自带 HTTPS 的地址全程不碰服务器。若走平台内置的 QQ 音乐接口VITE_QQ_API_BASE填/api/qq即可配置细节在 docs/qq-music-deployment.md。有 NAS 的人Docker 方式部署 Folia把deploy/docker/compose.yaml与环境变量模板丢进一个空目录在.env里填SYNC_TOKEN用openssl rand -hex 32生成执行docker compose up -d启动默认访问http://NAS-IP:18080。要留意这是局域网 HTTP不属于浏览器安全上下文Service Worker浏览器里的离线缓存与后台更新机制装不牢PWA 安装和离线能力都会降级。想要完整体验用 NAS 反向代理加一张受信任证书把它升级成 HTTPS现成配置示例在 deploy/docker/README.md 的HTTPS 与浏览器安全上下文一节。想完全自控的人克隆仓库自建执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major按 docs/technical.md 的环境变量说明部署到任意支持 Node.js 的平台域名与密钥全部自己掌控。 把 Folia 加到手机主屏幕安卓与 iPhone用浏览器打开 Folia 地址安卓用 ChromeiPhone 用 Safari。安卓点右上角菜单⋮选安装应用或添加到主屏幕iPhone 点底部分享按钮上滑找到添加到主屏幕。确认名称显示为 Folia点添加。装完主屏幕会多出一个 Folia 图标点开的窗口没有地址栏也没有标签页。原因是 manifest应用清单声明窗口外观与启动方式里写了standalone独立窗口模式index.html又内置了apple-mobile-web-app-capable等元标签所以 iPhone 和安卓看起来一致状态栏和应用融成一体。 手机接自己的歌Navidrome 方案如果你有自己的本地音乐先说清一个边界手机浏览器导入不了本地音频文件本地目录导入依赖 File System Access API浏览器直接读写本地磁盘的能力目前只有桌面端 Chromium 系浏览器支持HTTPS 也补不齐这块短板。所以别在手机上折腾导入自己的歌走 Navidrome一个自托管的音乐库服务在 NAS 上用 Docker 起 Navidrome 并挂载音乐目录再到 Folia 账户设置里填 Navidrome 地址与账号它就拉取曲库、封面与歌词歌词动画照常驱动。走 Docker 全栈的话在.env里再填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项新浏览器自动登录、手机不用单独输账号改完执行docker compose up -d --force-recreate backend生效规则细节见 deploy/docker/README.md 的Navidrome 预置账号。装在手机上之后竖着拿手机时歌词会按窗口尺寸响应式重排布局自动重新排布动画效果不打折。群唱主题把歌词排成对话气泡深色背景下读起来像一段群聊。部署时配了 AI 密钥的话AI 会按歌曲情绪与歌词自动生成整组配色手机端同样可用。核心界面资源由 Service Worker 预缓存首次加载完成后启动就不依赖实时网络地铁里也能快速打开、看歌词动画音乐流本身必须联网拉取听歌要等网络恢复。出问题先看这里找不到安装应用 / 添加到主屏幕入口 → 多半是地址不是 HTTPS 或浏览器不对 → 换成 Chrome 或 Safari 重新加载安装提示有时只在首次访问出现。服务端已更新、手机还是旧版 → PWA 走autoUpdate策略缓存异常会卡在旧版 → 正常打开一次等它生效长时间不更新就清除该站点数据或删掉 PWA 重新添加。地铁弱网环境能不能用 → 核心界面已预缓存、音乐流必须联网 → 弱网下可快速打开、看歌词动画听歌需等网络恢复。把地址丢到主屏幕那个新图标就是你的歌词动画播放器。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/4 11:18:24 · 阅读 1.2k Folia 手机 PWA 实操：部署、安装与曲库接入全流程
Folia 手机 PWA 实操部署、安装与曲库接入全流程【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major手机没有官方 App但 Web 版能直接装成 Folia PWA登录态留在手机浏览器里。这篇讲清怎么选部署路径、怎么装进主屏幕、歌从哪来。先判断自己属于哪类人再挑路手里没服务器的走免费托管家里有 NAS 的起 Docker想域名密钥全握在手的就克隆仓库自建。三条路最后都给你一个能访问的地址差别只在运维成本。没有服务器的人用 Vercel 一键托管仓库自带一键部署入口Vercel 或 Cloudflare几分钟拿到自带 HTTPS 的地址全程不碰服务器。若走平台内置的 QQ 音乐接口VITE_QQ_API_BASE填/api/qq即可配置细节在 docs/qq-music-deployment.md。有 NAS 的人Docker 方式部署 Folia把deploy/docker/compose.yaml与环境变量模板丢进一个空目录在.env里填SYNC_TOKEN用openssl rand -hex 32生成执行docker compose up -d启动默认访问http://NAS-IP:18080。要留意这是局域网 HTTP不属于浏览器安全上下文Service Worker浏览器里的离线缓存与后台更新机制装不牢PWA 安装和离线能力都会降级。想要完整体验用 NAS 反向代理加一张受信任证书把它升级成 HTTPS现成配置示例在 deploy/docker/README.md 的HTTPS 与浏览器安全上下文一节。想完全自控的人克隆仓库自建执行git clone https://gitcode.com/GitHub_Trending/fo/folia-major按 docs/technical.md 的环境变量说明部署到任意支持 Node.js 的平台域名与密钥全部自己掌控。 把 Folia 加到手机主屏幕安卓与 iPhone用浏览器打开 Folia 地址安卓用 ChromeiPhone 用 Safari。安卓点右上角菜单⋮选安装应用或添加到主屏幕iPhone 点底部分享按钮上滑找到添加到主屏幕。确认名称显示为 Folia点添加。装完主屏幕会多出一个 Folia 图标点开的窗口没有地址栏也没有标签页。原因是 manifest应用清单声明窗口外观与启动方式里写了standalone独立窗口模式index.html又内置了apple-mobile-web-app-capable等元标签所以 iPhone 和安卓看起来一致状态栏和应用融成一体。 手机接自己的歌Navidrome 方案如果你有自己的本地音乐先说清一个边界手机浏览器导入不了本地音频文件本地目录导入依赖 File System Access API浏览器直接读写本地磁盘的能力目前只有桌面端 Chromium 系浏览器支持HTTPS 也补不齐这块短板。所以别在手机上折腾导入自己的歌走 Navidrome一个自托管的音乐库服务在 NAS 上用 Docker 起 Navidrome 并挂载音乐目录再到 Folia 账户设置里填 Navidrome 地址与账号它就拉取曲库、封面与歌词歌词动画照常驱动。走 Docker 全栈的话在.env里再填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项新浏览器自动登录、手机不用单独输账号改完执行docker compose up -d --force-recreate backend生效规则细节见 deploy/docker/README.md 的Navidrome 预置账号。装在手机上之后竖着拿手机时歌词会按窗口尺寸响应式重排布局自动重新排布动画效果不打折。群唱主题把歌词排成对话气泡深色背景下读起来像一段群聊。部署时配了 AI 密钥的话AI 会按歌曲情绪与歌词自动生成整组配色手机端同样可用。核心界面资源由 Service Worker 预缓存首次加载完成后启动就不依赖实时网络地铁里也能快速打开、看歌词动画音乐流本身必须联网拉取听歌要等网络恢复。出问题先看这里找不到安装应用 / 添加到主屏幕入口 → 多半是地址不是 HTTPS 或浏览器不对 → 换成 Chrome 或 Safari 重新加载安装提示有时只在首次访问出现。服务端已更新、手机还是旧版 → PWA 走autoUpdate策略缓存异常会卡在旧版 → 正常打开一次等它生效长时间不更新就清除该站点数据或删掉 PWA 重新添加。地铁弱网环境能不能用 → 核心界面已预缓存、音乐流必须联网 → 弱网下可快速打开、看歌词动画听歌需等网络恢复。把地址丢到主屏幕那个新图标就是你的歌词动画播放器。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考