How to test a Progressive Web App
Introduction: A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices. Since a progressive web app is a type of webpage or website known as a web application, there is no requirement for developers or users to install the web apps via digital distribution systems like Apple App Store or Google Play.
While web applications have been available for mobile devices from the start, they have generally been slower, have had fewer features, and been less used than native apps. But with the ability to work offline, previously only available to native apps, PWAs running on mobile devices can perform much faster and provide more features, closing the gap with native apps, in addition to being portable across both desktop and mobile platforms. PWAs do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs work in any browser, but “app-like” features such as being independent of connectivity, install to home screen, and push messaging depend on browser support.
Characteristics: Progressive web apps are designed to work on any browser that is compliant with the appropriate web standards. As with other cross-platform solutions, the goal is to help developers build cross-platform apps more easily than they would with native apps.
According to Google Developers,the characteristics of a PWA are:
Progressive – Works for every user, regardless of browser choice, using progressive enhancement principles.
Responsive – Fits any form factor: desktop, mobile, tablet, or forms yet to emerge.
Faster after initial loading – After the initial loading has finished, the same content and page elements do not have to be re-downloaded each time. Ordinary websites often already made use of the browser cache to avoid re-downloading the same data redundantly.But on progressive web applications, the same elements do not need to be re-rendered again.
Connectivity independent – Service workers allow offline uses, or on low quality networks.
App-like – Feels like an app to the user with app-style interactions and navigation.
Fresh – Always up-to-date due to the service worker update process.
Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable – Identifiable as an “application” by manifest.json[14] and service worker registration, and discoverable by search engines.
Re-engageable – Ability to use push notifications to maintain engagement with the user.
Installable – Provides home screen icons without the use of an App Store.
Linkable – Can easily be shared via a URL, and does not require complex installation. The technical baseline criteria for a site to be considered a progressive web app by browsers were described by Russell in a follow-up post:
PWAs should support offline connectivity
Originate from a secure origin. Served over TLS and green padlock displays (no active mixed content).
Load while offline (even if only a custom offline page). By implication, this means that progressive web apps require service workers.
Reference a web app manifest with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen)
An icon at least 144×144 large in PNG format.
Use of vector graphics that are indefinitely scalable and require smaller file sizes. Some progressive web apps use an architectural approach called the App Shell Model. In this model, service workers store the Basic User Interface or “shell” of the responsive web design web application in the browser’s offline cache. This model allows for PWAs to maintain native-like use with or without web connectivity. This can improve loading time, by providing an initial static frame, a layout or architecture into which content can be loaded progressively as well as dynamically.
PWAs should support offline connectivity
Technical Components of PWA: There are two main technical components of a progressive web application: manifest file and a service worker