https://github.com/scriptex/create-pwa
Easily create a progressive web app
https://github.com/scriptex/create-pwa
application-icons favicons manifest-json progressive-web-app service-workers splash webmanifest
Last synced: 22 days ago
JSON representation
Easily create a progressive web app
- Host: GitHub
- URL: https://github.com/scriptex/create-pwa
- Owner: scriptex
- License: mit
- Created: 2018-05-14T04:51:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-04-14T04:23:41.000Z (6 months ago)
- Last Synced: 2025-05-01T18:42:23.632Z (5 months ago)
- Topics: application-icons, favicons, manifest-json, progressive-web-app, service-workers, splash, webmanifest
- Language: JavaScript
- Homepage: https://atanas.info/portfolio/open-source/create-pwa
- Size: 2.37 MB
- Stars: 25
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/scriptex/create-pwa)
[](https://github.com/scriptex/create-pwa/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/create-pwa/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/create-pwa&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-create-pwa-master)
[](https://www.codefactor.io/repository/github/scriptex/create-pwa)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/create-pwa/)
# Create PWA (Create a Progressive Web Application)
> Easily create a Progressive Web Application
## About
`create-pwa` is a module for quick scaffolding and producing of progressive web applications.
`create-pwa` adds the minimum required boilerplate which your app requires in order to become a PWA.
`create-pwa` can be used with existing applications or can be the first thing one does when starting a new app.
## Visitor stats
## Code stats
## Dependencies
In order to use this module, you must have NodeJS installed and NPM or Yarn available.
**You also need a bash shell installed and configured - default on OSX and linux or [Git bash](https://git-scm.com/downloads) on Windows.**
## Install
```sh
# Using NPM:
npm i create-pwa --save-dev
# Using Yarn
yarn add create-pwa --dev
```
## Arguments
1. `icon`: Specifies a relative path to the application icon. **Should be a `.png` file.**
This path is relative to the folder you are located in. It is recommended that the icon file is at least a 512x512 pixels square.
**The `icon` argument is not required.**
If the `icon` argument is not provided, the [default icon](https://github.com/scriptex/create-pwa/blob/master/icon.png) is used.
2. `launch`: Specifies a relative path to the application launch (splash) screen. **Should be a `.png` file.**
This path is relative to the folder you are located in. It is recommended that the launch is at least 3200x3200 pixels square and the actual content (for example brand image) is located in the middle of the image in a square with dimensions up to 500x500 pixels.
**The `launch` argument is not required.**
If the `launch` argument is not provided, the [default launch screen](https://github.com/scriptex/create-pwa/blob/master/launch.png) is used.
3. `output`: Specifies a relative path to the output directory.
This path is relative to the folder you are located in.
**The `output` argument is not required.**
If the `output` argument is not provided, the default value for it is empty string (the root of your project or the location of your `package.json` file).
## Usage
If you want to use if from the command line, you should first install Create PWA globally:
```sh
npm i -g create-pwa
# or
yarn global add create-pwa
```
Then, navigate to your application's folder:
Then run the install command (see above)
```sh
cd your/app/folder
create-pwa --icon="./icon.png" --launch="./launch.png"
```
You can also use `create-pwa` as a package.json script (in this case you don't need to install the package globally):
```json
{
"scripts": {
"pwa": "create-pwa --icon=\"path/to/your/icon.png\" --launch=\"path/to/your/launch.png\""
}
}
```
The above commands will generate:
- a `manifest.json` and a `service-worker.js` files
- several (8) png icons in the `/icons/` folder in your app's root folder
- several (19) favicons in the `/favicons` folder in your app's root folder
- several (20) launch screen images in the `launch-screen` folder in your app's root folder
- a `config.xml` file in your app's root folder - this file is required in Microsoft's browsers
You can edit the contents of the `manifest.json` and `service-worker.js` files.
Their default content is based on industry's best practices and is highly opinionated.
In order to create a customized experience for your users, feel advised to revise and edit the contents of the above files.
When the files(`manifest.json` and `service-worker.js`) are ready for production, you need to let the world know about them:
Feel adviced to edit the content of the `` tag in the `config.xml` file as it matches the color of your application's status bar on Chrome (found in the `` tag);
1. Add the following to the `head` of your HTML file(s):
```html
```
You can read more about the Web App Manifest [here](https://developers.google.com/web/fundamentals/web-app-manifest/).
2. Add the following snippet to your application's JavaScript bundle or place it in a `script` tag just before the closing `