Build a PWA App With Nuxt

Let’s dive in and get a better understanding of what PWAs are all about. 😎

nuxt-pwa-app

Smartphones changed the way businesses interact with their customers. It’s not easy to be a growing business and ignore the ‘mobile’ opportunity.

Users are spending more time on their mobiles than ever. Ericsson Mobility Report predicts a 25% increase is expected in mobile traffic by 2025. Also, the average person is spending more time on their phone than before.

What is a Progressive Web Application? 🤔

Progressive Web Applications (PWAs) are apps built with web technologies that we probably all know and love, like HTML, CSS, and JavaScript. But they have the feel and functionality of an actual native app.

Native Apps?? what do we mean by this now?🧐

You’ve been using native mobile apps since the beginning of the smartphone era.

A native mobile app is installed from app stores on iOS or Android. They’re built to utilize the hardware capabilities of a particular mobile device and deliver an engaging user experience.

Now back to our topic!!!

PWAs are developed using modern JavaScript frameworks — designed to give a near-native experience and can be installed on a mobile device instantly.

Rolled out by Google in 2015, the PWA technology improves the mobile web experience and offers the following advantages:

1. Engagement: Push notifications and faster load timings on mobile phones boost engagement.

2. Offline Usage: PWAs can work on unstable connections and even when users are offline (thanks to pre-caching). So, the website loads reliably and is never down.

3. Lowering bounce rates: A better user experience means a lower bounce rate. Since PWAs are capable and reliable no matter the devices and network your users are using, you can expect blazing-fast and optimized performance.

Let’s add Pwa in our Nuxt web app 😍

1. First, we need to install the @nuxtjs/pwa

nuxt-pwa

yarn add @nuxtjs/pwa  
or  
npm i @nuxtjs/pwa

2. Add the module to your nuxt.config.js file

nuxt-config-js

3. Add an icon to your static folder

• The image must be 512*512

And that’s it you now have a PWA up and running 😜

Yeah I know it’s shocking this was my reaction the very first time I built my PWA app using the nuxt.js.

Wait!!! we can do more than that just go to your nuxt.config.js file and customized your app 😍

There are two more modules we can setup for our PWA app

1. Workbox Module

Workbox is a collection of JavaScript libraries for Progressive Web Apps. (Learn more). This module adds full offline support using a workbox.

pwa: {  
  workbox: {  
    /* workbox options */  
  }  
}

2. OneSignal Module

If you need the push notification service for websites and mobile applications OneSignal is the best choice.

1. First we need to install the @nuxtjs/onesignal

OneSignal-nuxt-pwa-app

yarn add @nuxtjs/onesignal
or
npm install @nuxtjs/onesignal

2. Add @nuxtjs/onesignal BEFORE @nuxtjs/pwa to the modules section of nuxt.config.js

onesignal-modules

3. Add oneSignal options to nuxt.config.js

oneSignal-setup-nuxt-js

Awesome! We did it 😍 Hopefully this article helps you.😇

Thanks a lot for reading till the end 🙏 If you liked the article, please give likes and share it with your others.

Email: atul19251@gmail.com

Web: https://iamatul.netlify.app/

Github: https://github.com/iamrajput

LinkedIn: https://www.linkedin.com/in/atul-kumar-singh-673357102/