Progressive Web Apps

What Is PWA? All You Need to Know About Progressive Web Apps

You should know up front that this post is written on a marketer’s point of view. (Well, I can read and write some HTML and CSS, I can understand Javascript to some extent, but that doesn’t make me a techie).

If you’re here, chances are you were bombarded by the recent constant throwing of this “PWA” word and want to know more about what this word really means.

Well, say no more, as in this article I’ll cover everything there’s to know about Progressive Web App — from what it means, how do you know if a website is a PWA, and what it is to our current technological sphere.

What is PWA?

PWA is short for Progressive Web Apps. The term was first introduced by Google back in 2015. The “progressive” part, according to Pete LePage – Google Developer Advocate, can be explained as “as the user progressively builds a relationship with the app over time, it becomes more and more powerful”.

Make no mistake: Progressive Web Applications are still websites. They just look and feel like an app, thanks to modern web technology. This means users will browse Progressive Web Apps on their browser with an URL just like they do any website, but right after they land on the PWA, they get the experience of using an “app”, right on their browser, without the need to download and install. How cool is that!

Being an “app” does not mean PWA is limited on mobile. They can be implemented on desktop as well. In fact, chances are you have frequently visited PWA before without you even realized that. If you’ve ever browsed Instagram, Pinterest, or Tinder on your laptop, then congratulations! You’ve encountered some of the most successful adopters of PWA on the web.

Instagram PWA
Instagram website is a PWA

So how do I know if a website is a PWA?

Well, you don’t. At least not for sure. Unless you are a developer and dig into the site’s source code, there is no certain way for you to tell exactly if a website is built upon PWA technology.

That being said, there are a few tricks that, although doesn’t guarantee an exact result, can give you some signs that a given website is a PWA.

Single-page website

This is the simplest way to tell if a website may be a PWA. It is based on the nature of PWA: Progressive Web Apps are technically a single-page website. This doesn’t mean a website built upon PWA only has one single page. It means the page view event happens only once, when a user initially load the website. Afterwards, all page loads are handled by Javascript. This is different to normal websites, where each page change causes a page reload along with its whole HTML source.

So how does this work? Well, very simple: take a look at the active tab on your browser. If the site is a PWA, when you change pages the site does not reload, meaning there is no “loading” animation on the browser tab.

We can tell The New York Times website is not a PWA:

non-pwa sites

Let’s take a look at our website, SimiCart, as an example:

SimiCart PWA

See what I mean? The site doesn’t reload when you change pages! Technically you’re just staying on one “page” the whole time. That’s why PWA pages load so fast and smooth. All the pages are pre-loaded the first time you visit the site and delivered to you afterwards. They’re not dependent on your network speed, and can even work offline!

Service Workers

No, this is not human workers. Service Workers is the name of the technology behind a Progressive Web App, which power its offline capability, push notifications and resource-caching. According to Google, Service Workers are at the core of PWA techniques. So, if we can figure out if a website uses Service Workers technology, we can tell if the site may be a PWA.

If you’re using Chrome-based browsers, you can check this easily by using the Inspector Tool. Right click on the website you want to check, click Inspect Element. Then, go to Application tab > Service Workers. You can easily see if there are any Service Workers on that site.

How to check service workers in browser

Again, this trick only gives you a hint of the possibility a certain website is a PWA. Although being a core part of PWA, Service Workers is not exclusive to PWA. Non-PWA websites can also take advantage of Service Workers to enhance their functionality.

If you want to find out more about PWA Service Worker, we have exclusive article for you to learn all about this amazing technology.

HTTPS secure origin

HTTPS PWA

You can, though, tell exactly if a website is not a PWA by looking at its URL. If a website’s URL starts with http:// instead of https://, it’s not a PWA. This is because PWA can only work on websites running on a secure domain, which is HTTPS.

What can Progressive Web Apps do?

At the point this article was written, PWA can already do most of the things previously exclusive to native apps. That includes access to device-level functionality like camera & microphone, GPS, offline mode, file access, and many more. To get an overview of what PWA is capable of, you can take a look at https://whatpwacando.today/.

whatpwacando.today

Please keep in mind that this site lists out mobile web features that are available in your current browser, so it may varies depending on the browser that you access this from (try browsing it from Chrome and then from Internet Explorer). Also, this list is up-to-date, which means the features that are unavailable today may be available when you check it again tomorrow (well, maybe not that fast, but you get the idea).

Why do I ever need a Progressive Web App in my life?

Progressive Web Apps is the technology that’s driving competitions almost everywhere—from the Windows platform to major app marketplaces such as Google Play Store; and that’s all understandable, considering that PWA is projected to be the next natural step in Evolution of Web Technology.

So why PWA? Well, that’s the surprising part. A table chart should be able to sum this up way better than I could:

PWA perks comparison

