All You Need to Know About Progressive Web Apps

What Are Progressive Web Apps?

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to servers, accessible through URLs, and indexed by search engines.

What Is Required?

To be considered a Progressive Web App, the app must be:

Progressive – Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.

Responsive – Fit any form factor, desktop, mobile, tablet, or whatever is next.

Connectivity independent – Enhanced with service workers to work offline or on low quality networks.

Re-engageable – Progressive Web Apps are installed and live on the user’s home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

Reliable – When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.
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.

A chrome browser image of what a service worker looks pretty much like …

Why Build a Progressive Web App?

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.

  • Worthy of being on the home screen – When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.
  • Improved conversions – The ability to deliver an amazing user experience
  • Work reliably, no matter the network conditions – Service workers will enable apps to send less data for initial page loads, and less data to complete the first transaction
  • Increased engagement – Web push notifications will help increase engagement by 4 times.

How to Improve the Quality of Progressive Web Apps?

LIGHTHOUSE

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module.

Run Lighthouse in Chrome DevTools

Lighthouse now powers the Audits panel of Chrome DevTools. To run a report:

  • Download Google Chrome for Desktop.
  • In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
  • Open Chrome DevTools.
  • Click the Audits tab.
To the left is the view port of the page that will be audited. To the right is the Audits panel of Chrome DevTools, which is now powered by Lighthouse.
  • Click Perform an audit. DevTools shows you a list of audit categories. Leave them all enabled.
  • Click Run audit. After 60 to 90 seconds, Lighthouse gives you a report on the page.

Reference

Progressive Web Apps

Related Posts