A Rundown on PWAs

The Basics

Let's start with the very basics: What is a PWA? It stands for Progressive Web App, and to really understand the full capabilities of them, you first need a base level of understanding of both a normal website and a platform-specific app.

Starting with Websites...

So what's a website? Well, as odd as the question may seem, there's several traits to a website that are important to consider when making or looking into a PWA. A website is something hosted on the internet - obviously, yes, but it means a few things for us as users and developers.

• A user doesn't download a website to their computer; it doesn't take up space, it isn't something you need to install, it's just hosted on the internet.
• Websites, BEING hosted on the internet, are inherently compatible with pretty much any device that can get an internet connection -
• However, being hosted on the internet, you can only really access them THROUGH it; they can't really do anything while you don't have your browser open, and they can't be visited or used without a connection of some kind.

Traditional websites are incredibly versatile when it comes to accessibility and compatibility, but they're limited in that they can't really DO anything outside of the browser and without a signal you can completely forget about looking up adorable cat photos (reference included, of course).

How about Platform-Specific Apps?

Platform-specific apps are pretty much the opposite of websites in most ways. They're installed directly to the device, but are, as the name implies, built specifically for certain platforms. The apps you find in your phone's app store are platform-specific ones! With that in mind, let's go over some of the things that make them so different from websites that I'd call them opposites:

• Being built specially for certain platforms, they lack the almost global compatibility websites inherently have, making your ability to use them entirely dependent on what devices you have available.
• Being installed directly onto your device, they take up storage space where a website wouldn't, but...
• They're pretty much always available once you DO have them - accessing one is as simple as pressing the app's icon, and -
• They have the ability to run and function in the background, even when you're away. This is useful for things like delivering notifications while an app is closed or quietly updating while you aren't using it.
• Additionally, they can be given access to other parts of your device to make various every-day features possible. This can range from all sorts of things, like taking or uploading pictures to other apps, to sharing your location with your friends or helping you find your way to that hot new café on the other side of town.

Platform-specific apps are more limited in who can use them, but are much more integrated into your device, so that if the app IS built for your operating system (OS), you can do quite a bit with it.

But weren't we meant to be talking about PWAs?

Yes, yes, I know, that's up next - now that we've established an understanding of sites and apps, we can go over what PWAs actually do. They're essentially the best of both worlds; they take all the good features from both websites and platform-specific apps, and mash them into one, resulting in hyper-compatible, accessible, and integrated web apps that can be used by virtually anyone (virtually, by anyone!).

Let's go over some of the features of a PWA, then we can talk about some examples of popular ones that maybe even you use!

• Like websites, they use standardized technologies, allowing them to be used by basically any device without having to explicity implement compatibility with other operating systems.
• Due to being web-based, they can be accessed directly from the web, meaning you don't necessarily have to download anything to use them,
• But like platform-specific apps, they CAN be downloaded, either directly from the web or from your device's app store!
• Once you HAVE installed the app, it can be used without needing your browser open all the time, and can be easily accessed via a dedicated icon on your device just like a platform-specific app.
• They can work in the background or receive updates while not in use, and can have access to features of your device just like a platform-specific app.
• Unlike websites, they can work even while offline, and can make use of the entire screen where a website would be limited to the browser's UI.

PWAs are, essentially, an app for your device that acts as a portal to a website. They look and act like like a platform-specific app (albeit much more compatible with other operating systems) but they still, technically speaking, are websites. They have the benefits of a platform-specific app, but run on a browser engine, which acts as a middle-point between the app itself and the OS (unlike a platform-specific app, which interacts DIRECTLY with the OS). The browser engine essentially just does its thing in the background, and as far as the PWA is concerned, you're basically still interacting directly with the OS. But the fun part about technically being a website is that PWAs can also be treated like one. They utilize at least one HTML file, can be decorated with CSS, and may even use some behind-the-scenes JavaScript, exactly the way you would - including access to the global window object and its methods as well as any web APIs available through it. PWAs are overall an incredible bridge between the average website and a dedicated platform-specific app.

That's pretty much it from me, but as promised, some examples of PWAs in the real (virtual) world include Starbucks, Spotify, Uber, Forbes, Google Maps, Trivago, Facebook, The Washington Post... Odds are you use PWAs ALL the time even if you didn't know what they were before now. Hopefully you got some good use out of this, and as always, I'd encourage you to do some research about the topic on your own!

Before I go, I'll mention that for pretty much all of my research (all except the examples of real-world PWAs that I found) came from the MDN Docs on them, and I found them very informative personally. I know this post was a bit of a text wall, but there aren't many visuals to show for the concept of something I'm not currently working on. That being said, there's a diagram on MDN that might help clear up the relationship between PWAs, the browser engine, websites, and your OS if you found that part confusing. Have fun with your research!