Folia PWA 安装快速指南把全屏歌词动画播放器装进手机主屏幕【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是支持在线音乐与 Navidrome 的全屏歌词动画播放器Web 版内置 PWA 能力。把部署、安装、验证三件事做完约 10 分钟后 Folia 会以独立图标出现在手机主屏幕点开即全屏听歌。 Folia PWA 能覆盖什么边界在哪装好后能覆盖的日常场景通勤路上搜索并播放网易云、QQ、酷狗的在线歌曲登录态留在手机浏览器不用反复登录竖屏看全屏歌词动画主题排版随窄屏自动重排不需要旋转手机接入 Navidrome 后在手机上播 NAS 曲库封面与歌词照常驱动核心资源走离线缓存弱网下二次打开比网页快做不到的三件事不能导入本地音乐文件因为目录导入依赖 File System Access API手机浏览器没有该能力手机听自己的歌只能走 Navidrome非 HTTPS 部署下不能切换音频输出设备因为设备枚举只在安全上下文开放没有模组系统与壁纸模式因为两者依赖 Electron 桌面运行时 PWA 安装前置检查一台能上网的手机安卓用 Chrome、iPhone 用 Safari自查方式浏览器打开任意网站 → 能正常加载一个手机能到达的 Folia Web 地址托管平台域名或局域网 IP 端口自查方式手机浏览器打开该地址 → 出现启动画面与曲库首页地址必须是 HTTPS自查方式查看地址栏 → 出现锁形标识前缀不是http://走 Docker 路线需要 Docker Engine24与 Compose v2自查方式终端执行docker version→ 输出版本号局域网部署时手机与 Folia 在同一网络自查方式手机浏览器打开该地址 → 页面可达️ Folia Web 部署路线对比路线适合谁代价一键托管Vercel / Cloudflare没有服务器、要最快出结果的人一个平台账号 补环境变量零运维Docker Compose 全栈有 NAS 或自建服务器、要同步服务的人填环境变量模板 配反向代理拿证书克隆仓库自行构建要自定义构建与变量的人需 Node.js24构建部署全自理推荐一键托管PWA 的安装入口与离线缓存都依赖 HTTPS 安全上下文托管平台白送域名与证书新手阻力最小。️ Folia PWA 安装步骤让地址在手机上能打开托管路线用一键部署入口创建项目部署完成后在项目设置里补齐环境变量最少填VITE_NETEASE_API_BASEAI 变量可留空细节见 docs/technical.mdDocker 路线把deploy/docker/compose.yaml与.env.example改名为.env放入同一目录生成随机串填入SYNC_TOKEN必填至少 8 位然后启动全栈openssl rand -hex 32 # 随机串填入 SYNC_TOKEN docker compose up -d --wait为什么PWA 的 manifest 与 Service Worker 只在 HTTPS 安全上下文注册托管平台域名自带证书装完就有安装入口。如何确认手机浏览器打开地址出现 Folia 启动画面与曲库首页地址栏带锁形标识、无证书报错。注意Docker 默认入口端口18080是普通 HTTP手机上找不到安装入口因为浏览器只在 HTTPS 下允许 Service Worker 注册先给反向代理挂可信证书、把域名指到127.0.0.1:18080细节见 deploy/docker/README.md。把图标装进安卓主屏幕Chrome 打开 Folia 地址点右上角 ⋮ 菜单选添加到主屏幕确认名称为 Folia为什么manifest 声明standalone显示模式系统按独立应用而非浏览器标签页运行它。如何确认桌面出现 Folia 图标点开后是无地址栏的全屏窗口状态栏颜色与界面融为一体。把图标装进 iPhone 主屏幕Safari 打开该地址点底部 ⬆️ 分享按钮选添加到主屏幕确认名称与图标为什么index.html已配好apple-mobile-web-app-capable等元标签Safari 添加后按全屏 Web App 运行。如何确认桌面出现图标点开为全屏窗口与安卓表现一致。注意服务端更新后手机可能仍是旧版因为 Service Worker 采用autoUpdate策略、新版本在下一次冷启动才生效完全关闭应用重开一次长期未更新则清除站点数据并重装图标。 PWA 安装效果实拍cappella群唱主题把歌词排成左右交替的气泡窄屏下依然可读证明歌词动画排版是响应式跟随窗口尺寸重排的。首页专辑卡片来自 Navidrome 服务证明私有曲库接入后手机端的封面与元数据加载正常。⚙️ 进阶把 NAS 私有曲库接给手机在 NAS 上用 Docker 部署 Navidrome 并挂载音乐目录在.env填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORDNAVIDROME_URL写手机能直达的地址改完执行docker compose up -d --force-recreate backend手机新开浏览器会自动登录并启用 NavidromeFolia 走 HTTPS 时NAVIDROME_URL也必须是 HTTPS否则混合内容被拦截NAVIDROME_PRESET_ALLOW默认只对局域网放行 PWA 安装排错速查现象原因动作找不到添加到主屏幕地址是 HTTP 非安全上下文或不是 Chrome / Safari确认地址栏是 HTTPS换对应浏览器重新加载页面再试服务端更新后手机仍是旧版autoUpdate策略Service Worker 更新在下次冷启动生效完全关闭应用重开长期未更新则清除站点数据、删除图标重新添加HTTPS 下封面不缓存、选不了音频设备证书链不完整安全上下文被降级浏览器查看证书详情确认链完整自签名不算换可信证书后重启应用填了 Navidrome 三项变量手机不自动登录NAVIDROME_URL手机访问不到或被混合内容拦截或该浏览器手动关过开关用手机直接打开该 URL 验证连通性再到设置里手动打开 Navidrome 开关变量补齐、图标挂上这台 PWA 就能日常用了音源接入与 HTTPS 配置细节见 docs/technical.md 与 deploy/docker/README.md。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考