企业官网建设流程全解析

Folia PWA 安装快速指南：把全屏歌词动画播放器装进手机主屏幕

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major

Folia 是支持在线音乐与 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 部署路线对比

推荐一键托管：PWA 的安装入口与离线缓存都依赖 HTTPS 安全上下文，托管平台白送域名与证书，新手阻力最小。

🛠️ Folia PWA 安装步骤

让地址在手机上能打开

1. 托管路线：用一键部署入口创建项目，部署完成后在项目设置里补齐环境变量，最少填VITE_NETEASE_API_BASE，AI 变量可留空（细节见 docs/technical.md）
2. Docker 路线：把deploy/docker/compose.yaml与.env.example（改名为.env）放入同一目录
3. 生成随机串填入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。

把图标装进安卓主屏幕

1. Chrome 打开 Folia 地址
2. 点右上角 ⋮ 菜单
3. 选"添加到主屏幕"，确认名称为 Folia

为什么：manifest 声明standalone显示模式，系统按独立应用而非浏览器标签页运行它。

如何确认：桌面出现 Folia 图标，点开后是无地址栏的全屏窗口，状态栏颜色与界面融为一体。

把图标装进 iPhone 主屏幕

1. Safari 打开该地址
2. 点底部 ⬆️ 分享按钮
3. 选"添加到主屏幕"，确认名称与图标

为什么：index.html已配好apple-mobile-web-app-capable等元标签，Safari 添加后按全屏 Web App 运行。

如何确认：桌面出现图标，点开为全屏窗口，与安卓表现一致。

注意：服务端更新后手机可能仍是旧版，因为 Service Worker 采用autoUpdate策略、新版本在下一次冷启动才生效；完全关闭应用重开一次，长期未更新则清除站点数据并重装图标。

📷 PWA 安装效果实拍

"cappella"群唱主题把歌词排成左右交替的气泡，窄屏下依然可读，证明歌词动画排版是响应式跟随窗口尺寸重排的。

首页专辑卡片来自 Navidrome 服务，证明私有曲库接入后，手机端的封面与元数据加载正常。

⚙️ 进阶：把 NAS 私有曲库接给手机

1. 在 NAS 上用 Docker 部署 Navidrome 并挂载音乐目录
2. 在.env填NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD，NAVIDROME_URL写手机能直达的地址
3. 改完执行docker compose up -d --force-recreate backend，手机新开浏览器会自动登录并启用 Navidrome
4. Folia 走 HTTPS 时NAVIDROME_URL也必须是 HTTPS，否则混合内容被拦截；NAVIDROME_PRESET_ALLOW默认只对局域网放行

🩺 PWA 安装排错速查

变量补齐、图标挂上，这台 PWA 就能日常用了；音源接入与 HTTPS 配置细节，见 docs/technical.md 与 deploy/docker/README.md。

【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major