Turn Your Next.js App into a Mobile Powerhouse (Easy PWA Guide)

Introduction:

Imagine this: Your users enjoy your Next.js app on their phones anytime, anywhere—even without internet! Plus, they receive push notifications for updates. all with a seamless phone-app-like experience. The best part? You can skip app store fees entirely!

This guide unveils a simple approach to transforming your app into an installable Progressive Web App (PWA).

Who is using PWA's?

I didn't know it before either, but i was surprised to find out that Twitter is actually a PWA! The experience was so smooth and indistinguishable from a traditional mobile app that it felt native.

But twitter isn't alone. Many companies have jumped on the PWA hype to enhance their apps.

• Starbucks: Their PWA streamlines mobile ordering and payment, making your coffee runs a breeze.
• Forbes: They use a PWA to deliver a smooth reading experience, even when you're offline and craving some knowledge.
• Alibaba: This e-commerce giant saw a huge boost in conversions (76%!) after implementing a PWA, proving its power in driving sales.

How do you convert your Nextjs app into a PWA?

Step1: Supercharge Your App with next-pwa

Let's dive into the technical side of transforming your Next.js app into a PWA. We'll achieve this with the help of next-pwa, a NextJS plugin package that simplifies PWA creation for Next.js projects.

Next-PWA essentially extends the Nextjs build process to include PWA functionalities like:

• Registering Service Workers: PWAs leverage service workers, background scripts that run even when the browser tab is closed. They enable features like offline access and push notifications. Since Javascript is single-threaded, these service workers act separately, ensuring smooth background operations without impacting your app's responsiveness.
• Smart Caching for Offline Experience:For a seamless offline experience, PWA's need to cache essential resources (HTML, CSS, JavaScript, images, etc.) locally.
• You can read more about next-pwa here next-pwa.

Just open your Nextjs project and type the following command on your terminal to install next-pwa as dependency.

npm install next-pwa

/** @type {import('next').NextConfig} */
import nextPwa from 'next-pwa'
const nextConfig = {
  // Your awesome nextjs config goes here
  // ....
};
const withPwa = nextPwa({

    dest:"public",
    register:true,
    skipWaiting:true,
     // important to avoid running the generation everytime on your local environment
    disable:process.env.NODE_ENV === 'development',


});
export default withPwa(nextConfig);

Step2: Generating a Manifest File.

To customize our app's appearance when installed on mobile or desktop devices, we are required to create a manifest.json file pointing to our app assets ( logo images in different sizes).

We can do that manually, but as it's a tedious, repetitive task, many online websites offer it. Feel free to use any third-party website, but for this tutorial, we will be using SimiCart.

You will be asked to enter some basic information, like your app name, description, theme color, etc.

After filling in all the fields, press on GENERATE MANIFEST.

Generate manifest.json from SimiCart

You should get a manifest.zip downloaded into your machine , after decompressing it you should see this files.

manifest.zip content

Rename the manifest.webmanifest into manifest.json and copy everything into your nextjs public directory.

Your NextJS public directory content should contain these highlighted green files.

As you you can see below, the manifest.A json file contains a simple json object pointing to your app logo assets, which you can easily write on your own.

{
    "theme_color": "#893DF7",
    "background_color": "#ffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "name": "Spithacode",
    "short_name": "Spithacode",
    "description": "Spithacode is your go-to destination for igniting your coding passion. Explore expert insights, tutorials, and resources in web development. Elevate your profile, share knowledge, and discover new job opportunities in the ever-evolving tech landscape",
    "icons": [
        {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

In your app/layout.tsx file, add an extra export of a constant object named metadata with the property manifest set to "manifest.json". Next.js 14 will automatically add a meta tag into your HTML head that points to your manifest.json located in the public directory.

export const metadata: Metadata = {
  manifest:"/manifest.json",

// ...rest of the metadata
};
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
<>{children}</>

  );
}

Additional note:

To avoid caching your next-pwa-generated assets during your deployment, consider adding these lines to your ".gitignore" file.

# to avoid caching pwa files

**/public/sw.js
**/public/sw.js.map

**/public/workbox-*.js
**/public/workbox-*.js.map

**/public/worker-*.js
**/public/worker-*.js.map

Step3 : Enjoy your PWA:

Run the next build command or deploy your newly configured app to Vercel.

After a succesfull build navigate into your website and run a lighthouse test by opening your browser devtools and navigating to the lighthouse tab.

open your browser devtools and navigating to the lighthouse tab

Lighthouse is running a mobile simulation test on your website to calculate many metrics and check if you're website is installable

Lighthouse is running a mobile simulation

Keep your breathing quite and wait for the results :) .

Congratulations ! your website is installable

Congratulations ! your website is installable, now go back to your website,

Visite the Website on your mobile phone.

If a popup asking you to install the app does not appear, look for the install button in your browser settings.

Find the install app option then press it

Smash that install button.

Confirm the installation.

Your PWA app is installed!

Congratulations your app is installed succesfully on your phone!

Conclusion:

Recap of the process:

This guide empowered you to transform your Next.js app into a powerful PWA. We explored the incredible benefits of PWAs, like offline access, push notifications, and bypassing app store or Google Play fees.

Remember the smooth mobile experience on Twitter? That's a PWA! Companies like Starbucks and Forbes are leveraging PWAs to enhance their apps for two reasons: it creates a fantastic user experience and boosts results.

Ready to take action? We showed you how to easily achieve this with next-pwa. This handy tool simplifies PWA creation by handling background functionality and caching for you !

You can even personalize your app's appearance with a manifest file.

Now it's your turn! Build your PWA and experience the advantages firsthand.

Share your results and any feedback in the comments below.