And if you’re in the mood for some in-depth learning, I’ve got you covered. Compared to, say, a website, a PWA is superior because of the following reasons: PWA is better than normal websites at:

  • Speed: Given the same content, PWA loads faster than normal websites thanks to Service Workers technology. It is fast at first load and even faster on second loads onwards since it pre-caches all contents and delivers them when needed.
  • Offline mode: Offline-availability is also made possible with Service Workers technology. With service workers properly integrated, all contents are pre-loaded the first time you visit the PWA and are delivered afterward using Javascript, making PWA the new go-to approach for websites whose uninterrupted experience is a must. We have a guide about How to make your PWA work offline, in case you’re ever in need of one.
  • Add to home screen: This function prompts mobile users to “install” the PWA. After the user accepts the prompt, the PWA will be added to their mobile home screen, and it will run like any other installed app. Here is our guide to PWA Add to Home Screen. Don’t miss it!

The old “Add to home screen” prompt on Chrome will look something like this:

old add to home screen

Now it looks like this: (I prefer the old one)

new add to home screen

And not only is PWA better than websites, but brands are also now choosing PWAs over native apps because of the following perks that PWAs bring:

  • Cross-platform: Once PWA is built, it can be accessed via any mobile platforms like Android, iOS, or Windows, since PWA is browser-based, not OS-based.
  • Up-to-date: Changes made to PWA will take effect immediately, as soon as users refresh the page.
  • Indexability: Because PWA is still technically a website, its content can be indexed and discoverable on search engines like Google. This opens up opportunities for SEO (Search Engine Optimization) practices, which enables PWA to reach a larger base of users compared to native app.
  • No need to publish: With native apps, the app stores publishing process can sometimes be a real pain. Imagine submitting your app to app stores, excitedly waiting for 5 days, only to get back a rejection with a reason that takes you 10 times to re-read and still don’t know what it is talking about. And in some cases, your app may never be accepted, ever. (Sex shops or vape products, anyone?). With PWA, there’s no app submission. What a relief! In case you want to publish your PWAs to Apple Appstore, Google Play and Microsoft Store, here’s how!
  • Low development cost: Since PWA can be developed once and then be available to any mobile platforms and browsers that support it, the development cost for PWA is relatively small compared to native apps’. Another reason is that PWA uses programming languages and technologies that are more commonly understood and have a much larger developer base.

Okay, what’s the catch?

Obviously, all this sounds too good to be true; and when something seems too good to be true, it often is the case that way. PWA, despite its industry-defining characteristics, still have its drawbacks:

  • Browser Supports

While almost all of the current modern browsers supports PWA (e.g, Chrome, Firefox, Opera, and Samsung’s android browser, etc), there’s still some remaining, stubborn browsers who just refuse to support PWA such as Safari. This is due to the fact that supporting Progressive Web App, would mean supporting a future of all things PWA and that’s a big no-no for native application-oriented companies such as Apple.

Recommended reading: Progressive Web App vs Native App: Which Suits You Better? 
  • Compatibility

As the technology relies heavily on HTML5-abled browsers, it’s simply not functional on any browser that does not support it.

  • Reachability

Seeing as the technology is still new and all, there’s no current app marketplace for PWAs which in turn reduces its ability to reach a wider range of audiences in a way. However, there are movements from known companies such as Microsoft with their incorporation of PWAs into Microsoft Store, making a future of all things PWA in Windows 10 doesn’t seem that far-fetched.

  • Communication with other installed apps

Since PWA is still fundamentally and essentially an app-like web-page, it can be limited in many ways. The biggest limitation might be that it is cross-application communicability limited, which might pose to be a problem for developers.

Join with thousands of other enthusiasts to receive the latest Magento and Progressive Web App news & tips.

What are some examples of Progressive Web Apps?

If you want to play around with PWA and see what PWA is capable of, I’d highly recommend https://pwa.rocks/. Yes, the website itself is a PWA, and the important thing is that it is a collection of Progressive Web Apps on different topics. From there you can find big names like Telegram, AliExpress, FlipBoard, to familiar games like 2048 or Web Flap (a PWA version of the formerly hit game Flappy Bird), to mini tools like Guitar Tuner, QR Code Scanner or Currency Calculator.

pwa.rocks

Also, remember when I said our SimiCart website is a PWA? Yes, you can access SimiCart.com to experience the smoothness and speed of PWA.

For an example of an e-commerce PWA site, you can visit SimiCart demo PWA at https://magento.pwa-commerce.com or check the PWAs of these brands.

Conclusion

In my personal opinion, Progressive Web Apps is the technology of the future.

“But will they replace native apps?”

I think not.

Yet.

As of fourth quarter of 2019, there are nearly 3 million apps on Google Play and over 2 million apps on Apple App Store (Statista, 2019). This number is still growing and it does not look like all those apps will be replaced any time soon. User habit is a thing and is not easy to change.

That being said, Progressive Web Apps do have great potential. At SimiCart, we believe Progressive Web Apps is the future. With its speed, layout flexibility and feature capability, PWA is destined to replace desktop site, mobile site, native mobile apps, and even native windows applications. Yes, you heard it right, windows applications. In the e-Commerce world alone, Progressive Web App is currently the go-to approach for store owners who want a light, responsive and engaging experience for online shoppers.

In fact, statistics show that a 1-month delay in PWA implementation can result in as much as $1.4 million loss in revenue, and another $6.8 million if brands decide to delay it for six months.

For e-Commerce store owners looking for an all-around perfect Magento PWA solution, here at SimiCart we offer a complete package for you and your store:

Is it helpful?

A knowledge craver who always strive to be wiser everyday.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments