调号闪卡训练器 - 升降号数量识别
显示含有不同升降号数目的调号,快速点击对应的大调和小调名称。
UD5工具箱
配置 PWA Manifest 的 capture_links 与 scope_extensions,一键生成配置文件并体验链接捕获效果。
控制当用户点击指向此 PWA 作用域内链接时的行为。
控制 PWA 启动时的路由行为(与 capture_links 配合使用)。
允许 PWA 捕获来自其他域名的链接。需在关联域名部署 .well-known/web-app-origin-association 文件。
📎 可点击的测试链接:
配置 Manifest
添加 capture_links 和 scope_extensions部署 Association 文件
在扩展域的 .well-known/ 目录下确保 HTTPS
所有域名必须使用 HTTPS安装 PWA 测试
安装后点击链接验证捕获效果声明式链接捕获是 PWA 的一项能力,允许开发者通过 Manifest 文件声明式地配置应用如何响应来自外部的链接点击。当用户点击指向 PWA 作用域内(或扩展作用域)的链接时,浏览器可以根据配置决定是在 PWA 窗口中打开、创建新窗口、还是在浏览器中正常打开。
这解决了以往需要通过 JavaScript 或 Service Worker 手动处理链接路由的痛点,提供了更原生、可靠的用户体验。
💡 提示:推荐配合 launch_handler.route_to 使用,以获得一致的启动和捕获行为。
scope_extensions 允许 PWA 将其链接捕获范围扩展到其他域名。例如,你的 PWA 在 myapp.com,但你也想捕获来自 partner-site.com 的链接。
使用条件:
scope_extensions,列出要扩展的域名。.well-known/web-app-origin-association 路径下放置关联文件,声明允许关联的 PWA。⚠️ 注意:关联文件需要能通过公开 URL 访问,浏览器会定期验证。
该文件必须放在扩展域名的以下路径:https://<扩展域名>/.well-known/web-app-origin-association
例如,如果扩展域是 https://partner-site.com,则文件应可通过 https://partner-site.com/.well-known/web-app-origin-association 访问。
文件内容为 JSON 格式,包含关联应用的 manifest URL 和允许的路径范围。
🔒 该路径下的文件被视为安全敏感的配置,浏览器会严格验证其内容。
launch_handler.route_to 控制 PWA 启动时的路由行为,而 capture_links 控制运行时点击链接的捕获行为。两者配合可以实现完整的导航体验控制。
推荐配置组合:
capture_links: "existing-client-navigate" + launch_handler.route_to: "existing-client-navigate"capture_links: "new-client" + launch_handler.route_to: "new-client"截至 2024-2025 年,声明式链接捕获在 Chromium 系浏览器(Chrome、Edge、Arc 等)中得到良好支持。Android 上的 Chrome 支持尤为完善。iOS Safari 的支持正在逐步推进中。
建议在功能检测的基础上进行渐进增强,为不支持的浏览器提供优雅降级方案。
📊 可通过 navigator.userAgentData 或特性检测来判断浏览器支持情况。
chrome://web-app-internals/ 查看已安装 PWA 的详细信息。.well-known/web-app-origin-association 是否可访问。scope:定义 PWA 的主作用域,在同一域名下的路径范围。离开此范围的页面会退出 PWA 模式。
scope_extensions:将链接捕获能力扩展到其他域名,但需要那些域名的配合(web-app-origin-association 文件)。它不会改变 PWA 的主作用域,只是允许捕获来自扩展域的链接。
💡 简单理解:scope 管"自己家",scope_extensions 管"邻居家"(需要邻居同意)。
显示含有不同升降号数目的调号,快速点击对应的大调和小调名称。
利用MediaPipe Hands模型,实时识别手部21个关键点并在摄像头上绘制骨架。
通过CSV或手动输入源、目标、数值,生成展示流向和占比的桑基图。
输入电话号码和预填消息,生成可点击的wa.me链接,适用于联系按钮。
上传照片,读取并展示完整EXIF元数据,警示泄露位置风险。
按议程设定多个环节及耗时,大屏显示倒计时并到时鸣响,高效会议。
随麦克风输入或音频播放,以复古指针样式显示实时音量电平。
拖拽调节ADSR四个阶段参数,直观观察波形包络形状并触发演示音色。
输入图片链接,加载后从中提取5种主要颜色生成调色板,无需手动上传。
利用浏览器内置语音合成,输入文本选择不同语言和嗓音播报,支持语速、语调调节。
录制麦克风音频片段并循环播放,支持多轨叠加,模拟Loop效果器。
连接当前页面的IndexedDB数据库,浏览对象仓库与索引,运行简单的过滤与查询。
加载音频,加速或减速播放且保持原音调,适合语言学习。
编写Mermaid语法,实时预览流程图、时序图、甘特图,并可导出SVG。
随着音乐节奏反复点击按钮,自动计算每分钟节拍数(BPM),为DJ和跑者便利。
提供世界各地公开可用的网络电台流媒体地址列表,可直接在工具内播放。
体验VirtualKeyboard API如何控制网页不被系统软键盘遮盖,并获取键盘几何信息。
粘贴技术文档,提取所有首字母大写的短语并生成带定义的简易术语表。
使用Web Speech Recognition API将语音转为文本,支持自动标点,可事后编辑复制。
用放大的缩放圆环引导你吸气4秒、屏住7秒、吐气8秒,帮助平复情绪。
上传绿幕视频和新背景图,实时抠像合成预览并可选录制成WebM。
跟随动画节奏进行腹式呼吸,可选择4-7-8或箱式呼吸法,定时提醒深呼吸减压。
选择一个和弦,以动画方式在虚拟钢琴上展示上下行琶音的键位和音名。
添加多个城市,并排查看实时天气概况,帮计划出行或联系远方亲朋。
随机展示Vim命令描述,要求按下正确热键序列,分难度等级强化肌肉记忆。
输入文本,显示对应的旗语手势动画;或根据手势猜字母。
输入设计稿尺寸与视口宽度,计算出对应的vw、vh值,加速移动端适配开发。
播放一段短旋律,在虚拟钢琴上重复弹奏出来,系统比对并评分。
上传.mid文件,将里面的音符事件(时间、音高、力度)提取为CSV表格。
浏览所有HTML实体符号,点击复制&code;或数字编码。