尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Folia 手机 PWA:从部署到独立应用安装的完整链路
Folia 手机 PWA从部署到独立应用安装的完整链路【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major在地铁里点一下主屏幕上的 Folia 图标打开的窗口没有地址栏、没有标签页只有当前歌曲的歌词在深色画面上逐句流动——这就是 Folia PWA 手机安装完成后的样子Web 版本身支持安装地址加进主屏幕后它会以独立应用运行登录态留在手机浏览器里。先交代一个术语PWA 是可安装的网页装好之后在手机上像独立应用一样运行。从仓库到主屏幕上那个图标之间路径取决于手头有什么条件。部署前先判断你属于哪种条件把 Folia 发到手机上之前先确认自己手上有什么有或愿意用免费托管、只有 NAS、还是想克隆仓库自己掌控一切。三种条件的关键配置点差别不小。走免费托管的话仓库自带 Vercel 与 Cloudflare 两个一键部署入口几分钟就能拿到自带 HTTPS 的地址。如果要用平台内置的 QQ 音乐接口VITE_QQ_API_BASE填成/api/qq就行这一项的部署细节写在 docs/qq-music-deployment.md 里。只有 NAS 的话走 Docker 全栈把deploy/docker/compose.yaml和环境变量模板放进一个空目录跑openssl rand -hex 32生成一段随机串贴进.env的SYNC_TOKEN再执行docker compose up -d容器起来后网关默认监听 18080 端口访问地址就是http://NAS-IP:18080。想完全自己掌控域名和密钥就git clone https://gitcode.com/GitHub_Trending/fo/folia-major拉下仓库环境变量的对照表写在 docs/technical.md 里照着填、部署到任意支持 Node.js 的平台即可。HTTP 地址为什么装不出完整 PWA地址就绪之后NAS 方案有一个容易踩的坑需要提前说清楚 ⚠️http://NAS-IP:18080这种局域网 HTTP 地址日常播放没问题但普通 HTTP 不属于浏览器认定的安全上下文负责离线缓存与后台更新的 Service Worker 无法可靠注册PWA 的安装提示和离线能力都会跟着降级——最常见的症状就是菜单里找不到安装应用入口。解决办法是让 NAS 自带的反向代理在前方终止 HTTPS加一张浏览器信任的证书把请求转发到http://127.0.0.1:18080。现成的代理配置示例、以及 HTTP 下会降级哪些能力都写在 deploy/docker/README.md 的HTTPS 与浏览器安全上下文一节照着配一遍就行。安卓和 iPhone 的安装操作差异不大HTTPS 就位后手机端装起来反而简单。两个平台的差异其实集中在菜单位置安卓上用 Chrome 打开 Folia 页面从右上角 ⋮ 菜单里选安装应用或添加到主屏幕iPhone 上用 Safari 打开走底部分享按钮上滑找到添加到主屏幕。两边确认名称为 Folia、添加即可没有更深的讲究。真正的验证信号在安装完成之后主屏幕出现 Folia 图标点开是独立窗口、无地址栏状态栏与应用融为一体。这是因为 manifest 声明了standalone显示模式index.html里也内置了apple-mobile-web-app-capable等元标签所以 iPhone 和安卓两边的表现是一致的。手机端曲库为什么必须走 Navidrome自己的歌想在手机上放推荐路径是 Navidrome一个自托管的音乐库服务在 NAS 上用 Docker 部署它并挂载音乐目录在 Folia 的账户设置里填 Navidrome 地址与账号曲库、封面、歌词就会被拉取过来歌词动画照常驱动。那为什么不能在手机上直接导入本地音频因为本地目录导入依赖 File System Access API而这个能力目前只存在于桌面版 Chromium 系浏览器——通俗说就是手机浏览器根本没给应用留选本地目录这个入口HTTPS 也补不齐这块短板。所以手机端把文件留在 NAS通过 PWA 远程访问是更省事的路线。如果走的是 Docker 全栈部署还可以在.env里补上NAVIDROME_URL、NAVIDROME_USERNAME、NAVIDROME_PASSWORD三项改完跑docker compose up -d --force-recreate backend让后端重建之后新打开的浏览器会自动登录这套 Navidrome 配置手机不用单独输账号这项预置账号的规则细节同样在 deploy/docker/README.md 的Navidrome 预置账号一节。装好之后你会发现用上一周最先注意到的是响应式重排竖着拿手机时歌词布局会自动重新排布每种主题有独立排版与可调参数竖屏下动画效果并不打折。比如流光主题在深色屏幕上逐字晕开群唱主题则把歌词排成对话气泡读起来像一段群聊。配色也不必全靠手动调部署时配过 AI 密钥的话说明在 docs/technical.mdAI 会按歌曲情绪与歌词内容自动生成整组配色手机上同样可用。另外核心界面资源被 Service Worker 预缓存了首次加载完成后启动不依赖实时网络——地铁里能快速打开、看歌词动画但音乐流本身必须联网拉取离线听歌这一项等网络恢复才成立。遇到问题先从这里查如果你发现找不到安装应用 / 添加到主屏幕入口多半是地址还是 HTTP或者浏览器不对。换用 Chrome 或 Safari重新加载页面再找菜单——安装提示有时只在首次访问时出现这不算异常。如果你发现服务端已更新手机上还是旧版PWA 用的是autoUpdate缓存策略缓存异常时会卡在旧版。正常打开一次等它生效即可长时间不更新的话清除该站点数据或删掉 PWA 重新添加。如果你发现弱网下界面完全打不开理论上核心界面已预缓存、可以离线启动打不开时优先回查地址是不是 HTTPS 安全上下文见前述反向代理一节。确认没问题的话弱网下歌词动画可以照常看听歌部分需要等网络恢复。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

