Schuff Software Company

Schuff Software Blog

Progressive Web Apps

By: Marcus Schuff

Thursday, November 30, 2023, 9:49 AM

What is a Progressive Web App?

A Progressive Web App, or PWA, is a software application that is delivered over the internet using web technologies such as HTML, CSS, and JavaScript. What does that all mean? Well, basically it means that a PWA is a website that can be installed like an app on your phone, tablet, laptop, or desktop computer. You can use a PWA in a web browser, or once you install it, it can be opened in its own window like a native app.

Progressive Web Apps

The great thing about PWAs is that they can work on all devices with a single codebase. This  makes development costs significantly lower to build a PWA vs. native Android and iOS apps. Typically, building native apps for Android and iPhone requires two separate codebases, one for Android, and one for iOS. If you also want your app to run on Windows and Mac, then that’s two more codebases that add on additional costs to building your app. A PWA is a single codebase that works on all devices, regardless of the operating system. Developing and maintaining a single code base is much less expensive than developing and maintaining four codebases.

How do PWAs work on all devices? The secret is the Google Chrome or Apple Safari web browser that is already installed on your device. With PWAs your device’s web browser is doing all the heavy lifting, while running silently in the background. Progressive Web Apps can leverage the strength of your browser to deliver apps that look, feel, and behave like native apps.

You may not realize it, but everytime you go to Facebook.com, Twitter.com, Reddit.com, or YouTube.com on your browser, you’re actually using a Progressive Web App. Below are some screenshots of Facebook’s PWA on the left and Facebook’s Native Android App on the right.

Android PWA vs. Android Native App

Why aren’t all apps PWAs? There are some advantages to native apps, including speed and security. That doesn’t mean that PWAs are slow and insecure. In fact PWAs are more secure than your typical website as PWAs are required to use the HTTPS protocol so that the connection between the app and server are secure. This is the same security protocol used by your bank’s website. Native apps run directly on the device’s operating system, while PWAs run inside a minified web browser that is running on the device’s operating system. Since the PWA has to request resources from the browser, and not directly from the operating system, the advantage in raw speed goes to the native app.

Native apps and PWAs can be installed a little bit differently. A native app is typically installed from either the Apple App Store or the Google Play Store. A PWA can be installed from the App store, but they don’t have to be. You can install a PWA directly from your browser. If the PWA is not featured in the App or Play stores, then app owners do not have to pay a 30% commission to Apple or Google for all In-App purchases. This is another financial advantage of PWAs.

Websites that are also PWAs have the option to install right from the browser’s address bar. The image below shows the icon that indicates that the website you're visiting is an installable Progressive Web App.

Facebook PWA Install

Here is a video showing how to install a PWA from an iPhone or iPad:

Here is a video showing how to install a PWA on an Android device: 

Here is a video showing how to install a PWA on Mac and Windows:

For more reading on this subject, please see the following links:

Native apps vs. progressive web apps (PWAs): Everything you need to know: https://www.adjust.com/blog/native-app-vs-progressive-web-app/

Wikipedia Article: https://en.wikipedia.org/wiki/Progressive_web_app

What are Progressive Web Apps? https://web.dev/articles/what-are-pwas


#pwa, #web, #progressiveWebApp, #html, #css, #javascript