Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khalyomede/gridsome-plugin-manifest
Generates a manifest and handle icons generation for your PWA.
https://github.com/khalyomede/gridsome-plugin-manifest
gridsome gridsome-plugin manifest pwa
Last synced: about 2 months ago
JSON representation
Generates a manifest and handle icons generation for your PWA.
- Host: GitHub
- URL: https://github.com/khalyomede/gridsome-plugin-manifest
- Owner: khalyomede
- License: mit
- Created: 2019-12-25T20:28:05.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:22:41.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T22:28:02.517Z (2 months ago)
- Topics: gridsome, gridsome-plugin, manifest, pwa
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gridsome-plugin-manifest
- Size: 1.08 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# gridsome-plugin-manifest
Generates a manifest and handle icons generation for your PWA.
[](https://www.npmjs.com/package/gridsome-plugin-manifest) [](https://www.npmjs.com/package/gridsome) [](https://github.com/khalyomede/gridsome-plugin-manifest/blob/master/LICENSE) [](https://travis-ci.com/khalyomede/gridsome-plugin-manifest) [](https://codecov.io/gh/khalyomede/gridsome-plugin-manifest)   [](https://codeclimate.com/github/khalyomede/gridsome-plugin-manifest/maintainability)
## Summary
- [About](#about)
- [Features](#features)
- [Requirements](#requirements)
- [Installation](#installation)
- [Usage](#usage)
- [Changelog](CHANGELOG.md)
- [API](#api)
- [Known issues](#known-issues)
- [Run the tests](#run-the-tests)
## About
I made this plugin because I use gridsome to make my next web app, and I wanted to have a way to just generate this file for me in order to pass the Lighthouse PWA manifest.json test.
## Features
- Generates a `manifest.json` at the root of your dist folder at build time
- Automatically generates 512, 192, 144, 98, 72, and 48px wide icons from your original icon
- Adds a `` and a `` (at build time) at the head of each of your HTML files
## Requirements
- NPM or Yarn installed on your machine
## Installation
With NPM:
```bash
npm install --save-dev gridsome-plugin-manifest
```
With Yarn:
```bash
yarn add --dev gridsome-plugin-manifest
```
## Usage
In your file `gridsome.config.js`, add the following in the `plugin` key:
```javascript
module.exports = {
siteName: "Gridsome",
plugins: [
{
use: "gridsome-plugin-manifest",
options: {
background_color: "#000000",
icon_path: "./src/assets/img/icon.png",
name: "My app name",
short_name: "App",
theme_color: "#FFFFFF",
lang: "en",
},
},
],
};
```
Build your project:
- With NPM: `npm run build`
- With Yarn: `yarn build`
To check it work, serve your application locally, then use Chrome DevTools to run a check on the PWA "manifest" test to check it has successfuly taken your manifest file into account.
## API
- Options
- **background_color**: `String` The background of your PWA loading screen
- **name**: `String` The name displayed in your PWA loading screen
- **theme_color**: `String` The color of the text in your PWA loading screen
- **display**: `standalone` | `minimal-ui` | `fullscreen` (default: `minimal-ui`)
- **scope**: `String` The scope of your PWA (should be an absolute URL)
- **orientation**: `any` | `natural` | `landscape` | `landscape-primary` | `landscape-secondary` | `portrait` | `portrait-primary` | `portrait-secondary` (default: `any`)
- **start_url**: `String` The URL where the user will begin if he/she starts your PWA
- **file_name**: `String` The name of your manifest file (default: `manifest.json`)
- **icon_path**: `String` The path (include the file name) where your icon is stored at
- **dir**: `ltr` | `rtl` | `auto` The direction of the text (default: `auto`)
- **lang**: `String` An ISO 2 lang code to determine which lang the `name` and `short_name` are displayed on.
- **prefer_related_applications**: `Boolean` Whether to prompt to open any link with another app than this PWA or not (default: `false`).
- **related_applications**: `Array`: A list of the related applications (see below for the prototype of a `RelatedApplication`).
```typescript
interface RelatedApplication {
platform: string;
url: string;
id?: string;
}
```
_(`?:` means "non mandatory field")._
## Known issues
- The icon **must** be square (the size that is used in the `icons` key of the `manifest.json` file is for the moment `width x width`, so for example a width of `512` will produce a `sizes` key equal to `512x512`)
## Run the tests
1. Clone the project: `git clone https://github.com/khalyomede/gridsome-plugin-manifest`
2. Install the dependencies
- with NPM: `npm install`
- with Yarn: `yarn install`
3. Run the tests
- with NPM: `npm run test`
- with Yarn: `yarn test`
You should see something like:
```
$ nyc mocha --require @babel/register test
client
√ should export a function
server
general
√ should export a function
defaultOptions
√ should return default options
3 passing (22ms)
-------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------|---------|----------|---------|---------|-------------------
All files | 17.8 | 4.88 | 9.52 | 18.92 |
error-logger.js | 80 | 100 | 0 | 80 | 8
...some.client.js | 50 | 100 | 0 | 66.67 | 2
...some.server.js | 13.76 | 4.88 | 10.53 | 14.56 | ...30-232,257-259
-------------------|---------|----------|---------|---------|-------------------
```