Understanding Progressive Web Apps (PWA) and Mobile Web Performance

TL;DR

1. PWA (Progressive Web Apps) is a Google‑initiated web app model that aims to keep the web’s openness while delivering offline, interactive, and notification experiences similar to native apps.

2. Web app performance metrics are shifting from event‑based measures (load time, DOMContentLoaded) to user‑perceived metrics such as First Paint, First Meaningful Paint, and Time to Interactive.

3. China’s unique mobile network environment is not yet friendly to PWA, but the openness of the web gives hope for a future PWA boom.

Mobile Web Situation

Data shows that mobile users install about 27 apps per month but visit over 100 websites, with the top apps consuming 80% of usage time while the rest share the remaining 20%.

Web offers better distribution and discoverability at lower cost, yet native apps dominate because they provide superior experience, lower latency, and offline capability.

PWA and its core technologies (Web App Manifest, Service Worker, Cache API, Notification) aim to close these gaps.

Progressive Web Apps

Official example: users can add a web page to the home screen and launch it with a native‑like UX.

PWA, launched by Google in 2015, is not a single technology but a combination of modern web capabilities designed to improve performance, reliability, and engagement.

Progressive Web Apps use modern web capabilities to deliver an app‑like user experience. They evolve from pages in browser tabs to immersive, top‑level apps, maintaining the web’s low friction at every moment. – Google PWA Tutorials

Key PWA characteristics that match native app experience:

Offline usable : Service Workers and Cache Storage enable basic functionality without network.

Add to home screen : Users can launch the app directly from the desktop without installation.

App‑like interaction : Using the App Shell model provides native‑like navigation and UI.

Push notifications : Ability to re‑engage users via push messages.

Example: Flipkart Lite (India) demonstrates offline caching, product persistence, and push notifications.

Testing PWA on Mobile

PWA Checklist & Lighthouse

Google provides a checklist of PWA best practices and features. Lighthouse, a Chrome tool, automates quality audits for web apps.

Lighthouse can be used via Chrome extension, npm package, or built‑in Audits panel (Chrome 60+).

Running Lighthouse on a URL generates a performance report covering PWA compliance and other metrics.

Performance Metrics Shift to User Perception

Traditional metrics (load time, DOMContentLoaded) are being replaced by user‑centric measures such as First Paint, First Meaningful Paint, Time to Interactive, and Long Tasks.

Google’s Addy Osmani illustrated these points on a timeline diagram.

Is it happening? – Does navigation start and does the server respond?

Is it useful? – Is meaningful content rendered?

Is it usable? – Can the user interact or is the page still loading?

Is it delightful? – Are interactions smooth without jank?

First Paint (FP) – First non‑blank render; reduce blocking CSS/JS.

First Meaningful Paint (FMP) – Time when primary content becomes visible.

Time to Interactive (TTI) – When the page becomes fully interactive; avoid long tasks on the main thread.

Long Tasks – Tasks that block the main thread, causing perceived lag.

Developers can evaluate performance using the RAIL model.

Measuring Real‑Device Performance

While legacy Web Event metrics are easy to obtain, newer APIs like PerformanceObserver, PerformanceEntry, and DOMHighResTimeStamp enable continuous monitoring of user‑perceived performance.

Example code creates a PerformanceObserver to asynchronously handle performance entries, replacing the older PerformanceTiming interface.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    // handle performance entry
  });
});
observer.observe({type: 'resource', buffered: true});

Other Remarks

In China, browsers such as Safari, UC, and QQ dominate, and many Android devices lack Chrome, making PWA adoption challenging; however, companies like Baidu, Ele.me, and Alibaba International are experimenting with PWA solutions (e.g., Baidu’s Lavas).

Apple’s stance on PWA is warming up, with recent statements indicating active consideration and upcoming Service Worker support.

Thus, while PWA’s “spring” may arrive later in China, the global momentum suggests it is only a matter of time.

Author Introduction

Yu Hui – Automation testing newcomer, aspiring to excel at coding while enjoying badminton and dancing.