Socket
Socket
Sign inDemoInstall

next-manifest

Package Overview
Dependencies
163
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-manifest

Next.js plugins for Web Manifest and PWA


Version published
Maintainers
1
Weekly downloads
232
increased by22.75%

Weekly downloads

Readme

Source

next-manifest

Next.js plugin for Web Manifest and PWA

Updates

  • After 3.x, icon generating is deprecated because of worker_threads is not supported on now platform.

Installation

npm install --save next-manifest

or

yarn add next-manifest

Usage

// next.config.js
const withManifest = require('next-manifest');
const defaults = {
  // next-manifest options
  outout: './static'/',
  // manifest options
  name: 'PWA',
  icons: [
    {
      "src": "/static/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
module.exports = withManifest({
  manifest: {
    ...defaults
  }
});

manifest.json

After build is over without errors, manifest.json will be created at output

Deploying a manifest with more meta for PWA

Web manifest must be declared in your HTML pages using a link tag at the head of your document. Not only manifest link, also both of meta, viewport and theme-color will be needed for your PWA, like below:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/static/manifest/manifest.json" />

for your convenience, this plugin supports Manifest component. You can place Manifest component under <Head> component in _document.js with props.

// pages/_document.js
import Manifest from 'next-manifest/manifest'

<Head>
  <Manifest />
</Head>

if you want to update the values in tags, pass the content and href value to the component

// pages/_document.js
import Manifest from 'next-manifest/manifest'

<Head>
  <Manifest
    // path for manifest will be deploying
    href='/static/manifest/manifest.json'
    // color for `theme-color`
    themeColor='#F0F0F0'
    // scale for `viewport` meta tag
    initialScale='1'
  />
</Head>

See the example project to understand.

License

MIT © Jimmy Moon

Keywords

FAQs

Last updated on 11 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc