A progressive web app uses advanced technologies to blend the strengths of web and mobile applications, looking like a website but operating like an app. Recent enhancements in browsers, service workers, and APIs like Cache and Push now empower web developers to enable features such as home screen installation, push notifications, and offline functionality. Progressive web apps leverage the expansive web ecosystem, plugins, and simple deployment compared to native app stores, resulting in quicker development, unified code versions, and simplified maintenance for both mobile and web developers.
Why Progressive Web Apps?
Research indicates that, on average, an app sheds 20% of its users at each step from initial contact to active usage: discovery, download, installation, and opening. Progressive web apps (PWAs) circumvent this by enabling immediate usage upon discovery, bypassing unnecessary downloads and installations. Returning users are prompted to install the PWA for a full-screen experience. However, native apps possess merits. Those with push notifications achieve threefold higher retention than their push-less counterparts; users are thrice as likely to reopen a mobile app than a website. Furthermore, a thoughtfully designed mobile app consumes less data, manipulating on-device resources for swifter performance.
Use Cases
Opt for a progressive web app (PWA) when user frequency is a priority, and range with scenarios where native apps excel. Flipkart’s e-commerce platform, Flipkart Lite, and SBB’s offline ticket access exemplify PWA’s success. Assessing PWA feasibility involves user and action analysis. Progressive nature ensures compatibility across browsers, with enriched experiences through browser updates and new APIs.
PWA maintains user experience parity with traditional websites, requiring offline functionality and navigation facilitation choices. Adjective integration suits websites with app-like interfaces. When pivotal features articulation on cross-browser support, native apps ensure consistent experiences. PWA excels for anticipated frequent usage, while native apps suit cross-functional needs and guarantee consistency.
Characteristics Of a Progressive Web App
Previous to hunting through into the code, it’s crucial to grab the essential traits of progressive web apps, which include:
Progressive
A progressive web app is designed to function on all devices and progressively optimize, utilizing the device and browser’s available features.
Discoverable
Due to its website nature, a progressive web app should be easily findable on search engines, providing a significant edge over less searchable native apps.
Linkable
Derived from websites, a proficiently crafted one employs URIs to signify the app’s present state. It empowers the web app to preserve or restore its status when users bookmark or share its URL.
Responsive
The user interface of a progressive web app should seamlessly adapt to the dimensions and screen size of the device it’s being accessed on.
App-like
A progressive web app should follow the appearance of a native app and follow the application shell model, minimizing the need for frequent page refreshes.
Connectivity-independent
Operating efficiently in low-connectivity or offline environments is a key feature, rendering it a standout trait of progressive web apps.
Re-engageable
Progressive web apps aim to emulate the app reuse pattern seen in mobile apps, employing functionalities like push notifications to attain comparable objectives.
Installable
Readily accessible, a progressive web app is installable on the device’s home screen, ensuring quick availability and ease of use for users.
Fresh
Upon publishing new content and with an active internet connection, the app should promptly update to incorporate the latest material, ensuring users have immediate access to the fresh content.
Safe
A progressive web app’s intimate user experience and service worker-enabled network interception underscore the necessity of HTTPS hosting to safeguard against man-in-the-middle attacks and bolster security.
Let’s Code
Introducing our debut progressive web app, Sky High, designed to replicate an airport’s arrival schedule. Users will be presented with an API-fetched roster of upcoming flights on the initial visit. In offline access or app reload cases, the web app will showcase the flight schedule from the last downloaded instance, ensuring uninterrupted functionality even without an Internet connection.
The Basics
The foremost trait of a progressive web app mandates cross-device compatibility and gradual enhancement where feasible. Our website uses traditional HTML5, accompanied by JavaScript, that simulates data retrieval from a mock API. We’ve integrated bits of Knockout, a lightweight JavaScript framework for Model-View-View Model (MVVM) bindings. Our choice of Knockout is driven by its code clarity and simplicity, though adaptable to alternatives like React or AngularJS. Our design adheres to Google’s material design principles, ensuring consistency and meaningful interaction. The material design elevates the native-app feel, exemplified in Sky High’s arrival view. Extensive testing guarantees smooth rendering, vital for elevated user engagement, targeting 60 frames per second.
INDEX.HTML
The index.html file follows a conventional structure, featuring an HTML list linked to the View Model property “arrivals” via Knockout’s data-bind attribute “for each: arrivals.” Defined in the page.js file and exposed through the Page module, the arrivals View Model manages the list. Each entry in the arrivals array corresponds to title, status, and time properties, meticulously linked to the HTML view on the page.
Web App Manifest
Enhancing our web app’s app-like qualities involves employing a web app manifest file, adhering to the W3C’s specification. This JSON file facilitates full-screen standalone mode, enables icon display upon installation, and customizes the theme and background color. Chrome on Android further suggests installation via a web app install banner. The installation prompt prerequisites comprise a valid web app manifest, HTTPS hosting, a registered service worker, and two visits with a five-minute interval.
Service Workers
Progressive web apps offer an intriguing facet—offline functionality. Users can view previous session data using Indexed DB. Alternatively, the app shell can notify them of the absence of internet connectivity, as demonstrated in this demo. Once reconnected, the server can provide the most recent data. This capability hinges on event-driven scripts known as service workers, authored in JavaScript. These scripts possess domain-wide event access, including network fetches. Static resource caching through service workers is pivotal; it substantially curtails network requests, leading to remarkable performance enhancements.
Application Shell
The application shell embodies the essential HTML, CSS, and JavaScript components vital for a functional user interface. In contrast to native mobile apps that integrate the application shell within their distribution, websites conventionally request it online. Progressive web apps bridge this divergence by caching the application shell’s resources and assets within the browser. Our Sky-High instance highlights the application shell encompassing the header bar, fonts, and requisite CSS for elegant rendering. Initiating service worker usage necessitates crafting a JavaScript file named sw.js, positioned at the root directory, forming the foundation for implementing service workers.
Offline Test
When the app is accessed offline by a user (assuming prior visits), the display will feature the application shell along with the offline warning, a step forward from Chrome’s animated t-rex. Upon network reconnection, the warning is disabled, and the most recent data is fetched, ensuring a seamless transition to up-to-date content and improved user experience.
Conclusion
In conclusion, progressive web apps offer a compelling fusion of web and app features, addressing traditional apps’ user engagement challenges. By optimizing the user experience, enabling offline functionality through service workers, and seamlessly integrating the application shell, PWAs bridge the gap between websites and native apps. With the ability to work across devices, maintain offline access, and leverage familiar web technologies, progressive web apps present a versatile and efficient solution for modern digital experiences.
