How do they work ?

Introduction

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.

PWA stands for Progressive Web App. It is a type of web application that uses modern web technologies to deliver an app-like experience to users. PWAs combine the best of web and mobile app features, offering the convenience of web browsing and the seamless, immersive experience of a native mobile app. PWAs are designed to be fast, responsive, reliable, connectivity independent and engaging. They can be accessed through a web browser, but they also offer features like push notifications, offline support, and the ability to be installed on a user’s home screen like a native app. PWAs are built using web technologies like HTML, CSS, and JavaScript, and can be developed using frameworks like React or Angular. PWAs have gained popularity in recent years due to their ability to improve user engagement and experience. They can be used on any device, from smartphones to desktop computers, and they do not require users to download an app from an app store.

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:

• Service worker: A service worker is a script that runs in the background and intercepts network requests made by the PWA. It allows for caching resources, such as images and HTML pages, so they can be accessed even when the user is offline. It is a type of event-driven worker that is associated with an origin and a path. The Service Worker is implemented as a JavaScript file that can control the behaviour of the web page or site it is linked to, intercepting and modifying requests for navigation and resources. It can also cache resources in a very granular way, giving developers full control over how their app behaves in different network situations, such as when there is no network connection available. Essentially, the Service Worker works with the browser to create a layer between the app and the network, enabling features like caching and push notifications.

• 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.

• The App Shell Concept: It is a fundamental principle of Progressive Web Apps (PWAs) that involves loading a minimal user interface and content when the user first initiates the app. This initial content is then cached, making it available offline for subsequent visits. When the user opens the app again from the same device, the UI loads from the cache and any new information that is not cached will be requested from the server. Basic HTML, CSS, and JavaScript are required to render the user interface of the PWA quickly and efficiently. The app shell is cached so that it can be loaded quickly and is available offline. The App shell is a combination of Client-side rendering (CSR) and Server-side rendering(SSR). Server-side rendering (SSR), involves generating the HTML content on the server side and sending it to the client already rendered. This approach can result in slower initial load times but can improve the time-to-first-content-paint, which is critical for user engagement. SSR can also provide better SEO (Search Engine Optimisation) as the search engines can easily crawl the HTML content. Client-side rendering (CSR), involves loading a minimal HTML file and relying on JavaScript to fetch and render the content on the client side. This approach is often used for SPAs (Single Page Applications) where the content is dynamically generated and updated based on user interactions. CSR can result in a faster initial load time and a more fluid user experience, but it can also put more load on the client’s device.

• 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.

1. 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
• service-worker.js: the JavaScript file for the Service Worker
• css: a folder for CSS files
• js: a folder for JavaScript files
• images: a folder for image files used by the app

2. 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)

3. 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.

4. Service worker for the PWA:

The JavaScript file checks if the browser supports service workers and registers the service worker file if it does. Finally, the service worker file contains the code that caches the website assets and responds to network requests.

When the user visits the website for the first time, the service worker file is downloaded and installed. The service worker then caches the website assets (the HTML, JavaScript, and any other files needed to run the website). When the user visits the website again, the service worker intercepts the network requests and serves the cached files instead of making a network request. This makes the website load faster, especially on slow or unreliable connections.

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.​

Conclusion

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.

References

• MDN WebDocs
• Ron Billings – (https://www.youtube.com/watch?v=PSrw4vAHQ0s&t=620s)
• https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/