{"id":16701067,"url":"https://github.com/scriptex/create-pwa","last_synced_at":"2025-09-16T03:53:35.484Z","repository":{"id":37932938,"uuid":"133306465","full_name":"scriptex/create-pwa","owner":"scriptex","description":"Easily create a progressive web app","archived":false,"fork":false,"pushed_at":"2025-04-14T04:23:41.000Z","size":2487,"stargazers_count":25,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-01T18:42:23.632Z","etag":null,"topics":["application-icons","favicons","manifest-json","progressive-web-app","service-workers","splash","webmanifest"],"latest_commit_sha":null,"homepage":"https://atanas.info/portfolio/open-source/create-pwa","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2018-05-14T04:51:51.000Z","updated_at":"2025-04-14T04:23:44.000Z","dependencies_parsed_at":"2023-10-12T07:33:15.828Z","dependency_job_id":"209eaa91-42e6-4fec-9c41-9cbf59337645","html_url":"https://github.com/scriptex/create-pwa","commit_stats":{"total_commits":274,"total_committers":10,"mean_commits":27.4,"dds":0.5802919708029197,"last_synced_commit":"b4e1e201566f1cead6724aa222065652a31a73ea"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fcreate-pwa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fcreate-pwa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fcreate-pwa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fcreate-pwa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/create-pwa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253149380,"owners_count":21861717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["application-icons","favicons","manifest-json","progressive-web-app","service-workers","splash","webmanifest"],"created_at":"2024-10-12T18:28:12.392Z","updated_at":"2025-09-16T03:53:30.446Z","avatar_url":"https://github.com/scriptex.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n![Create PWA Logo](https://raw.githubusercontent.com/scriptex/create-pwa/master/create-pwa.svg?sanitize=true)\n\n\u003c/div\u003e\n\n[![Travis CI](https://travis-ci.com/scriptex/create-pwa.svg?branch=master)](https://travis-ci.com/scriptex/create-pwa)\n[![Github Build](https://github.com/scriptex/create-pwa/workflows/Build/badge.svg)](https://github.com/scriptex/create-pwa/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/create-pwa/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/create-pwa\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-create-pwa-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/create-pwa/badge)](https://www.codefactor.io/repository/github/scriptex/create-pwa)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/create-pwa/README.md?pixel)](https://github.com/scriptex/create-pwa/)\n\n# Create PWA (Create a Progressive Web Application)\n\n\u003e Easily create a Progressive Web Application\n\n## About\n\n`create-pwa` is a module for quick scaffolding and producing of progressive web applications.\n\n`create-pwa` adds the minimum required boilerplate which your app requires in order to become a PWA.\n\n`create-pwa` can be used with existing applications or can be the first thing one does when starting a new app.\n\n## Visitor stats\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/create-pwa?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/create-pwa?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/create-pwa?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Code stats\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/create-pwa)\n![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/create-pwa?style=plastic)\n![GitHub language count](https://img.shields.io/github/languages/count/scriptex/create-pwa?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/scriptex/create-pwa?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/create-pwa?style=plastic)\n\n## Dependencies\n\nIn order to use this module, you must have NodeJS installed and NPM or Yarn available.\n\n**You also need a bash shell installed and configured - default on OSX and linux or [Git bash](https://git-scm.com/downloads) on Windows.**\n\n## Install\n\n```sh\n# Using NPM:\nnpm i create-pwa --save-dev\n\n# Using Yarn\nyarn add create-pwa --dev\n```\n\n## Arguments\n\n1. `icon`: Specifies a relative path to the application icon. **Should be a `.png` file.**\n\nThis path is relative to the folder you are located in. It is recommended that the icon file is at least a 512x512 pixels square.\n\n**The `icon` argument is not required.**\n\nIf the `icon` argument is not provided, the [default icon](https://github.com/scriptex/create-pwa/blob/master/icon.png) is used.\n\n2. `launch`: Specifies a relative path to the application launch (splash) screen. **Should be a `.png` file.**\n\nThis 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.\n\n**The `launch` argument is not required.**\n\nIf the `launch` argument is not provided, the [default launch screen](https://github.com/scriptex/create-pwa/blob/master/launch.png) is used.\n\n3. `output`: Specifies a relative path to the output directory.\n\nThis path is relative to the folder you are located in.\n\n**The `output` argument is not required.**\n\nIf 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).\n\n## Usage\n\nIf you want to use if from the command line, you should first install Create PWA globally:\n\n```sh\nnpm i -g create-pwa\n\n# or\n\nyarn global add create-pwa\n```\n\nThen, navigate to your application's folder:\nThen run the install command (see above)\n\n```sh\ncd your/app/folder\n\ncreate-pwa --icon=\"./icon.png\" --launch=\"./launch.png\"\n```\n\nYou can also use `create-pwa` as a package.json script (in this case you don't need to install the package globally):\n\n```json\n{\n\t\"scripts\": {\n\t\t\"pwa\": \"create-pwa --icon=\\\"path/to/your/icon.png\\\" --launch=\\\"path/to/your/launch.png\\\"\"\n\t}\n}\n```\n\nThe above commands will generate:\n\n-   a `manifest.json` and a `service-worker.js` files\n-   several (8) png icons in the `/icons/` folder in your app's root folder\n-   several (19) favicons in the `/favicons` folder in your app's root folder\n-   several (20) launch screen images in the `launch-screen` folder in your app's root folder\n-   a `config.xml` file in your app's root folder - this file is required in Microsoft's browsers\n\nYou can edit the contents of the `manifest.json` and `service-worker.js` files.\n\nTheir default content is based on industry's best practices and is highly opinionated.\n\nIn order to create a customized experience for your users, feel advised to revise and edit the contents of the above files.\n\nWhen the files(`manifest.json` and `service-worker.js`) are ready for production, you need to let the world know about them:\n\nFeel adviced to edit the content of the `\u003cTileColor\u003e` tag in the `config.xml` file as it matches the color of your application's status bar on Chrome (found in the `\u003cmeta name=\"color\" /\u003e` tag);\n\n1. Add the following to the `head` of your HTML file(s):\n\n```html\n\u003clink rel=\"manifest\" href=\"manifest.json\" /\u003e\n```\n\nYou can read more about the Web App Manifest [here](https://developers.google.com/web/fundamentals/web-app-manifest/).\n\n2. Add the following snippet to your application's JavaScript bundle or place it in a `script` tag just before the closing `\u003c/body\u003e` tag in your HTML file(s):\n\n```javascript\nif ('serviceWorker' in navigator) {\n\twindow.addEventListener('load', () =\u003e {\n\t\tnavigator.serviceWorker.register('./service-worker.js').then(\n\t\t\tregistration =\u003e {\n\t\t\t\tconsole.log(`ServiceWorker registration successful with scope: ${registration.scope}`);\n\t\t\t},\n\t\t\terror =\u003e {\n\t\t\t\tconsole.log(`ServiceWorker registration failed: ${error}`);\n\t\t\t}\n\t\t);\n\t});\n}\n```\n\nThe code above checks for service worker support and then registers a service worker located in the `service-worker.js` file in the root of the project.\n\nYou can read more about Service Workers [here](https://developers.google.com/web/fundamentals/primers/service-workers/).\n\nAfter that, add references to all icons which were generated by `create-pwa`:\n\n3. Add the following favicons and meta tags in the `head` of your HTML file(s):\n\nFor more info about the favicons and meta tags below see [here](https://github.com/audreyr/favicon-cheat-sheet).\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView favicons and meta tags\u003c/summary\u003e\n\n```html\n\u003c!-- All Apple touch icons for iPad, iPhone, iPod --\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"favicons/apple-touch-icon-57x57.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"favicons/apple-touch-icon-60x60.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"favicons/apple-touch-icon-72x72.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"favicons/apple-touch-icon-76x76.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"favicons/apple-touch-icon-114x114.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"favicons/apple-touch-icon-120x120.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"favicons/apple-touch-icon-144x144.png\" /\u003e\n\u003clink rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"favicons/apple-touch-icon-152x152.png\" /\u003e\n\n\u003c!-- All favicon sizes - for all devices and browsers --\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"favicons/favicon-196x196.png\" sizes=\"196x196\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"favicons/favicon-96x96.png\" sizes=\"96x96\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"favicons/favicon-32x32.png\" sizes=\"32x32\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"favicons/favicon-16x16.png\" sizes=\"16x16\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"favicons/favicon-128x128.png\" sizes=\"128x128\" /\u003e\n\n\u003c!-- A favicon with four different sizes --\u003e\n\u003clink rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicons/favicon.ico\" /\u003e\n\n\u003c!-- Application color for Microsoft Windows app tile and Android status bar --\u003e\n\u003cmeta name=\"theme-color\" content=\"#edc22e\" /\u003e\n\u003cmeta name=\"msapplication-TileColor\" content=\"#edc22e\" /\u003e\n\n\u003c!-- Application name for Microsoft Windows app tile --\u003e\n\u003cmeta name=\"application-name\" content=\"Create PWA\" /\u003e\n\n\u003c!-- Application icons for Microsoft Windows app tile --\u003e\n\u003cmeta name=\"msapplication-TileImage\" content=\"favicons/ms-tile-144x144.png\" /\u003e\n\u003cmeta name=\"msapplication-square70x70logo\" content=\"favicons/ms-tile-70x70.png\" /\u003e\n\u003cmeta name=\"msapplication-square150x150logo\" content=\"favicons/ms-tile-150x150.png\" /\u003e\n\u003cmeta name=\"msapplication-wide310x150logo\" content=\"favicons/ms-tile-310x150.png\" /\u003e\n\u003cmeta name=\"msapplication-square310x310logo\" content=\"favicons/ms-tile-310x310.png\" /\u003e\n\n\u003c!-- Application config file for Microsoft browsers --\u003e\n\u003cmeta name=\"msapplication-config\" content=\"config.xml\" /\u003e\n```\n\n\u003c/details\u003e\n\n4. (Optional) Add the following launch screens in the `head` of your HTML file(s):\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView launch screens\u003c/summary\u003e\n\n```html\n\u003c!-- 12.9\" iPad Pro Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2048x2732.png\"\n\tmedia=\"(device-width: 2048px) and (device-height: 2732px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!-- 12.9\" iPad Pro Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2732x2048.png\"\n\tmedia=\"(device-width: 2732px) and (device-height: 2048px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  11\" iPad Pro Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1668x2388.png\"\n\tmedia=\"(device-width: 1668px) and (device-height: 2388px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  11\" iPad Pro Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2388x1668.png\"\n\tmedia=\"(device-width: 2388px) and (device-height: 1668px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!-- 10.5\" iPad Pro Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1668x2224.png\"\n\tmedia=\"(device-width: 1668px) and (device-height: 2224px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!-- 10.5\" iPad Pro Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2224x1668.png\"\n\tmedia=\"(device-width: 2224px) and (device-height: 1668px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  9.7\" iPad Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1536x2048.png\"\n\tmedia=\"(device-width: 1536px) and (device-height: 2048px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  9.7\" iPad Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2048x1536.png\"\n\tmedia=\"(device-width: 2048px) and (device-height: 1536px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--7.9\" iPad mini 4 Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1536x2048.png\"\n\tmedia=\"(device-width: 1536px) and (device-height: 2048px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--7.9\" iPad mini 4 Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2048x1536.png\"\n\tmedia=\"(device-width: 2048px and (device-height: 1536px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone XS Max Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1242x2688.png\"\n\tmedia=\"(device-width: 1242px and (device-height: 2688px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone XS Max Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2688x1242.png\"\n\tmedia=\"(device-width: 2688px) and (device-height: 142px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone XS Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1125x2436.png\"\n\tmedia=\"(device-width: 1125px) and (device-height: 236px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone XS Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2436x1125.png\"\n\tmedia=\"(device-width: 2436px) and (device-height: 1125px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone XR Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-828x1792.png\"\n\tmedia=\"(device-width: 828px) and (device-height: 192px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone XR Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1792x828.png\"\n\tmedia=\"(device-width: 1792px) and (device-height: 28px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone X Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1125x2436.png\"\n\tmedia=\"(device-width: 1125px) and (device-height: 236px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone X Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2436x1125.png\"\n\tmedia=\"(device-width: 2436px and (device-height: 1125px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone 8 Plus Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1242x2208.png\"\n\tmedia=\"(device-width: 1242px and (device-height: 2208px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone 8 Plus Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2208x1242.png\"\n\tmedia=\"(device-width: 2208px) and (device-height: 1242px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone 8 Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-750x1334.png\"\n\tmedia=\"(device-width: 750px) and (device-height: 134px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone 8 Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1334x750.png\"\n\tmedia=\"(device-width: 1334px and (device-height: 750px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone 7 Plus Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1242x2208.png\"\n\tmedia=\"(device-width: 1242px and (device-height: 2208px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone 7 Plus Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2208x1242.png\"\n\tmedia=\"(device-width: 2208px) and (device-height: 1242px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone 7 Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-750x1334.png\"\n\tmedia=\"(device-width: 750px) and (device-height: 134px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone 7 Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1334x750.png\"\n\tmedia=\"(device-width: 1334px and (device-height: 750px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone 6s Plus Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1242x2208.png\"\n\tmedia=\"(device-width: 1242px and (device-height: 2208px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone 6s Plus Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-2208x1242.png\"\n\tmedia=\"(device-width: 2208px) and (device-height: 1242px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone 6s Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-750x1334.png\"\n\tmedia=\"(device-width: 750px) and (device-height: 134px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone 6s Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1334x750.png\"\n\tmedia=\"(device-width: 1334px) and (device-height: 50px) and (orientation: landscape)\"\n/\u003e\n\n\u003c!--  iPhone SE Portrait --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-640x1136.png\"\n\tmedia=\"(device-width: 640px) and (device-height: 136px) and (orientation: portrait)\"\n/\u003e\n\n\u003c!--  iPhone SE Landscape --\u003e\n\u003clink\n\trel=\"apple-touch-startup-image\"\n\thref=\"./launch-screens/launch-screen-1136x640.png\"\n\tmedia=\"(device-width: 1136px) and (device-height: 640px) and (orientation: landscape)\"\n/\u003e\n```\n\n\u003c/details\u003e\n\nIn order to have the launch screens shown on an iOS device you also need to tell the device it is dealing with a web app:\n\n```html\n\u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\" /\u003e \u003cmeta name=\"mobile-web-app-capable\" content=\"yes\" /\u003e\n```\n\nThe formet works on **Safari** on all iOS devices.\nThe latter works on **Google Chrome** on all iOS devices.\n\n**Android devices** show splash screen based on the data provided in the `manifest.json` file: `icons`, `name`, etc.\n\n5. (Optional) Add the following attribute to your `html` tag: `manifest=\"\u003cYOUR_APP_NAME\u003e.appcache\"`. It should look something like this:\n\n```html\n\u003chtml lang=\"en\" manifest=\"create-pwa.appcache\"\u003e\n\t\u003c!-- More awesome HTML code here --\u003e\n\u003c/html\u003e\n```\n\nThis will enable application cache and will cache all files listed in the `.appcache` file.\nApplication cache is currently deprecated in most evergreen browsers and will probably be removed soon.\nThis, however, does not mean that you can not use it in older browsers (for example IE 11).\n\nYou can read more about Application Cache [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache)\n\n## More info\n\nThere is a lot information about Progressive Web Applications on the Internet.\nIn order to comply with browser's requirements and pass the audits you need to check out and fulfill the [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).\n\nThe entries listed in **Baseline Progressive Web App Checklist** are mandatory and without them your web app will not qualify as a PWA.\n\nIf you wish to test your web app's compliance, you can use the Chrome's built-in Lighthouse tool (found under the _Audits_ tab in the Developer tools).\n\n## NodeJS API\n\nYou can generate each of the components above separately using the Create PWA API in NodeJS:\n\n1. To create only an `appcache` file:\n\n```javascript\nconst { setAppCache } = require('create-pwa');\nconst appName = 'Your application name';\nconst distFolder = 'dist';\n\nsetAppCache(appName, distFolder);\n```\n\n**The generated `appcache` file contains references to the application icons and application launch screens. You must have these already generated otherwise you must edit your `appcache` file and remove them.**\n\n2. To create only the application icons:\n\n```javascript\nconst { setIcons } = require('create-pwa');\nconst appIcon = require('fs').resolve(__dirname, './your_icon.png');\nconst distFolder = 'dist';\n\nsetIcons(appIcon, distFolder);\n```\n\n**The generated icons are located in the `/icons` folder.**\n\n3. To create only the launch screens:\n\n```javascript\nconst { setLaunchScreens } = require('create-pwa');\nconst launchScreen = require('fs').resolve(__dirname, './your_launch_screen.png');\nconst distFolder = 'dist';\n\nsetLaunchScreens(launchScreen, distFolder);\n```\n\n**The generated files are located in the `/launch-screens` folder.**\n\n4. To create only manifest file:\n\n```javascript\nconst { setManifest } = require('create-pwa');\nconst appName = 'Your application name';\nconst distFolder = 'dist';\n\nsetManifest(appName, distFolder);\n```\n\n**The generated `manifest.json` file contains references to the application icons. You must have these already generated otherwise you must edit your `manifest.json` file and remove them.**\n\n5. To create only favicon files:\n\n```javascript\nconst { setFavicons } = require('create-pwa');\nconst appIcon = require('fs').resolve(__dirname, './your_icon.png');\nconst distFolder = 'dist';\n\nsetFavicons(appIcon, distFolder);\n```\n\n**The generated files are located in the `/favicons` folder.**\n\n6. To create only service worker file:\n\n```javascript\nconst { setServiceWorker } = require('create-pwa');\nconst appName = 'Your application name';\nconst distFolder = 'dist';\n\nsetServiceWorker(appName, distFolder);\n```\n\n**The generated `service-worker.js` file contains references to the application icons and application launch screens. You must have these already generated otherwise you must edit your `service-worker.js` file and remove them.**\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fcreate-pwa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Fcreate-pwa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fcreate-pwa/lists"}