What is a Progressive Web App?
A Progressive Web App or PWA is an advanced version of a website with direct access to hardware and the ability to work offline, allowing PWAs to perform much faster and to provide functionality previously only available to native apps.
“Progressive web applications (PWAs) are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are 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 mobile devices. Since they are a type of web page 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.” – Wikipedia
Progressive Web App Facts
- You can access a PWA by either visiting a given URL (e.g. Twitter.com) or by adding a PWA to your device from said website or an app store.
- Supporting websites will prompt you to add their Progressive Web Apps to your home screen if you’re on mobile (or you can manually do it via Chrome’s add to home screen option).
- Installing a Progressive Web App on your desktop might require you to hit the “+” sign that appears in the address bar on Chrome.
- You can receive notifications on your smartphone or PC from the PWA as if it were a native application. That means you don’t have to actually open the PWA in order to see what’s new.
- Progressive Web Apps can be installed on your smartphone or PC. This means you can see the PWA listed in your app installation directory, for example.
- Progressive Web Apps offer offline functionality, notifications, and can be found in your app directory.
- Progressive Web Apps can also deliver offline functionality, as opposed to merely seeing a 404 screen or blank page if you’re using a website or conventional web app while offline.
- Progressive Web Apps must be served from a secure source (HTTPS), going some way to ensure that you don’t encounter malware or any other suspicious content.
- Progressive Web Apps are responsive, the website content will adjust according to the device being used.
- Check out the characteristics of a PWA according to Google Developers
Check out the characteristics of a PWA according to Google Developers
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.
- 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 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:[14]
- 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.