VueMastery – Progressive Web Apps w- Vue 3

What are progressive web apps? While web apps are a powerful, popular solution for reaching your users, what happens when you need a mobile app? Rather than having to rewrite your entire app with a mobile language like Swift or Kotlin, what if we could leverage our existing work and allow users to install our web app like a mobile app?

Well, with a technology known as progressive web apps, you can!.

Progressive web apps (PWAs) are founded on the idea that web applications should have an app-like experience. There are three primary benefits

Ability to install it locally: Web apps used to be limited to users remembering the URL or bookmarking it, but now users can add your app to their mobile device’s home screen like any other app.
Users can use your app offline: Web apps also used to be bound by whether a user was connected to the internet, but with PWAs, this is no longer a limitation.
Ease of access: As long as users have a modern browser, they are able to install your app without being restricted by the app store marketplace.
In addition, there are also features that allow you to leverage things like
• Offline storage
• Push notifications

What are the drawbacks?

While PWAs are great, it’s essential to understand that they are not replacements for natively built apps and by no means make native apps obsolete. Since PWAs don’t run natively on the device, this means that they are limited in terms of functionality that you might expect from a native app, such as
• Bluetooth
• NFC
• High storage capacity

In addition, similar to the issues we deal with when it comes to browser support for certain features, not all features are supported across the ecosystems. For example, at the time of this recording, features like PWA push notifications work on Android but are not supported on iOS.

While this may sound like a deal-breaker, remember that a vital part of any technology is understanding the trade-offs. And the truth is that for a lot of apps, these features are not necessary, and users can get a lot of benefits without them.

There are, as they sound, a progressive web app.

Let’s ReVue

The keyword to focus on when it comes to PWAs is “progressive.” In other words, while it may not be feature parity with mobile apps, this is a progressive enhancement that allows us to take another step forward with web apps. And there’s a lot to celebrate in that!

With that said, in this course, we’re going to take a look at how you can get started with Progressive Web Apps using Vue 3.