Quickly make a NextJS app installable with Chrome
Tags: nextjs, chrome, pwa, serviceworker
Published: 2023-08-12 19:07:02

---
title: Quickly make a NextJS app installable with Chrome
published: true
description: Quickly make a NextJS app installable with Chrome
tags: nextjs,chrome,pwa,serviceworker
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-12 18:39 +0000
---

In this article, I will show you how to quickly make your NextJS app installable with Chrome.

The goal is to provide the minimum code and assets necessary to activate this feature.

Let’s jump to the implementation and create our NextJS app:

```
npx create-next-app@latest
```
Select the options you want, I will answer "Yes" to everything except the last one:
```
✔ What is your project named? … nextjs-installable
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
```
Let’s test our app with:
```
cd nextjs-installable
npm run dev
```
Let's check with Chrome what the Lighthouse PWA report is saying about our app:

![First Lighthouse report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beo94zat6z0mt1bnoe6p.png) 

First, I will remove the line 31 and 40 from the `src/app/page.tsx` file as they are triggering the `Content does not size correctly to viewport` in the Lighthouse report and we don't need it for the topic of this article.

Now let's add all the missing features our report is complaining about.

Download any 512x512 PNG image, for example:
https://www.pngmart.com/fr/image/39454

Rename it and put it the following folder:
```
public/images/icon-512x512.png
```
Now create a `public/manifest.json` file with the following content, feel free to adapt it to your needs:
```
{
 "name": "NextJS Installable",
 "short_name": "Installable",
 "theme_color": "#000000",
 "background_color": "#000000",
 "display": "standalone",
 "scope": "/",
 "start_url": "/",
 "description": "Minimal configuration for a NextJS installable app",
 "icons": [
   {
     "src": "/icon-512x512.png",
     "sizes": "512x512",
     "type": "image/png"
   }
 ]
}
```
Open the `src/app/layout.tsx` and add a link to the `manifest.json` file along with the theme color of our app:
```
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  manifest: '/manifest.json',
  themeColor: '#000000',
}
```
Now create the service worker file called `public/sw.js` with one single line:
```
self.addEventListener('fetch', () => {});
```
and create another file to register our service worker called `public/register.sw` with the following content:
```
if ("serviceWorker" in navigator) {
  // declaring scope manually
  navigator.serviceWorker.register("/sw.js", { scope: "./" }).then(
    (registration) => {
      console.log("Service worker registration succeeded:", registration);
    },
    (error) => {
      console.error(`Service worker registration failed: ${error}`);
    },
  );
} else {
  console.error("Service workers are not supported.");
}
```
Finally let's link our `register-sw.js` file in our `src/app/layout.tsx`:
```
<html lang="en">
  <Script src='/register-sw.js' />
  <body className={inter.className}>{children}</body>
</html>
```
Let's re-run a Lighthouse report:
![Final Lighthouse report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq1iax8p1x0wqf2mqlma.png)

And finally, let's open our app with Chrome on our phone. Before that we will deploy it with [https://vercel.com](Vercel):

https://vercel.com/armelpingault/nextjs-installable

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea6jy4bjwfbb5ziu1tcd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug5mpztg4ymlv18x3a85.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b92v93z3d1qqfbej1f8q.png)

Source: https://github.com/armelpingault/nextjs-installable