轻松生成 PWA 图标和启动画面

最近我创建了我的第一个渐进式 Web 应用程序 (PWA)。一部分原因是我在 Apple Store 上找不到适合我的免费应用，另一部分原因是我试图说服我的一个朋友，它比原生移动应用速度更快，维护起来也更好。

我主要从事后端开发，所以用日常工作中不常用的技术来做一些 hack 东西总是很有趣也很轻松。所有的编程工作都很有趣，主要是因为我用了一些很棒的工具，尤其是Vue CLI，它自带了一个很棒的PWA 模板，可以让你几乎立即开始一个项目，而不用自己去琢磨样板代码。

不过，我遇到了一些问题。首先让我吃惊的是，我发现PWA 中的 localStorage在主屏幕打开应用和在浏览器中打开应用时会有所不同。好吧，那就别让用户在浏览器中使用你的应用，让他们使用 PWA 版本吧。搞定。

第二个问题是 iOS Safari 计算视口高度的方式，这让用 CSS 创建布局变得非常麻烦。简而言之：它会把自己的工具栏放在你精心设计的应用导航栏上。我尝试了这个buggyfill，效果不错，但它让我意识到我应该专注于应用功能而不是渲染细节，所以我在项目中采用了Framework7来解决这个问题。搞定了。

但令我惊讶的是，创建一个简单的 PWA 最大的挑战是如何为它填充各种设备/操作系统所需的分辨率图标。Chrome DevTools 会验证 512 像素和 192 像素的 PNG 图标，还有 32 像素和 16 像素的图标，以及适用于所有 iOS 设备的各种分辨率的图标。目前为止一切顺利，它只是一个不同分辨率的正方形。完成了。

然后你发现有一个<link rel="apple-touch-startup-image">HTML 标签可以用来避免应用加载时用户看到白屏。但你需要为每台 iOS 设备创建相应的启动图片，因为每台设备的分辨率和显示比例都不一样。

所以你不能再直接缩小一个高分辨率 PNG 图片了。更糟糕的是，你不能只使用一种分辨率，然后指望 iOS 会重新缩放它，让它在所有屏幕上都显示出来。好吧，你可以期待，但最终会失望。不过，这适用于应用图标（我最终只选择了 180x180px 的版本，所有设备似乎都能正常显示）。

幸运的是，Apple 已经涵盖了这一点，并在方便的表格中为您提供了所有决议的概览。

理论都讲完了，剩下要做的就是创建各种分辨率的应用图标。我该怎么做呢？我不是平面设计师。我不想用在线工具，然后手动下载生成的文件到我的项目中。我也不想用现成的解决方案，依赖一堆依赖，然后输出海量文件，需要你手动筛选。哎呀，我是个 Web 开发者，肯定有更好的办法来解决这个问题：

...变成这样：

然后我突然灵光一闪！这些长宽比和分辨率各异的图形，其实不过是一个包含一张图片（SVG格式）的简单响应式网页而已。还好我一开始就把logo设计成了矢量图形。

以下是可扩展的 Web 应用程序图标模板，可适应任何屏幕尺寸和方向：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  body {
    margin: 0;
    background: linear-gradient(225deg, #F9D423, #F83600);
    height: 100vh;
  }
  img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  </style>
</head>
<body>
  <img src="logo-white.svg" >
</body>
</html>

只需在不同的视口尺寸下截取屏幕截图，就大功告成了！别傻了，别手动截取。自动化吧！用一个小的 Node 脚本帮你截取屏幕截图（它使用NPM 提供的Webshot CLI ）。

const { exec } = require('child_process')
const util = require('util')

const sizes = [
  { name: 'favicon-16', size: '16/16' },
  { name: 'favicon-32', size: '32/32' },
  { name: 'apple-icon-180', size: '180/180' },
  { name: 'pwa-icon-192', size: '192/192' },
  { name: 'pwa-icon-512', size: '512/512' },
  { name: 'apple-splash-640', size: '640/1136' },
  { name: 'apple-splash-750', size: '750/1334' },
  { name: 'apple-splash-1242', size: '1242/2208' },
  { name: 'apple-splash-1125', size: '1125/2436' },
  { name: 'apple-splash-1125', size: '1125/2436' },
  { name: 'apple-splash-1536', size: '1536/2048' },
  { name: 'apple-splash-1668', size: '1668/2224' },
  { name: 'apple-splash-2048', size: '2048/2732' },
]

sizes.map(item => {
  exec(util.format(
    'npx webshot --window-size=%s ./src/assets/logo/logo.html ./static/img/icons/%s.png',
    item.size,
    item.name
  ))
})

一个 SVG、一个 HTML、一个 Node 脚本和一个本地安装的 NPM 包。这就是生成大量 PWA 图形所需的全部内容：

感谢阅读！这是我在这个可爱的社区里的第一篇文章，非常感谢大家的反馈。祝大家黑客愉快！

鏂囩珷鏉ユ簮锛�https://dev.to/dominikfiala/hassle-free-pwa-icons-and-splash-screen- Generation-3c24