@fnet/web-app-manifest

This project provides a utility for generating a web app manifest file and creating a set of application icons from a given image. It simplifies the process of preparing the necessary files for making a web application installable on devices like smartphones and tablets.

How It Works

The tool takes a provided image and generates several resized versions suitable for use as app icons. It also compiles these into a favicon.ico file that includes multiple sizes for broader compatibility. Alongside the image processing, it generates a manifest.json file, containing details about the app such as its name, description, and appearance settings ((e.g., display mode, theme color).

Key Features

• Resizes a given image file to multiple standard icon sizes required by web app manifests
• Supports input image formats including PNG, JPEG, and others compatible with Sharp
• Creates a favicon.ico containing 16x16, 32x32, and 48x48 icons from the provided image
• Generates a custom manifest.json with app details like name, description, and start URL
• Saves all output files in a specified directory with the icons housed under an img sub-folder

Conclusion

The @fnet/web-app-manifest project is a handy tool for developers looking to streamline the setup of web app manifests and ensure consistent app icon presentation. It's a straightforward solution for managing the image and configuration needs of modern web applications.

@fnet/web-app-manifest Developer Guide

Overview

The @fnet/web-app-manifest library is designed to assist developers in generating web app manifest files alongside corresponding icons required for web applications. With this library, you can easily create a manifest.json file and generate various icon sizes from a source image, suitable for web applications. This also includes the creation of a favicon file (favicon.ico) containing multiple sizes commonly used by browsers.

Installation

To include the @fnet/web-app-manifest library in your project, use either npm or yarn to install it:

npm install @fnet/web-app-manifest

or

yarn add @fnet/web-app-manifest

Usage

Below you'll find an example demonstrating how to use the library:

import generateManifest from '@fnet/web-app-manifest';

const args = {
  name: 'My Web App',
  short_name: 'WebApp',
  description: 'An example web application.',
  start_url: '/',
  display: 'standalone',
  background_color: '#FFFFFF',
  theme_color: '#000000',
  imagePath: './path/to/your/source-image.png',
  outDir: './output-directory'
};

generateManifest(args).then(() => {
  console.log('Web app manifest and icons generated successfully.');
}).catch(err => {
  console.error('Error generating manifest:', err);
});

Examples

Basic Example

This example shows the necessary steps to generate a manifest and icons:

1. Specify Application Details: Provide the name, description, colors, and display preferences for your web app.

2. Image Source: Supply a path to the source image that will be used to generate icons of various sizes.

3. Output Directory: Decide where the generated files will be saved.

const args = {
  name: 'Sample Application',
  short_name: 'Sample',
  description: 'This is a sample application.',
  start_url: '/',
  display: 'standalone',
  background_color: '#FFFFFF',
  theme_color: '#0A0A0A',
  imagePath: './icon-source.png', // Path to your source image
  outDir: './public/assets'
};

generateManifest(args);

Supported Image Formats

The library uses sharp to process images, so it supports common image formats like PNG, JPEG, and others supported by sharp. Ensure your input image is appropriately prepared to create high-quality icons.

Acknowledgement

This library utilizes sharp for image processing and png-to-ico for generating ICO files. We acknowledge the contributions of these open-source libraries.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  name:
    type: string
    description: The name of the application.
    default: Default App Name
  short_name:
    type: string
    description: The short name of the application.
    default: App
  description:
    type: string
    description: A description of the application.
    default: This is a default description.
  start_url:
    type: string
    description: The start URL of the application.
    default: /
  display:
    type: string
    description: Display mode (e.g., 'standalone', 'fullscreen').
    default: standalone
  background_color:
    type: string
    description: Background color of the application.
    default: "#FFFFFF"
  theme_color:
    type: string
    description: Theme color of the application.
    default: "#000000"
  imagePath:
    type: string
    description: Path to the source image file (required for icons generation).
  outDir:
    type: string
    description: Path to the output directory where files will be generated.
required:
  - imagePath