ragingwind / next-manifest Goto Github PK

View Code? Open in Web Editor NEW

76.0 2.0 13.0 58 KB

Next.js plugins for Web Manifest and PWA

Home Page: https://next-manifest.ragingwind.now.sh/manifest.json

License: MIT License

JavaScript 100.00%

next-manifest's Introduction

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

yarn add next-manifest

Usage

// next.config.js
const withManifest = require('next-manifest');
const defaults = {
  // next-manifest options
  output: './static/', // The folder where the manifest will be generated.
  // 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

next-manifest's People

Contributors

Stargazers

Watchers

Forkers

highlabs justinphilpott shawninder sonnyp ahwswebdev efleurine yzrsah garnerp cam664 tomevans18 screamz hipstersmoothie glifehenry

next-manifest's Issues

Build fail il API don't respond

Hello :

> next build

Creating an optimized production build ...


Found experimental config:
Experimental features can change at anytime and aren't officially supported (use at your own risk).

(node:47837) UnhandledPromiseRejectionWarning: FetchError: request to https://api.lipo.io/ failed, reason: socket hang up

Seems like the lipo API is dead, could be nice to display a warning and continue build instead…

Thanks

Generate /manifest inside .next/static?

This is currently generating the /manifest folder inside $CWD/static. In my case, for example, the next app lives inside /app, so this is not compatible. Also, rather than "polluting" the user's /static, would it be possible to build into the .next/static generated folder? Don't know the details of how to do that, though, so it's food for thought.

Apart from that, this is looking good. Good job 👍

(Edit: same for next-workbox)

Generating icon sizes

Hi! o/

I'm trying to generate more icon sizes, but I tried:

// next.config.js
const withWorkbox = require("next-workbox");
const withManifest = require("next-manifest");

module.exports = withWorkbox(
	withManifest({
		manifest: {
			icons: [
				{
					src: "./assets/icon-512x512.png",
					sizes: [
						16,
						192,
						512
					],
					cache: true
				}
			]
		}
	})
);

But only generate 192 and 512 icon. :/

Does not build manifest on Zeit Now deployments

When you run now dev or now no manifest is created.
This is because it only triggers on a next build.

Another possible issue is the fact that the manifest is added to the static folder.
This might not be possible and why other plugins use the .next folder to server built time generated files.

A temporary work around is to run a next build prior to running now dev or now as this creates the files and then uses/pushes them to the server.

No more icon generating ?

Hello :)

No more icons generation for people not using now ?

Why ? :) https://github.com/ragingwind/pwa-manifest-icons seems to handle this

Regards

Asset prefixing

If i'm hosting my website on www.myapp.com/product, will I be able to load the manifest? in next-offline, we use the assetPrefixing option to load source files from the prefixed location.

    {
      registerSwPrefix: assetPrefix
    }

breaks next-offline

next-manifest looks nice! I am using next-offline for service worker and wanted something additional to give me pwa manifest. When I add this to my current project, the service worker stops working. It would be awesome to either make them compatible or document why they can't be used together.

Failed to install on MacBook M1

MacBook M1
Node 18.16.0

❯ npm add @pwa/manifest-icons
npm ERR! code 1
npm ERR! path /Users/daniilpronin/FEIP/feip-dev-next-js/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

...

npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/daniilpronin/.npm/_logs/2023-07-14T01_25_14_536Z-debug-0.log

I checked next-manifest dependencies and tried to install each separately:

❯ npm add @pwa/manifest           

added 53 packages, removed 51 packages, and audited 1175 packages in 2s

❯ npm add @pwa/manifest-icons             
npm ERR! code 1

…

Error caused by old sharp version from @pwa/manifest-icons.

We can fix it by NPM overrides:

"overrides": {
    "@pwa/manifest-icons": {
      "sharp": "^0.32.2"
    }
  }

broken as of Next.js 8.0.2

Next.js 8.0.1 - works

Next.js 8.0.2 - exporting withManifest() produces:

Entry module not found: Error: Can't resolve './src' in '/Users/foo/site'
_document.js chunk not found

adding link of this plugin on official plugin repo

Hi,

Thanks a lot for this awesome plugin. I especially found the Manifest component quite cool. When I was trying to make my web app PWA, I found that this plugin combined with next-offline made a perfect combo. However, as this plugin was not listed in official next repo, I wasted few hours looking for appropriate way to create manifest file. Given that manifest file is pretty much mandatory for proper PWA, wouldn't it be better if you can create a pull request to add a link for this plugin on nextjs plugins official repo to help others looking for solving the same problem?

TypeScript

Just tried to use it with TS, here's module augmentation I did:

next-manifest.d.ts

declare module 'next-manifest/manifest' {
    import { FC } from 'react';
    type ManifestProps = Partial<{
        href: string;
        themeColor: string;
        initialScale: string;
    }>;
    const Manifest: FC<ManifestProps>;
    export default Manifest;
}

Does this support Next Environment variables

From Next.js 9.4 introduced different env support Env.

Does this supports using these env variables inside the config?