Modern web applications have a wide range of technologies, we have a lot of different techniques, concepts, frameworks, and libraries to implement web applications nowadays. Building a modern web application requires a lot of processes and hours to think, design, develop, and test the application.
Modern applications, to have a chance to succeed and attract users, should have a few qualities that are almost mandatory, such as:
These are just some of the points that should be taken into consideration before building a web application, but there’s a lot of available techniques and concepts which will help it succeed in the long-term.
Imagine that instead of building a casual web application, using the same common techniques, we could make this web application behave and work like a native application. We could make it more efficient, performant, elegant, able to send push-notifications to our users, work offline, improve performance and conversion rate, etc.
Progressive Web Apps (PWA) are modern web applications that use recent web features that allow the application to be installed on the user’s device, similar to a native application. By doing that, the web application can behave much like a native application and work with some features that are available on native applications, such as push-notifications, work offline, geolocation, device hardware access, etc.
Progressive web apps work offline when you don’t have an internet connection, using the data cached during your last interactions, this is possible because of service workers.
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Today, they already include features like push notifications and background sync.
The usage of service workers for working offline makes progressive web apps attractive and performant for web applications. Although they seem like a new way to build web applications with some native application features, progressive web apps are being used by a lot of different companies and showing real positive results.
Flipkart, the e-commerce company based in India, decide to turn their web application into a progressive web app, and as a result, they tripled the time user’s spent on their site, along with a few more positive results:
– 40 percent higher re-engagement rate
– 70 percent greater conversion rate among those arriving via Add to Homescreen
– 3 times lower data usage
There are a lot of other companies using progressive web apps in production today, such as Twitter, Pinterest, Flipkart, Starbucks, Forbes, and more.
Progressive web apps are quietly taking over the world of web applications and companies are slowly starting to adopt them with huge success. Turning your modern web application into a PWA can bring so many advantages and will help your users to be more interactive and engaged with your application.
Let’s take a look into the features that progressive web apps offer and why they can make web apps so powerful, performant, and reliable, giving the feel to the web app like it’s a native application.
Progressive web apps are always loaded from a secure origin connection using HTTPS. It helps reduce the load-time of the app and increases how fast the app will load to the user.
To make use of a native app, the user needs to download it from a store, it will require memory from the user’s device, and most of the time, the user doesn’t want to download a simple application that is going to be used twice in a month.
Imagine that instead of having 30 native apps on your phone, you could have 30 progressive web apps, freeing up memory from your device. Progressive web apps can be a nice solution for companies that want their user to stick to using their web app on their device by just installing it, instead of having to create a unique native app for it.
Web apps are designed and developed from scratch to work online. Sometimes the user’s internet connection might drop for a few minutes, but after it gets back, the user wants their action registered, and the app should do what the user intended to do. Every user wants their action to be registered, no matter what. The problem with web apps is that getting them to work offline is not an easy task.
Progressive web apps are only able to work offline because of service workers. Service workers offer offline capabilities to web apps, they’re responsible for making the progressive web apps work offline and in a very efficient and fast way.
Service workers help cache new content from the progressive web app and synchronize it as a local change to a remote server, making the progressive web app feel fresh and up-to-date to the user.
One of the pain points about native apps is that they need to be downloaded from a store, like the App Store or Google Play store.
The user will need to spend some memory from the phone to install the app, spend more time downloading the app, creating an account, and setting up everything before navigating on the app.
Progressive web apps are apps that don’t need to be downloaded from a store, the user can simply click on the button to save the app to their device. Progressive web apps run in a standalone window instead of a browser, making them launchable from the user’s home screen very easily:
These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. — Alex Russel on “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”.
The ability to have the app saved on their device like a real native app makes a lot of difference, it will save memory on the device, and it will only load content when the user opens the app.
Progressive web apps are still a new way of building web apps and sometimes it might cause some confusion, especially between developers who are just learning about the two different concepts. A few developers tend to confuse progressive web apps with hybrid apps, though they share a few differences.
A hybrid application is built using a combination of web and native technologies, and it is distributed via a native app store. A hybrid application can be built very quickly and be available on different platforms. The core of hybrid apps are built using web technologies (HTML, CSS, JavaScript) then encapsulated within native technologies, which gives the app access to mobile device’s features such as push notifications, geolocation, etc.
A progressive web application is a modern web application that can be downloaded from your browser and can have features of native apps. Unlike a hybrid app, a progressive app is not distributed via a store, such as Google Play store or App Store.
Now that we know more about how progressive web apps work and the differences between hybrid apps, let’s turn a Next.js app into a PWA to see it in practice.
You can easily create a new Next.js application with the following command:
npx create-next-app pwa-example
After creating our application, we are going to install a dependency for turning our app into a PWA:
yarn add next-pwa
Now, all we have to do is create a file on our root folder called next.config.js and put the following code inside it:
Learn more →const withPWA = require('next-pwa')
module.exports = withPWA({
pwa: {
disable: process.env.NODE_ENV === 'development',
register: true,
scope: '/app',
sw: 'service-worker.js',
}
})
Inside our public folder, we are going to create our manifest.json file. Every PWA should have a file called manifest.json, this web manifest file provides information about the app in a JSON format and it is necessary for our app to be downloaded and work similarly to a native app.
This is what a manifest.json file looks like:
{
"theme_color": "#fe0000",
"background_color": "#ffff",
"display": "browser",
"scope": "/",
"start_url": "/",
"app_name": "Example",
"short_name": "Example",
"description": "Example of a PWA",
"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"
}
]
}
We are going to use a PWA Manifest Generator to generate our manifest.json. It’s very easy and takes just a few seconds. After have generated our manifest.json file and the icons, all we have to do is put the content inside our public folder.
Now, we have a Next.js PWA working, offering offline support for our app and many more advantages that a PWA brings.
Progressive web apps are a new standard for building modern applications that mix web and native technologies to create fast and accessible web apps. Turning your app into a progressive web app could bring so many advantages such as offline support, push notifications, geolocation, improved user experience, increase in traffic for sales and conversion, and much more.
Debugging Next applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your Next.js app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your Next.js apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
