https://github.com/dk00/pwa-utils
https://github.com/dk00/pwa-utils
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dk00/pwa-utils
- Owner: dk00
- License: unlicense
- Created: 2018-10-23T03:01:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-16T05:30:11.000Z (almost 6 years ago)
- Last Synced: 2025-10-23T20:05:32.274Z (7 months ago)
- Language: LiveScript
- Size: 265 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pwa-utils
[](//travis-ci.org/dk00/pwa-utils)
[](//codecov.io/gh/dk00/pwa-utils)
[](//npm.im/pwa-utils)
[](//david-dm.org/dk00/pwa-utils)
Generate `manifest.json`, `index.html`, `favicon.png` for creating Progressive Web Apps.
## Installation
Install the package with npm:
`$ npm i -D pwa-utils`
## Usage
Add the plugin to webpack config:
```diff
+ const {GenerateWebApp} = require('pwa-utils')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
+ plugins: [
+ new GenerateWebApp({
+ name: 'My App'
+ })
+ ]
}
```
and add runtime into your entry file:
```js
import {setupWebApp} from 'pwa-utils'
setupWebApp()
```
This will copy `src/favicon.png` to `dist/` and generate `dist/manifest.json`, `dist/index.html`:
```html
My App
```
## Options
**`name`**
**inlineFirstRender** (Coming soon)
(true | false, default: true)
Add rendered HTML to root element of `index.html`, to get first meaningful paint before js is loaded.
**inlineCritical** (Coming soon)
(true | false | string, default: true)
Inline `index.css` or specified file to reduce render-blocking.
**scripts / styles**
Override scripts or stylesheets to be included in `index.html`.
[`manifest.json` options](https://developers.google.com/web/fundamentals/web-app-manifest/):
`shortName`, `icons`, `backgroundColor`, `themeColor`, `startUrl`
Default options is:
```yml
icons: [
{
src: '/favicon.png'
type: 'image/png'
sizes: '192x192'
}
{
src: '/favicon.png'
type: 'image/png'
sizes: '512x512'
}
]
display: 'standalone'
backgroundColor: '#000000'
themeColor: '#000000'
startUrl: '/?source=pwa'
```
**React**
Override React implementation.
```yml
{
React: {
createElement: require('custom-react')
renderToString: require('custom-react-dom').renderToString()
}
}
```
## Technical
`emit` event of Webpack is hooked to add `.js` / `.css` assets.
Js bundles need to be includes in proper order to work correctly, so these are sorted topologically.
CSS files are added in original order.