拖拽提交完成变基:GitUp,一款实用的 Mac Git 客户端

拖拽提交完成变基:GitUp,一款实用的 Mac Git 客户端

拖拽提交完成变基:GitUp,一款实用的 Mac Git 客户端 【免费下载链接】GitUp The Git interface youve been missing all your life has finally arrived. 项目地址: https://gitcode.com/gh_mirrors/gi/GitUp 你盯着终端里那串 git rebase -i HEAD~3 愣了五秒——按哪个…

📅 2026/11/4 22:14:35
shadPS4 到底能不能在 PC 上玩《血源诅咒》?先做 3 项自查

shadPS4 到底能不能在 PC 上玩《血源诅咒》?先做 3 项自查

shadPS4 到底能不能在 PC 上玩《血源诅咒》?先做 3 项自查 【免费下载链接】shadPS4 PlayStation 4 emulator for Windows, Linux, macOS and FreeBSD written in C 项目地址: https://gitcode.com/GitHub_Trending/sh/shadPS4 shadPS4 是一个 C 编写的 Play…

📅 2026/11/4 22:14:35
电机控制FOC源码阅读指南:从入门到精通的工程实践路线

电机控制FOC源码阅读指南:从入门到精通的工程实践路线

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/11/4 22:09:35
MORE NEWS

更多资讯

📰

Crowbar/Diksam解释器源码拆解:词法语法、GC与构建排错

简介:围绕自制编程语言主题的PDF资料,面向希望从语法设计、编译器实现到运行环境完整走通一遍的开发者与高年级学生,尤其适合已具备C语言基础、想理解解释器与编译器构造流程的读者。压缩包内共1个PDF文件,约2.38MB,以…

📰

SeleniumBase与Cypress Real World App自动化测试实践

1. 项目概述:SeleniumBase与Cypress Real World App的自动化测试实践最近在尝试使用SeleniumBase框架对Cypress Real World App这个开源项目进行自动化测试时,遇到了几个典型的前后端交互问题。作为一款模拟真实金融场景的测试应用,Cypress R…

📰

PostgreSQL主从流复制+pgpool高可用实战指南

简介:本资源是一份面向数据库运维工程师与PostgreSQL高可用架构实践者的完整技术方案文档,聚焦Postgres主从流复制与pgpool-II协同构建生产级高可用数据库集群。内容系统覆盖流复制原理(WAL日志实时同步、同步/异步模式对比)、pgp…

📰

机器学习算法优化与硬件协同设计的效率革命

1. 机器学习效率革命的背后推手在波士顿查尔斯河畔的那栋标志性玻璃建筑里,一群穿着连帽衫的研究人员正用数学公式重新定义人工智能的边界。他们最近发表在NeurIPS上的论文显示,通过改进传统反向传播算法,模型训练时间缩短了40%——这相当于每…

📰

SQL窗口函数速查:OVER()、排名与窗口帧避坑

简介:《SQL窗口函数速查表》PDF面向数据库管理员、数据分析师、数据科学家与开发人员,聚焦窗口函数概念零散、语法与适用边界易混的问题,适合具备基础SQL、希望提升复杂查询与报表分析能力的中级读者。整份资源仅含1个PDF文件,压缩…

📰

3个月掌握白帽黑客技术的可行性路径

1. 项目概述"3个月掌握黑客技术"这个说法在技术圈一直存在争议。作为一个在信息安全领域摸爬滚打多年的从业者,我想从专业角度谈谈这个话题的可行性边界。首先要明确的是,这里的"黑客"指的是合法的网络安全技术研究(白帽…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