Progressive Web App Testing
- Kalhan Liyanage
- Oct 23, 2019
- 3 min read
Updated: Oct 24, 2019
Progressive web apps are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.
This term was originated in 2015 from within the heart of Google.
A set of design principles that guide the developers to use the provisional capabilities of the web browser encompasses the PWAs
Why Progressive Web Apps?
2.5 billion people use smartphones today
Mobile app for an online business is a must
Modern browsers can provide features that are usually utilized by native applications on various operating systems
A Progressive Web App is :
Progressive- Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
Responsive- “web” apps look nice on any device. Whether the screen is wide, narrow, short or tall, the application layout scales and adjusts to the user’s screen appropriately.
Connectivity independent - Service workers allow apps to work offline or on low-quality networks.
App like- Feel like a native app to the user with app-style interactions and navigation.
Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Search friendly – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re - engageable - Re-engageable applications can pull the user back by sending push notifications. It’s a way to let users know that something interesting has happened that requires their attention. We are used to this notion from our smartphones and native mobile applications, but browsers support this also via the Push and Notification APIs.
Fresh - The data in your application should be As Fresh As Possible. PWAs are able to update themselves automatically, so apps stay fresh with up to date content.
Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable- Easily share via URL and not require complex installation.
Primary characteristics of PWA defined by Google
•Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. (dinosaur image shown when network is down)
•Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
•Engaging - Feel like a natural app on the device, with an immersive user experience.
Key Components of a PWA
Manifest file
A simple JSON file that tells the browser about your web application. Having a manifest is required to show the Add To Home Screen prompt.
Tells how it should behave when 'installed' on the user's mobile device.
A typical manifest file includes information about the app name, icons, start_url, splash screen etc.
An app manifest file should describe the resources your app will need.
This includes your app’s displayed name, icons, as well as splash screen.
If you link to the manifest file in your index.html, browsers will detect that and load the resources for you.
Service Worker
A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests.
By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.
Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from a HTTP request.
Display and interact with notifications (native OS)
Manage all network traffic of the page and do any manipulations
Background sync APIs - defer actions until users have stable connection
Subscribe to push services
How to test PWA s
•Testing on various browsers and devices (older browsers will not support PWAs)
•Capability to add the PWA to the home screen
•It should start to behave like an app and not like a website when click on icon
•Testing without network connection (in airplane mode)
•Testing the icons, splash screen, start URL, background colors, display type, initial orientation and theme colors are properly displayed across browsers
Google Lighthouse
•Lighthouse is an open-source, automated tool for improving the quality of your web apps.
•Can be used by run from the command line, as a Node module, or by installing the Chrome Extension.
•Lighthouse also provides a REST API which is consumed by sites like web.dev and PageSpeed Insights.
To measure website performance
Google lighthouse
Progressive Web App Checklist
Comments