As technology continues to advance, web development is constantly evolving to provide a better user experience. One such innovation is the progressive web app, or PWA. PWAs combine the best of both worlds – the functionality of a native app and the accessibility of a web app.
If you are new to the world of PWAs, this beginner’s guide will provide you with everything you need to know to get started.
What is a Progressive App?
A progressive app is essentially a website that can function as a mobile app. PWAs use modern web technology to deliver an app-like experience to users, with features such as push notifications, offline access, and home screen installation.
PWAs are designed to be responsive and can work on any device with a web browser, whether it’s a smartphone, tablet, or desktop computer. They are also discoverable and easy to share via URL, just like a regular website.
How Does a Progressive App Work?
PWAs are built using web technologies such as HTML, CSS, and JavaScript, and are accessed through a web browser like Google Chrome or Safari. They can be accessed through a web link or installed on the user’s home screen, just like a native app.
When a user visits a PWA, the website checks if the user’s device and browser are capable of running a PWA. If the user’s device and browser meet the requirements, the PWA will be installed on the user’s device and can be accessed from the home screen just like a native app.
When is it appropriate to create a progressive web app? Native is typically recommended for applications that you anticipate users returning to frequently, and a progressive web app is no exception. Flipkart’s popular e-commerce platform, Flipkart Lite, uses a progressive web app, and SBB uses a progressive web app for its online check-in process, allowing users to access their tickets without an Internet connection.
Identify your users and the most important user actions before deciding whether your next application should be a progressive web app, a website, or a native mobile application. A progressive web app works in all browsers and improves the user experience whenever the user’s browser is updated with new and improved features and APIs.
As a result, there is no difference in user experience between a progressive web app and a traditional website; however, you may need to decide what functionality to support offline, as well as how to facilitate navigation (remember that in standalone mode, the user does not have access to the back button). If your website already has an application-like interface, incorporating progressive web app concepts will only improve it.
If certain features are needed for critical user actions but aren’t yet available due to a lack of cross-browser support, a native mobile application may be a better option, ensuring a consistent experience for all users.
Characteristics of Progressive Web Apps
The following are the characteristics of progressive web apps:
- A progressive app, by definition, must work on any device and gradually improve, taking advantage of any features available on the user’s device and browser.
- Because a progressive app is a website, it should be search engine friendly. Beacuse of this, it works better from a native application in terms of searchability behind websites.
- A well-designed website should use the URI to indicate the current state of the application, which is another trait inherited from websites. When a user bookmarks or shares the app’s URL, the web app can retain or reload its state.
- The UI of a progressive app must be tailored to the device’s form factor and screen size.
- App-like. A progressive app should have the appearance of a native app and be built on the application shell model, with few page refreshes.
- Connectivity-independent. It should function in areas with poor connectivity or when the computer is turned off (our favourite characteristic).
- Re-engageable. Mobile app users are more likely to reuse their apps, and progressive apps aim to achieve the same results through features like push notifications.
- A progressive app can be installed on the device’s home screen for easy access.
- When new content is published and the user is connected to the Internet, the app should make that content available.
- Because a progressive app provides a more intimate user experience and all network requests can be intercepted via service workers, it is critical that the app be hosted over HTTPS to avoid man-in-the-middle attacks.
Benefits of Progressive Web Apps
PWAs provide a number of benefits over traditional mobile apps and websites, including:
- Accessibility: PWAs are accessible to anyone with a web browser, regardless of device or platform.
- Speed: PWAs load quickly, even on slow networks, thanks to their lightweight architecture and use of caching.
- Offline Access: PWAs can function offline, allowing users to access content and features without an internet connection.
- Installable: PWAs can be installed on the user’s device, providing easy access to the app without the need to search for it in an app store.
- Push Notifications: PWAs can send push notifications to users, keeping them engaged and up-to-date with the latest content and features.
Let’s Talk About Coding Now!
We will start with SkyHigh as the first website to check the arrival of flights. We want to show the user a list of upcoming flights retrieved from an API the first time they access our web app. If the user does not have an Internet connection and reloads the web app, weTo handle our Model-View-ViewModel (MVVM) bindings, we use small bits of Knockout throughout the application—aa lightweight JavaScript framework that allows us to bind our JavaScript models to our HTML views. We chose Knockout because it is easy to understand and does not clutter the code; however, you can replace it with any other framework, such as React or AngularJS.
want them to see the flight schedule as it was when they last downloaded it while connected.
Basics
The first requirement of the progressive app will be, that it works on all devices and improves on those that do. As a result, we built our website with both traditional HTML5 and JavaScript, which simulates data retrieval from a mock API. Our site adheres to Google’s material design guidelines, which are a set of principles that govern design and interaction. Material design not only acts as a unified standard across applications and devices, but it also provides meaning to design. For Sky High’s arrivals view, we used material design to give our progressive app a native-app look and feel.
Finally, we tested our app to ensure that there are no janks and that scrolling is silky smooth. It has been demonstrated that jank-free rendering increases user engagement. Aim for 60 frames per second of rendering.
Web App Manifest
Let’s make our web app more like an app. It is nothing but a simple JSON file that follows the W3C guidelines. It allows you to run the web app in full-screen mode as a standalone application, assign an icon that will be displayed when the app is installed on the device, and customize the app’s theme and background color. Furthermore, Chrome on Android will prompt the user to install the web app via a web app install banner. To show the installation prompt, your web app must:
- be served over HTTPS, have a valid web app manifest file
- have a registered service worker,
- have been visited twice, with a five-minute interval between each
After adding the web app to their home screen, users will be able to re-engage with your application directly from their device without having to open the browser.
Service Workers
One of the more exciting aspects of progressive Web apps is their ability to function offline. Using service workers, it is possible to display data from previous app sessions (using IndexedDB) or, alternatively, to display the application shell and inform the user to connect to the internet (the approach we’ve taken in this demo). When the user reconnects, we can retrieve the most recent data from the server.
All of this is made possible by service workers, which are event-driven scripts (written in JavaScript) with access to domain-wide events such as network fetches. We can cache all static resources with them, which can significantly reduce network requests while also improving performance.
App Shell
The application shell consists of the bare minimum of HTML, CSS, and JavaScript needed to power a user interface. The application shell is included in the distribution of a native mobile application, whereas websites typically request it over the network. Progressive app bridge this gap by caching the application shell’s resources and assets. Our application shell in our Sky High application consists of the top header bar, fonts, and any CSS required to render these elegantly.
To begin using service workers, we must first create our service worker’s JavaScript file, sw.js, which will be placed in the root directory.
Offline Tests
If a user runs the application without an Internet connection (assuming they have already been on the page), the application shell and the offline warning will be displayed—a significant improvement over Chrome’s prowling t-rex. We disable the warning and retrieve the most recent data once the user has established a network connection.
Push notifications
Push notifications enable users to opt in to timely updates from trusted applications, allowing them to re-engage with the apps. Web push notifications enable you to interact with your audience even when the browser is closed.
Performance
We can improve performance with little to no effort, which is one of the easiest wins with service workers. When comparing our website to before the implementation of service workers, we were retrieving over 200 KB per page load; that has now been reduced to 13 KB. The page would have taken 3.5 seconds to load on a regular 3G network; now it takes 500 milliseconds.
Because the application is small and has limited functionality, the performance improvements are dramatic. Nonetheless, proper caching usage can significantly improve performance and perceived performance, particularly for users in low-connectivity areas.
Lighthouse
The Chrome team at Google has created a tool for testing progressive apps. Lighthouse is available on GitHub and runs in Node.js or as a Chrome plugin.
To run a Lighthouse test, your website must be online, which means you cannot test on localhost.
Conclusion
Progressive apps are a powerful tool for delivering an app-like experience to users on any device, without the need for a dedicated app store. By following the PWA checklist and utilizing modern web technologies, developers can create PWAs that provide a fast, accessible, and engaging user experience. As technology continues to advance, PWAs will continue to play an important role in the future of web development.
