The Modern PWA Blueprint [Part 2]: Performance, Hardware Access & Project Fugu

Performance in Practice: Speed, Caching & Resource Efficiency

Real-World Execution: Loading, Runtime & UI Smoothness

Unlike compiled frameworks, PWAs execute within the browser environment, and therefore their performance will be as good as the browser engine (e.g., Chromium or WebKit) and hardware available on the device.

Existing browser engines offer high-performance JavaScript execution along with hardware-accelerated rendering that enable responsive and smooth user interfaces, especially for contemporary devices.

Key performance factors influencing PWAs are:

• Loading Performance & Service Workers: One of their strong points is loading performance, particularly on return visits. Service workers are JavaScript scripts that run in the background, without reference to the web page. They allow for advanced caching mechanisms like pre-caching of app assets (HTML, CSS, JavaScript, images, API responses). This allows resources to be served directly from the cache, providing lightning-fast loading times and reliable offline access.

• Installation Performance: PWAs install instantly over HTTPS directly in the browser, zero app store latency, and substantial first time downloads. The storage footprints is also tremendously low (download on-demand), hence also the download time is negligible.

• Runtime Performance: Depending on good JavaScript, UI complexity, and browser rendering. Libraries like React, Angular, and Vue.js provide performance utilities for UIs (e.g., virtual DOM or incremental DOM). Browsers like Google Chrome provide strong mechanisms for sustaining smooth runtime performances.

• Responsiveness and Smoothness: Achieved through CSS animations/transitions, which are typically hardware-accelerated, providing best performances.

Some drawbacks:

• Although, thanks to modern browser technology, the performance of a PWA is practically indistinguishably similar to that of a native app for most apps available for purchase, they won't necessarily match raw performance of completely native or compiled applications for graphically intensive applications like real-time 3D gaming or where tight, low-level hardware integration or deep background processing is required.

• The UI smoothness is ensured through hardware-accelerated CSS transitions and rules. Native applications use the operating system's API and OS directly for gestures and animations. In PWAs, UI changes are routed through the browser's rendering engine to be forwarded to the operating system, resulting in overhead. This results in very little touch and animation latency and less control over performance, though slight, which under certain conditions becomes noticeable by the user.

To monitor and optimize performances, Google Chrome offers Google's Lighthouse tool, in which developers can audit PWAs, identify performance bottlenecks, and check compliance with performance best practices, accessibility guidelines, and PWA checklist requirements.

Memory Footprint & Storage: The Download-on-Demand Advantage

Apart from time, the most valuable asset of PWAs is space used. Because of the \"download on demand\" capability, PWAs are much smaller than native applications. This saves valuable device storage space, leading to faster loading times, improved user experience, reduced burden on user data and device resources.

Hardware & OS Access: Bridging the Native Capabilities Gap

When it comes to Progressive Web Apps, the ability to access the operating system is one of the most frequently asked questions. Unlike native apps, where the app directly interfaces with the operating system, which in turn interfaces with the hardware, here we have an additional layer represented by the browser.

Rendering Engines: The Chromium vs. WebKit Landscape

One thing worth clarifying upfront is the distinction between browsers. Actually, in this sense, it makes less sense to speak of "browser" rather than rendering engine, and, therefore, operating system.

On Android, browsers use Chromium (developed by Google) as their rendering engine, while on iOS they use WebKit (created by Apple). Chromium is the rendering engine that offers greater support for PWAs, which makes Android the perfect operating system for PWAs. Conversely, WebKit is more limiting, so much so that it restricts even Google Chrome on the iOS operating system.

This situation seems to be partially resolvable in the European Union thanks to the EU Data Act, a regulation designed to foster a more competitive data market in Europe. This regulation could impact Apple by preventing it from limiting the capabilities of external browsers, effectively allowing Google to build its browser on the Chromium engine even on Apple devices.

Web APIs: Direct Communication with Device Hardware

Since web apps have an additional step before accessing the operating system, a method is needed for the app to communicate with the browser to indicate which OS resources, and therefore hardware, it requires. This method is provided by Web APIs. Web APIs can extend browser functionalities in many ways, accessing Bluetooth, the filesystem, Battery Status, and much more. Some are now supported by all browsers, such as those for camera access (Media Capture and Streams API) or those for file system access (File System API), while others are newly developed and in the early stages, such as those for NFC usage (NFC API).

What we cannot do is list all existing Web APIs, nor how much they are supported by browsers on various operating systems. This is because they are rapidly expanding and are ensuring a prosperous future for PWAs. For a reference, the best documentation to consult is Mozilla's: https://developer.mozilla.org/en-US/docs/Web/API.

Ecosystem Maturity & The Future of Web Capabilities

Progressive Web Applications are not limited to a particular framework; instead, they are built on open web standards set by entities like W3C and supported by browser vendors like Google, Mozilla, Apple, and Microsoft. This feature makes PWAs one of the most cutting-edge and secure technologies within application development.

The underlying technologies of HTML, CSS, and JavaScript have been used for a long time. Progressive Web Applications were officially sanctioned in the mid-2010s and subsequently adopted by leading brands like Twitter, Starbucks, Pinterest, and Uber for both desktop and mobile usage. This ecosystem has proven stable and has been thoroughly tested, especially with regards to key pieces like service workers and web app manifests, which have received widespread backing on multiple web browsers. Moreover, libraries and tools like Workbox, Lighthouse, and PWA Builder remain actively supported and developed by major stakeholders in the industry.

Pros:

• Backed by open standards and major industry players, ensuring longevity.

• Based on strong and cutting-edge underlying technologies.

• A clear roadmap for expanded capabilities via new browser APIs.

Challenges:

• Variability in feature support across browsers, especially on iOS where some features have historically lagged.

• A fragmented tooling ecosystem may affect consistency compared to a single-framework approach.

The future of PWAs is intrinsically tied to the evolution of the web platform itself, which is advancing rapidly. Here are some examples of innovation drivers:

Project Fugu: Closing the Native OS Capabilities Gap

A key driver is the Web Capabilities initiative (codenamed Project Fugu), a Google-led effort to close the capability gap between native and web by providing secure access to features like the File System Access API, Web Bluetooth, and advanced hardware integration.

Google's underlying principle is to extend the ability of the web by utilizing innovative web APIs, which allow web programs to access hardware and functionality heretofore reserved to native programs.

WebAssembly (Wasm): Near-Native Performance in the Browser

WebAssembly, or Wasm, is an open-standard framework of web technologies to run programs written in a variety of programming languages other than JavaScript, like C, C++, and Rust, in web environments. It defines an optimized binary format and its respective text format, aiming to provide performance similar to native execution of machine code. Initially proposed to improve elemental parts of web application components, WebAssembly has transformed to allow developing and running web applications based on a variety of programming languages, thereby extending its purpose beyond just supporting JavaScript. Development of this technology happens within the auspices of World Wide Web Consortium (W3C) and opens itself to contributions from many organizations, including Mozilla, Microsoft, Google, and Apple.
The increasing maturity of WebAssembly allows more performance-intensive applications to run efficiently in the browser, significantly expanding the scope of what PWAs can achieve.

Hybrid Distribution: Packaging PWAs for App Stores

Trusted Web Activities, created by Google, and Capacitor, built by Ionic, allow PWAs to be packaged to different application marketplaces, such as the Google Play Store, Apple Store, and Microsoft Store, thereby offering hybrid distribution approaches.