pwa-asset-generator ✨

Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.

Motivation — read the full blog post here

When you build a PWA with a goal of providing native-like experiences on multiple platforms and stores, you need to meet with the criteria of those platforms and stores with your PWA assets; icon sizes and splash screens. Such criteria are;

• Google's Android platform respects Web App Manifest API specs, and it expects you to provide at least 2 icon sizes in your manifest file - https://web.dev/add-manifest/#icons 🤔

• Apple's iOS currently doesn't support Web App Manifest API specs. You need to introduce custom html tags to set icons and splash screens to your PWA 🤔

  • You need to introduce a special html link tag with rel apple-touch-icon to provide icons for your PWA when it's added to home screen. Read more about it on Apple's Icon Guidelines and Safari Web Content Guide.
  • You need to introduce a special html link tag with rel apple-touch-startup-image to provide a splash screen for your PWA to display when it's opened and in the background. You need to create a splash screen image for every resolution on Apple's Launch Screen Guidelines and html tag with media attr for each image like <link rel="apple-touch-startup-image" href="temp/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">. Unfortunately, this requirement is not documented on the Safari Web Content Guide sufficiently.

Creating icon and splash screen images for all the platforms, maintaining sizes and quality for all and adding html tags for each image can be overwhelming. So, why not automate it? 💡

Features

PWA Asset Generator automates the image generation in a creative way. Having Puppeteer at its core enables lots of possibilities.

• Generates both icons and splash screens with optional --icon-only --splash-only --landscape-only and --portrait-only flags ✨

• Updates your manifest.json and index.html files automatically for declaring generated image assets 🙌

• Ships the iOS/iPadOS device specs it needs, so your PWA is ready for all/recent iOS devices out there without touching the network 🤖

  • Works fully offline - device specs are bundled with the package 📴
  • Apple removed the device screen dimensions table from its Human Interface Guidelines, so the bundled specs are the single source of truth and the --scrape flag is a deprecated no-op 🔄

• Uses the Chrome browser as it’s a canvas of your fav image editor. It uses a shell HTML on the fly as an art board and centers your logo before taking screenshots for each resolution via Puppeteer 🤖

• You can provide your source in multiple formats; a local image file, a local HTML file, a remote image or HTML file 🙌

  • When it’s an image source, it is centered over the background option you provide 🌅
  • When it’s an HTML source, you can go as creative as you like; position your logo, use SVG filters, use variable fonts, use gradient backgrounds, use media queries while generating dark mode splash screens, use typography and etc. Your HTML file is rendered on Chrome before taking screenshots for each resolution 🎨

• Uses puppeteer-core instead of puppeteer and only installs Chromium if it doesn't exist on the system. Saves waste of ~110-150mb of disk space and many seconds from the world per each user 🌎⚡️

• Supports dark mode splash screens on iOS! So, you can provide both light 🌕 and dark 🌚 splash screen images to differentiate your apps look & feel based on user preference 🌙

• Supports PWA maskable icons by declaring them in manifest file adaptively 🖼

This is the beginning of the README. Read the rest at the original. Read the full README ↗