Hello World

Publish date: Jun 26, 2021

Tags:

New to this site? Read about this project to understand the objectives and explore the learning resources on your own.

Welcome!

“Hello World!” is typically the first program you write when starting a coding journey. It helps validate your development environment and gives you the foundational structure from which you build up your knowledge.

My “Hello World” blog posts serve a similar purpose. They validate my blogging setup and workflow, and help me set the stage for what I want to achieve with the content. So let’s talk about both those things.

You’re reading this now - I consider that #AchievementUnlocked on the first goal! So let me focus on the second! Let’s talk about All Things PWA, starting with the basic questions:

What is it?
How is it different from other app frameworks?
Why should I learn it now?
What’s next?

What is a Progressive Web App?

Here’s the simple Wikipedia definition.

A Progressive Web App (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, including both desktop and mobile devices.

And a more nuanced definition from “web.dev” site:

Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application.

We can summarize the PWA value proposition with 3 points:

They’re built with common web technologies - lowers the learning curve.
They work cross platform - target mobile, desktop and browser platforms.
They have native-like experiences - comparable to platform-specific apps.

🚨 Terminology Alert:
From here onwards I’ll use platform-specific (instead of native) to refer to apps or experiences that reflect the look-and-feel associated with a specific device platfom or operating system.

Why use a PWA?

We already have great frameworks and tools to develop web-apps (that run cross-platform, in the browser) and platform-specific apps (that are optimized to use innovative features and performance enhancements on the target OS).

Why do we even need progressive web apps? This image from web.dev gave me a glimpse into the value propositions that each class of apps provides.

A graph plotting capabilities on Y axis vs. Reach on y-axis, with PWA at the top corner as a technology that delivers both

Here’s how I looked at it:

Web Apps > Have the broadest reach and discoverability. They can reach anyone, anywhere, on any device - with a single codebase!
Platform-Specific Apps > Have the best capabilities. They feel like they’re part of the device they run on, and take advantage of its built-in features.
PWA > Are built with web technologies and have comparable reach to web apps. And they have enhanced web capabilities, reliability and installability - to give them a comparable platform-specific experience.

PWA All The Things?

Not quite!

As an application developer, or as a decision maker, you need to evaluate various tradeoffs before you pick your path. Some things to think through:

PWAs have additional requirements to ensure that platform-specific experiences behave consistently across mobile, web and desktop targets. If your core audience is web-only, a traditional web app may be faster and easier to develop and support with modern frameworks and tooling.
PWAs depend on enhanced web capabilities to deliver platform-specific experiences. Unlike platform-specific apps (which target a device family or app store, and can benefit from device-specific innovations), progressive web apps rely on open web standards that must be supported by major browser platform vendors, before they can be used by app developers. If your application relies on a platform-unique software or hardware feature, a proprietary framework may suit best.

The good news: the path to PWA development and adoption is getting easier!

More modern web frameworks offer PWA support.
Ex: Create-React-App has guidance for building a first-class PWA.
More cross-platform app frameworks offer PWA support.
Ex: Flutter-Create now offers PWA support in it’s web template
More device platform vendors are supporting PWA in their app stores
Ex: Windows 11 has guidance on shipping PWA to Windows app store.
Browser platforms are closing the capabilities gap with device platforms.
Ex: Project Fugu, an multi-org standards-driven effort on web capabilities.

Why Learn PWA Now?

PWA hit an inflexion point in 2021 according to Forrester given that modern development systems are starting to provide the ability to generate PWA as an output format.
New PWA training was released by Google Developers to reflect huge strides made in four years and to teach you how to build reliable, installable, and capable Progressive Web Apps for all devices.
New PWABuilder (v3) was released by Microsoft with starter kits and guidance for shipping PWA to app stores, including a report card that evaluates app-store readiness and suggests fixes if required.

What’s next?

I’m collecting learning resource for self-study and exploration. My plan is to explore core concepts first using the PWA training, then explore development and workflow using the PWA Builder resources. I hope you can join me.