Skip to content

Template for setting up PWA (Progressive Web App) site mode

Notifications You must be signed in to change notification settings

eugeneviktorov/pwa-on-nextjs-template

Repository files navigation

PWA-ON-NEXTJS-TEMPLATE

This project is a template for setting up a PWA (Progressive Web App) site mode. It includes a custom install button and support for all types of alert responses for various types of browsers. And also display a notification about disconnecting the Internet connection. Template icon Figma


Features

  • PWA support: Includes all the necessary settings for the PWA site to work.
  • Custom install button: User can easily install the application on their device.
  • Custom install button - alerts: Support for alerts for various types of browsers.
  • Offline alert: Support offline notification about internet outage.

Installation

1. Installing the next-pwa library

Install the next-pwa library using instructions from the official library documentation

npm install next-pwa

2. Configuration next.config.js

Customize the code in the next.config.js file to suit your projects.

3. Creating manifest.json

Use manifest.json in the public folder with the specified settings.

4. Service worker

The service-worker.js file in the public folder is created automatically by the next-pwa library when you run or build a project with your own code.


PWA work

As a result of the latest updates from Google, PWA works correctly only when using hosting and a configured SSL certificate on the domain name.


Contribution

If you have suggestions or find bugs, please create an issue or open a pull request.




NextJs Starting

This is a Next.js project bootstrapped with create-next-app.


Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.


Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!