pwa-utils

0.2.2 • Public • Published

pwa-utils

build status coverage npm dependencies

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:

import {setupWebApp} from 'pwa-utils'
setupWebApp()

This will copy src/favicon.png to dist/ and generate dist/manifest.json, dist/index.html:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>My App</title>
  <meta charset="utf-8" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#00000" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="manifest" href="/manifest.json" />
  <link rel="shortcut icon" href="/favicon.png" />
</head>
 
<body>
  <div id="root"></div>
  <script src="bundle.js"></script> 
</body>
 
</html>

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:

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.

Package Sidebar

Install

npm i pwa-utils

Weekly Downloads

2

Version

0.2.2

License

Unlicense

Unpacked Size

40.2 kB

Total Files

9

Last publish

Collaborators

  • dk00