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:
+ 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:
This will copy src/favicon.png
to dist/
and generate dist/manifest.json
, dist/index.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
.
shortName
, icons
, backgroundColor
, themeColor
, startUrl
Default options is:
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.
{ 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.