Integrating PWA in a Next.js App
Tags: pwa, nextjs, react, frontend
Published: 2024-05-23 12:52:59

## Introduction

   Progressive Web Apps (PWAs) combine the best features of web and mobile applications, offering offline capabilities, push notifications, and the ability to install the app on a user’s device. For a detailed overview of PWAs, refer to my previous article [The Evolution and Necessity of Progressive Web Apps.](https://dev.to/wafa_bergaoui/the-evolution-and-necessity-of-progressive-web-apps-pwas-42pl)

This guide will take you through the steps to integrate a PWA into your Next.js application.

## Steps to Integrate PWA in Next.js

**1. Initial Setup**

Ensure you have a Next.js app set up. If not, create one using:

```
npx create-next-app@latest pwa-app
cd pwa-app
```

**2. Install Dependencies**

Install the **next-pwa** package to add PWA capabilities to your app:

```
npm install next-pwa
OR
yarn add next-pwa
```

**3. Configure next.config.js**
 
Modify `next.config.js` to use the **next-pwa** plugin:

```javascript
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
});

module.exports = withPWA({
  // Your existing Next.js configuration
});

```

**4. Create a Manifest File**

- Add a `manifest.json` file in the public directory. This file contains metadata about your web application, including details such as the app's name, short name, theme color, and icons.
- You can create this file manually or use online tools like:

   - [SimiCart Manifest Generator](https://www.simicart.com/manifest-generator.html/)

   - [Manifest Generator](https://manifest-gen.netlify.app/)
- Example `manifest.json`:

```json
{
  "name": "Progressive Web App",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```
- Save the `manifest.json` file in the `/public` directory of your project.

**5. Service Worker Setup**

The **next-pwa** plugin handles the creation and configuration of the service worker for you. Ensure the public directory is configured correctly for caching and offline capabilities.

**6. Link Manifest in `_document.js`**

Modify the `_document.js` file to include the manifest file and specify theme colors:

```javascript
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="manifest" href="/manifest.json" />
          <meta name="theme-color" content="#000000" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

```

**7. Use VSCode Extension for PWA Development**

Enhance your PWA development with the [PWA Builder VSCode extension](https://marketplace.visualstudio.com/items?itemName=PWABuilder.pwa-studio). This tool helps generate PWA assets, configure service workers, and more, streamlining the PWA integration process.

**8. Check Validation**

- Run your app, and you should see an install prompt in the address bar, allowing users to install your PWA like a native app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2zfhui7y4y07liobw6b.png)
- Verify your PWA using the PWA audit in Lighthouse (available in Chrome DevTools). Note that you need to deploy your app for this to work.

**9. Additional Steps: Git Configuration**

Add the following to your `.gitignore` to exclude files generated by **next-pwa**:

```gitignore
# PWA files
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map

```

**10. Bonus: Optimize for Mobile Devices**

- To avoid unwanted scroll behavior on iOS Safari:

```html
<Head>
  <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width"></meta>
</Head>

```

```css
.someContainerClass {
  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}

@supports (-webkit-touch-callout: none) {
  .someContainerClass {
    height: -webkit-fill-available;
  }
}

```
- Alternatively, set the container position:

```css
.containerClass {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0;
}

```
- To hide the virtual keyboard on enter key press:

```javascript
const hideVirtualKeyboard = () => {
  const inputElements = document.getElementsByTagName("input");
  Array.from(inputElements).forEach((input) => {
    input.blur();
  });
};

```

Integrating PWA into your Next.js application not only improves the user experience but also increases engagement and accessibility, making it a valuable addition to any modern web project.

## Conclusion

   By following these steps and utilizing these resources, you can ensure your Next.js app leverages the full power of Progressive Web Apps, providing an enhanced, app-like experience for your users. This integration not only makes your application more accessible and engaging but also significantly improves performance and user satisfaction. Embrace the future of web development with PWAs in your Next.js projects!