Folia PWA 手机安装完整指南把动态歌词播放器装进主屏幕【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款以动态歌词动画见长的本地与多平台在线音乐播放器。装成 PWA 后手机主屏幕会多一个独立播放器图标点开即播歌源还能指向自己 NAS 上的曲库。这篇把部署、安装、接歌源一次讲清。一、先说清你能拿到什么在动手之前先看看装完之后你手里多了什么一个没有地址栏的独立入口manifest 里声明了standalone独立窗口模式index.html也内置了apple-mobile-web-app-capable等元标签所以 iPhone 和安卓装出来的体验一致——图标在桌面点开没有浏览器壳状态栏和播放器融为一体。登录态留在手机里登录信息保存在你手机浏览器自己的存储里不需要额外同步账号。歌源可以指回自己的机器配合 Navidrome曲库、封面、歌词都从你的 NAS 来。离线也能秒开核心界面被 Service Worker浏览器里的离线缓存机制预缓存弱网下界面照样起来。下面一步步来。二、你在哪种情况就走哪条路PWA 本质是可安装的网页所以第一步不是装 App而是先给 Folia 一个手机能访问到的地址。先对号入座看你是哪种没有服务器、不想管运维托管平台一键部署仓库自带一键部署入口Vercel 或 Cloudflare几分钟就有一个自带 HTTPS 的地址全程不用碰服务器。如果你要用平台内置的 QQ 音乐接口把VITE_QQ_API_BASE填成/api/qq即可配置细节见 docs/qq-music-deployment.md。家里有 NASDocker 全栈部署把 deploy/docker/compose.yaml 和环境变量模板放进一个空目录在.env里填SYNC_TOKEN用openssl rand -hex 32生成一串随机值然后执行docker compose up -d默认访问地址是http://NAS-IP:18080。想域名和密钥都自己攥着克隆仓库自建git clone https://gitcode.com/GitHub_Trending/fo/folia-major再按 docs/technical.md 里的环境变量说明部署到任意支持 Node.js 的平台。三种路径都要注意一件事HTTPS 是 PWA 装得牢的前提。http://NAS-IP:18080这种局域网 HTTP 地址不属于浏览器的安全上下文Service Worker 注册不稳安装和离线能力都会打折——就像没锁门的仓库东西随时可能丢。想让手机拿到完整体验用 NAS 自带的反向代理加一张受信任证书把它升级成 HTTPSdeploy/docker/README.md 的HTTPS 与浏览器安全上下文一节有现成的代理配置示例。三、把网页变成应用地址就绪后用手机浏览器打开它剩下的动作其实很少。安卓 Chrome从菜单里安装应用关键动作就三个用 Chrome 打开 Folia 网页点右上角的 ⋮ 菜单在菜单里选安装应用或添加到主屏幕确认名称是 Folia 后点添加。注意安装提示有时只在首次访问出现找不到就刷新一下页面再看。iPhone从 Safari 的分享面板里添加同样三个动作用 Safari 打开网页点底部分享按钮在弹出的面板里上滑找到添加到主屏幕确认名称后点添加。装完之后主屏幕会出现 Folia 图标。点开的窗口没有地址栏、没有标签页状态栏和应用融为一体——因为standalone模式已经在 manifest 里声明好了iPhone 和安卓的表现是一致的。四、让歌从你自己的机器来想听自己的歌歌源走 Navidrome一个自托管的音乐库服务可以理解成你 NAS 里的中央厨房手机是分店菜从厨房来。接入只要三步在 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手机远程访问省流量也省空间歌词还能智能匹配自动补齐。五、打开后有什么不同Folia 的招牌是多种风格的全屏歌词动画主题。每种主题都有独立排版和可调参数并且会随窗口尺寸响应式重排——竖着拿手机时歌词布局会自动重新排布动画效果不打折。群唱主题把歌词排成对话气泡深色背景下读起来像一段群聊主题配色也不必全靠手动。部署时如果配置了 AI 密钥环境变量说明见 docs/technical.mdAI 会按歌曲情绪与歌词内容自动生成整组配色手机上同样可用离线能力也值得单独说。可以把 Service Worker 理解成门店的备货间第一次访问是进货核心界面资源被预缓存后之后启动就不依赖实时网络——地铁里也能快速打开、看歌词动画。要分清的是音乐流本身必须联网拉取就像直播节目断了网就播不了听歌要等网络恢复。六、卡住了先看这几处排障不用满世界找原因先问自己下面四个问题服务端已经更新了为什么手机上还是旧版PWA 用的是autoUpdate策略浏览器会在后台悄悄比对版本缓存异常时就会卡在旧版。先正常打开一次等它生效如果长时间不更新就清除该站点的数据或者删掉 PWA 重新添加。为什么找不到安装应用 / 添加到主屏幕入口先查两件事地址是不是 HTTPS浏览器是不是 Chrome / Safari。换成对应浏览器后重新加载页面再找菜单安装提示有时只在首次访问出现。为什么手机上找不到导入音频文件的入口这是能力边界不是 bug本地导入依赖的 File System Access API 手机浏览器没有。手机端自己的歌请直接走 Navidrome 方案别硬耗。地铁、弱网环境下能不能用核心界面已预缓存可以离线启动音乐流必须联网。所以弱网下你能快速打开、看歌词动画真正听歌要等网络恢复。挑一条部署路径把 Folia 上线再把图标加到主屏幕——下次想听歌你只需要点一下那个图标。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/5 4:26:20 · 阅读 1.2k Folia PWA 手机安装完整指南：把动态歌词播放器装进主屏幕
Folia PWA 手机安装完整指南把动态歌词播放器装进主屏幕【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是一款以动态歌词动画见长的本地与多平台在线音乐播放器。装成 PWA 后手机主屏幕会多一个独立播放器图标点开即播歌源还能指向自己 NAS 上的曲库。这篇把部署、安装、接歌源一次讲清。一、先说清你能拿到什么在动手之前先看看装完之后你手里多了什么一个没有地址栏的独立入口manifest 里声明了standalone独立窗口模式index.html也内置了apple-mobile-web-app-capable等元标签所以 iPhone 和安卓装出来的体验一致——图标在桌面点开没有浏览器壳状态栏和播放器融为一体。登录态留在手机里登录信息保存在你手机浏览器自己的存储里不需要额外同步账号。歌源可以指回自己的机器配合 Navidrome曲库、封面、歌词都从你的 NAS 来。离线也能秒开核心界面被 Service Worker浏览器里的离线缓存机制预缓存弱网下界面照样起来。下面一步步来。二、你在哪种情况就走哪条路PWA 本质是可安装的网页所以第一步不是装 App而是先给 Folia 一个手机能访问到的地址。先对号入座看你是哪种没有服务器、不想管运维托管平台一键部署仓库自带一键部署入口Vercel 或 Cloudflare几分钟就有一个自带 HTTPS 的地址全程不用碰服务器。如果你要用平台内置的 QQ 音乐接口把VITE_QQ_API_BASE填成/api/qq即可配置细节见 docs/qq-music-deployment.md。家里有 NASDocker 全栈部署把 deploy/docker/compose.yaml 和环境变量模板放进一个空目录在.env里填SYNC_TOKEN用openssl rand -hex 32生成一串随机值然后执行docker compose up -d默认访问地址是http://NAS-IP:18080。想域名和密钥都自己攥着克隆仓库自建git clone https://gitcode.com/GitHub_Trending/fo/folia-major再按 docs/technical.md 里的环境变量说明部署到任意支持 Node.js 的平台。三种路径都要注意一件事HTTPS 是 PWA 装得牢的前提。http://NAS-IP:18080这种局域网 HTTP 地址不属于浏览器的安全上下文Service Worker 注册不稳安装和离线能力都会打折——就像没锁门的仓库东西随时可能丢。想让手机拿到完整体验用 NAS 自带的反向代理加一张受信任证书把它升级成 HTTPSdeploy/docker/README.md 的HTTPS 与浏览器安全上下文一节有现成的代理配置示例。三、把网页变成应用地址就绪后用手机浏览器打开它剩下的动作其实很少。安卓 Chrome从菜单里安装应用关键动作就三个用 Chrome 打开 Folia 网页点右上角的 ⋮ 菜单在菜单里选安装应用或添加到主屏幕确认名称是 Folia 后点添加。注意安装提示有时只在首次访问出现找不到就刷新一下页面再看。iPhone从 Safari 的分享面板里添加同样三个动作用 Safari 打开网页点底部分享按钮在弹出的面板里上滑找到添加到主屏幕确认名称后点添加。装完之后主屏幕会出现 Folia 图标。点开的窗口没有地址栏、没有标签页状态栏和应用融为一体——因为standalone模式已经在 manifest 里声明好了iPhone 和安卓的表现是一致的。四、让歌从你自己的机器来想听自己的歌歌源走 Navidrome一个自托管的音乐库服务可以理解成你 NAS 里的中央厨房手机是分店菜从厨房来。接入只要三步在 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手机远程访问省流量也省空间歌词还能智能匹配自动补齐。五、打开后有什么不同Folia 的招牌是多种风格的全屏歌词动画主题。每种主题都有独立排版和可调参数并且会随窗口尺寸响应式重排——竖着拿手机时歌词布局会自动重新排布动画效果不打折。群唱主题把歌词排成对话气泡深色背景下读起来像一段群聊主题配色也不必全靠手动。部署时如果配置了 AI 密钥环境变量说明见 docs/technical.mdAI 会按歌曲情绪与歌词内容自动生成整组配色手机上同样可用离线能力也值得单独说。可以把 Service Worker 理解成门店的备货间第一次访问是进货核心界面资源被预缓存后之后启动就不依赖实时网络——地铁里也能快速打开、看歌词动画。要分清的是音乐流本身必须联网拉取就像直播节目断了网就播不了听歌要等网络恢复。六、卡住了先看这几处排障不用满世界找原因先问自己下面四个问题服务端已经更新了为什么手机上还是旧版PWA 用的是autoUpdate策略浏览器会在后台悄悄比对版本缓存异常时就会卡在旧版。先正常打开一次等它生效如果长时间不更新就清除该站点的数据或者删掉 PWA 重新添加。为什么找不到安装应用 / 添加到主屏幕入口先查两件事地址是不是 HTTPS浏览器是不是 Chrome / Safari。换成对应浏览器后重新加载页面再找菜单安装提示有时只在首次访问出现。为什么手机上找不到导入音频文件的入口这是能力边界不是 bug本地导入依赖的 File System Access API 手机浏览器没有。手机端自己的歌请直接走 Navidrome 方案别硬耗。地铁、弱网环境下能不能用核心界面已预缓存可以离线启动音乐流必须联网。所以弱网下你能快速打开、看歌词动画真正听歌要等网络恢复。挑一条部署路径把 Folia 上线再把图标加到主屏幕——下次想听歌你只需要点一下那个图标。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考