PWA应用图标和徽章生成 - 自适应圆形
上传主图标,自动生成带安全区域内缩的maskable-icon和monochrome通知徽章。
UD5工具箱
// 设置数字徽章
if ('setAppBadge' in navigator) {
await navigator.setAppBadge(5);
console.log('徽章已设置为 5');
}
// 清除徽章
await navigator.clearAppBadge();
// 或使用 setAppBadge(0)
await navigator.setAppBadge(0);
// 设置仅红点(无数字)
await navigator.setAppBadge();
// Service Worker 中
self.addEventListener('push', async (event) => {
const data = event.data?.json();
const unreadCount = data?.unreadCount || 1;
// 更新应用徽章
if (self.navigator?.setAppBadge) {
await self.navigator.setAppBadge(unreadCount);
}
});
async function updateBadge(count) {
if (!('setAppBadge' in navigator)) {
console.warn('Badging API 不受支持');
return false;
}
try {
if (count <= 0) {
await navigator.clearAppBadge();
} else {
await navigator.setAppBadge(count);
}
return true;
} catch (err) {
console.error('设置徽章失败:', err);
return false;
}
}
'setAppBadge' in navigator 来判断浏览器是否支持。
setAppBadge())会显示一个无数字的指示点self.navigator.setAppBadge()调用。这在处理后台推送通知时特别有用——您可以在收到推送时直接在Service Worker中更新徽章数字,而不需要等待主页面打开。需要注意检查self.navigator?.setAppBadge是否存在。
上传主图标,自动生成带安全区域内缩的maskable-icon和monochrome通知徽章。
创建带有弹性动画的通知数字徽章或红点,生成对应的HTML/CSS代码。
配置Launch Handler使PWA应用在重复点击时聚焦到已开窗口,而不是新建窗口。
上传图标并添加未读数的角标红点或数字,生成带提醒效果的网站Favicon。
上传基础图标,添加数字或红点角标,生成带提醒效果的动态Favicon SVG。
输入键值对,自动生成 Kubernetes ConfigMap YAML,支持文字和多行数据。
上传 OpenAPI 描述文件,自动生成符合定义的模拟 JSON 响应,支持选择不同端点。
生成图片局部放大镜效果,可调节镜头大小和放大倍率,输出HTML/CSS/JS交互代码。
加载棒针文字图解,高亮正在编织的当前行,手动推进,辅助跟解。
生成简单数字或字母验证码图片,带干扰线和噪点,适合前端原型测试,不依赖服务端。
测试浏览器通知权限和弹出,自定义标题、正文及图标,发送系统桌面通知,调试推送。
像哈哈镜一样,鼠标滑动对图片局部进行实时的膨胀或挤压变形。
粘贴服务器日志,快速根据正则或字符串过滤、高亮并统计出现频次。
实时调整焦点轮廓的颜色、粗细和偏移,生成美观且高对比度的焦点样式代码。
勾选Secure、HttpOnly、SameSite等属性,生成安全的Set-Cookie字符串,增强Web应用安全。
随机生成一堆宝藏内容:金币数量、宝石、艺术品、魔法物品等,列出详细清单。
上传一个主图标,同时生成16x16至128x128的所有标准浏览器扩展图标尺寸。
拖拽式组装姓名、职位、Logo和社交媒体链接,生成兼容各大邮件客户端的HTML签名。
使用Idle Detection API区分用户是临时空闲、键盘无活动还是屏幕已锁定。
演示请求订阅Web Push,获得端点后可配合服务端发送测试推送。
图形化配置Content-Security-Policy指令,生成安全策略头,防御XSS和代码注入。
选择本地音频文件,解绘制完整的静态波形图,便于观察响度变化。
选择所在时区和典型工作时间,生成显示可用时段的徽章图片。
定义JSON Schema结构,自动填充符合类型与格式的随机数据,支持导出大文件用于压力测试。
运行Gray-Scott反应扩散模型,生成类似动物毛皮或化学斑图的复杂纹理。
绘制简单的软件架构模块图,拖拽连接器和标注,导出为基础图片。
选择符号和颜色,输入警示文字,生成类似ISO安全标志的图片。
上传图片,利用Tesseract.js离线识别其中的英文或简单文字并复制。
通过Canvas将文字、字母或Emoji渲染为多尺寸favicon.ico,快速为您的网站生成小图标。
生成包含指定数量随机Emoji的密码短语,新奇有趣,增加猜测难度。