How do they work ?
In today’s world, mobile devices have become an integral part of our lives, and with it, so have the apps we use. However, downloading and updating native apps can be a hassle, taking up valuable storage space and time. This is where Progressive Web Apps (PWA) come in. PWAs combine the best of both worlds, providing users with the seamless experience of a native app while also being accessible through a web browser. They are fast, reliable, and engaging, making them the perfect solution for businesses and developers looking to provide a top-notch mobile experience to their users. In this article, we will explore the world of PWAs, their benefits, and how to build one.
Before learning more about PWA, Let’s understand what is a web app and native app and how do they differ. Native App are apps that can be downloaded and installed on your device. They are usually developed for a particular operating system. If you want a native app to work across multiple platforms, you must create a separate one for each platform. Web App are apps that can be accessed from the browser of your device. They are usually developed as web pages and don’t require downloading and installing. They are mostly based on Internet-enabled applications.
What makes a Web App Progressive ?
There are few principles which make a web app progressive, they are –
- Discoverable, Contents can be easily found through search engines.
- Installable, so it can be available on the device’s home screen or app launcher.
- Linkable, so you can share it by sending a URL.
- The network is independent, so it works offline or with a poor network connection.
- Progressively enhanced, so it’s still usable on a basic level on older browsers, but fully functional on the latest ones.
- engageable, so it’s able to send notifications whenever there’s new content available.
- Responsively designed, so it’s usable on any device with a screen and a browser—mobile phones, tablets, laptops, TVs, refrigerators, etc.
- Secure, so the connections between the user, the app, and your server are secured against any third parties trying to access sensitive data.
PWA – How do they work ?
PWAs use modern web technologies to provide an app-like experience to users. PWA requires some fundamental components to be called a PWA:
- Web app manifest: A web app manifest is a JSON file that provides metadata about the PWA, such as its name, icons, version, description, and background colour. This information is used by the browser to display the PWA on the user’s home screen and make it appear like a native app. The Web Application Manifest specification defines this file and it is necessary for the web app to be downloaded and presented to the user similarly to a native app. With the Manifest, a PWA can be installed on the home screen of a device, allowing for quicker access and a richer experience for users. While the Service Worker handles network-related functions, the Manifest focuses on the app’s appearance, including icons and background colours.
- Secure Contexts: To be considered a PWA, a web app must be served over a secure network, which is known as a “Secure Context”. This means that the app must be loaded using HTTPS rather than HTTP. This is particularly important if the app involves any kind of transaction, as it establishes the web app as a trusted site. Many of the features related to PWAs, such as geolocation and the Service Worker, are only available once the app has been loaded using HTTPS. By using a Secure Context, a PWA can ensure that its users’ data is kept secure and private, helping to build trust and credibility with users. – reduce the paragraph without losing the content and meaning.
- Responsive design: PWAs are designed to work on any device, from smartphones to desktop computers. They are built using responsive design techniques, which allow the content to adjust to different screen sizes and orientations.
- App-like features: PWAs offer features that were previously only available in native apps, such as push notifications and the ability to be installed on the user’s home screen. This is made possible through the use of service workers and web app manifests.
When a user visits a PWA for the first time, the service worker and web app manifest are downloaded and cached by the browser. This allows the PWA to function even when the user is offline. The web app manifest is used by the browser to display the PWA on the user’s home screen and provide an app-like experience. The service worker intercepts network requests and caches resources, enabling the PWA to load quickly and function smoothly. Additionally, push notifications can be sent to the user even when the PWA is not actively being used. Progressive Web Apps (PWAs) combine the best features of native apps with the advantages of the web. The most important part of any PWA is its design, which should be optimized for different devices and screen sizes.
To develop a Progressive Web App, you need to discover the problem and define your solution. Create an app shell that is responsive and works on all devices. Add features like offline support, push notifications, and service workers so that your application can be used even when there’s no network connection available (like when traveling).
Let’s analyse a PWA
I have selected a password generator created by clustered networks (https://apps.clusterednetworks.com/password.generator/) for the analysis.
- We can analyse the file structure of the PWA. A PWA should contain:
- index.html: the main HTML file for the PWA
- manifest.json: the PWA manifest file, containing metadata about the app
- css: a folder for CSS files
- images: a folder for image files used by the app
- This is the index.html file for the PWA:
The HTML file contains the basic structure of the PWA. It has the manifest and service worker attached to it to make it a PWA. You can view the HTML file of the password generator app here: (view-source:https://apps.clusterednetworks.com/password.generator)
- This the manifest.json file for the PWA:
The manifest is a JSON file that provides valuable information about the PWA. It includes information such as app names, display mode, icons etc. By adding a manifest file in your PWA, you enable the browser to install the app and display it similarly to a native app, including adding a home screen icon, and displaying the app in full screen mode without any browser UI.
- Service worker for the PWA:
Examples of PWA
What makes BMW web app a PWA, Let’s see
- It’s available without network connection.
- It’s great for on the go customers who may go in and out of connectivity throughout the day or emerging markets like rural communities where the connection is less reliable.
- Great customer experience.
- Quality and engaging content.
- High-resolution images and videos, and web loads instantly with all of features.
- 4X times faster than the old site.
- Their reports also showed other impressive numbers following the establishment of the PWA: 4X increase in people clicking from the homepage to a BMW sales site; 50% growth in mobile users and 49% more site visits compared to the old site.
Debenhams, the famous UK brand, transforms their shopping experience in the fashion industry.
- It’s really engaging so for this it’s able to send notifications whenever new content is available.
- They realised though their old website had increased mobile traffic, the mobile conversion rate wasn’t growing. so they concluded a digital transformation is very much needed.
- PWA was the answer for the team.
- They have improved the customer experience by removing blocks on a customer journey – slow pages, hard-to-navigate structure, and complicated checkout process.
- Overall, Debenhams enjoyed a 40% increase in mobile revenue and a 20% increase in conversions.
PWAs are a great way to build websites that load quickly and feel like native apps. PWAs have many benefits over traditional web pages, They’re faster than traditional websites because they use service workers, which cache resources locally so that you don’t have to wait for them every time you visit the site (like when you’re on your home Wi-Fi network). They work offline instead of relying on an internet connection to store data; this makes them more reliable when there’s no signal available–for example, when traveling abroad or in remote areas where coverage is spotty at best.
Progressive Web Apps have emerged as a game-changer in the world of web development, providing an all-in-one solution for creating high-performing, responsive, and engaging web applications. PWAs combine the best of both worlds- the reliability of a website and the functionality of a native mobile app- to provide users with a seamless experience across all devices.
- MDN WebDocs
- Ron Billings – (https://www.youtube.com/watch?v=PSrw4vAHQ0s&t=620s)