⚡️ Set up Next.js Progressive Web App with `npx create-next-pwa`

  • By Saad Irfan ⚡️
  • Last update: Nov 20, 2022
  • Comments: 7

cover

⚡️ create-next-pwa

version downloads license nominate @msaaddev for GitHub Star

A cross-platform Node.js based CLI tool that creates Progressive Web App (PWA) with Next.js. You can also integrate tailwind with the Next.js PWA using this CLI with a single command.

separator

  • Simple: One command Next.js Progressive Web App setup
  • Cross-platform: Works on all available operating systems including Linux, macOS, and Windows
  • Support: Also supports TypeScript Next.js PWA with --typescript flag
  • Tailwind: Instantly integrate Tailwind using --tailwind flag in your Next.js PWA.
  • Prettier: Integrated Prettier to easily format the code with npm run format
  • MIT Licensed: Free to use for personal and commercial use.

Note: If you are on Windows, make sure to either use Command Prompt or Windows Powershell to run the CLI.

📦 Installation

# install the CLI globally
npm i -g create-next-pwa

# use it with npx (recommended)
npx create-next-pwa [app_name]

🚀 Usage

Navigate to the folder you want to have your Next.js PWA.

# using npx
npx [email protected] [app_name]

# if you have installed globally
create-next-pwa [app_name]

# to use Next.js with Typescript
create-next-pwa [app_name] --typescript

# Next.js PWA with tailwind integration using npx
npx [email protected] [app_name] --tailwind

# Next.js PWA with tailwind integration if you have globally installed the CLI
create-next-pwa [app_name] --tailwind

# without giving app name in terminal using npx
npx [email protected]

# without giving app name in terminal using npx and tailwind integration
npx [email protected] --tailwind

# without giving app name in terminal if installed globally
create-next-pwa

# without giving app name in terminal if install globally along with tailwind integration
create-next-pwa --tailwind

help

🎩 Demo

# using npx
npx create-next-pwa [app_name]

with npx

# integrate tailwind in the Next.js PWA
npx create-next-pwa [app_name] --tailwind

integration of tailwind

# if you have installed globally
create-next-pwa [app_name]

usage with app name

# you can also just use the create-next-pwa command
create-next-pwa

usage without app name

👨🏻‍💻 Contributing

Make sure you read the contributing guidelines before opening a PR. If you want something else to integrate with the CLI like I have done with tailwind, open an issue in the repository and I will get back to it.

⚡️ Other Projects

I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.

🔑 License & Conduct

Github

https://github.com/msaaddev/create-next-pwa

Comments(7)

  • 1

    ERROR: Couldn't convert Next.js app to PWA.

    image

    I'm using your npm package ( installed global ) and tried to create an pwa ( with and without tailwind ) in vscode ( Terminal ), PS Admin and normal Powershell.

  • 2

    Outdating dependencies future problem

    Since I have a template package.json file that I am using for Next.js PWAs and Tailwind, the dependencies in them will outdate over time. So I need to fix it by figuring a way where I don't have to use package.json files like this.

  • 3

    📦NEW: Cross Platform Integration

    In this PR, I have implemented the following:

    • [x] Wrapped exec child process method inside promise
    • [x] Using this new promise to install dependencies
  • 4

    npm --prefix not working for windows

    I would need to use process.chdir() to install packages and format code. But for that, I need a way to exit from Node process without terminating the program.

  • 5

    next.config.js, [WebpackGenerateSW] 'pwa' property is not expected to be here.

    error - Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'pwa' property is not expected to be here.

    Found a solution here:

    https://github.com/shadowwalker/next-pwa/issues/392

    I changed my next.config.js to this to get the error to go away:

    const withPWA = require('next-pwa')({
	dest: 'public',
	register: true,
	skipWaiting: true
})

module.exports = withPWA({
	reactStrictMode: true,
	// put other next js options here
  });
  • 6

    Empty manifest.json

    Minor issue:

    manifest.json was empty

    When I ran

    npx [email protected] --typescript --tailwind myapp

    I pasted in the following:

    {
    "name": "MyApp",
    "short_name": "MyApp",
    "theme_color": "#ffffff",
    "background_color": "#004740",
    "display": "fullscreen",
    "orientation": "any",
    "scope": "/",
    "start_url": "/",
    "icons": [{
      "src": "/icons/favicon.svg",
      "sizes": "48x48 72x72 96x96 128x128 144x144 152x152 192x192 256x256 384x384 512x512",
      "type": "image/svg+xml",
      "purpose": "any"
    }],
    "splash_pages": null
  }
  • 7

    Cannot make it instalable with Github pages

    I'm trying to make a static pwa with next.js and tailwind.

    Steps

    1. Use create-next-pwa:
    npx create-next-pwa pwa-test --tailwind
    1. Install gh-pages dependency and update package.json
    "scripts": {
	"dev": "next dev",
	"build": "next build && next export",
	"start": "next start",
	"format": "prettier --write \"./**/*.{js,json}\"",
	"predeploy": "npm run build",
	"deploy": "gh-pages -d out -t true"
},
    1. Update next.config.js
    const withPWA = require('next-pwa');

module.exports = withPWA({
	basePath: '/temp',
	pwa: {
		dest: 'public',
		register: true,
		skipWaiting: true
	}
});
    1. Run deploy script (you need to setup the remote repo) npm run deploy

    In development mode, the pwa is instalable and works fine. But when I run next export and add the static site to Github pages, I always get this error:

    No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

    image

Popular Tag

Related