LocalTools离线浏览器工具合集

分类: 开发工具

Web App Manifest 生成器

站方自主规划没找到想要的工具？

为可安装的 Web 应用生成 manifest.webmanifest

填写应用名称、起始 URL、显示模式、主题色、背景色和图标列表，即可得到可直接使用的 manifest.webmanifest JSON 文件，让站点可以作为渐进式 Web 应用（PWA）安装。完全在浏览器本地生成。

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

Web App Manifest 是一个 JSON 文件，用来告诉浏览器你的站点被安装后应该如何表现：主屏幕上的名称和图标、状态栏颜色、是以独立窗口还是普通浏览器标签页打开、以及启动页是哪个地址。没有它，"添加到主屏幕" 要么不可用，要么只会退化成一个普通书签，而不是接近原生应用的体验。

使用方法

  1. 输入应用的名称、短名称和起始 URL。
  2. 选择显示模式、主题色和背景色。
  3. 逐行列出图标，格式为路径和尺寸，例如 "/icon-192.png 192x192"。
  4. 将 JSON 复制到 manifest.webmanifest 文件中，并在页面 <head> 里用 <link rel="manifest" href="/manifest.webmanifest"> 引用它。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

需要哪些尺寸的图标？
至少准备 192x192 和 512x512 的 PNG 图标即可覆盖大多数安装提示和应用图标场景；如果想在特定平台上获得更清晰的图标，可以再补充其他尺寸。
theme_color 和 background_color 有什么区别？
theme_color 会给应用周围的浏览器界面（如地址栏或状态栏）染色；background_color 则是应用加载期间、自身内容渲染完成之前短暂显示的启动页背景色。
如果我不打算做 PWA，还需要这个吗？
即使不需要完整的离线/Service Worker 支持，manifest 也能改善访客收藏站点或添加到主屏幕时显示的图标和名称效果。

返回全部工具