What Is PWA: All You Need to Know About Progressive Web Apps
You should know up front that this post is written on a marketing 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).
PWA (Progressive Web Apps) are basically web apps, which are applications on the web. 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 Apps 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.
[caption id="attachment_12007" align="aligncenter" width="1418"]
Instagram website is a PWA[/caption]
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.
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:
[caption id="attachment_12015" align="aligncenter" width="533"]
Normal websites[/caption]
Let’s take a look at our demo PWA website Tapita.io as an example:
[caption id="attachment_12013" align="aligncenter" width="600"]
Progressive Web Apps[/caption]
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!
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.
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.
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.
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://whatwebcando.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).
I’ll tell you why you should not think twice when it comes to PWA in terms of how PWA is better than normal websites and native apps.
PWA is better than normal websites at:
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.
Also, remember when I said our demo website Tapita is a PWA? Yes, you can access Tapita.io to experience the smoothness and speed of PWA.
For an example of an e-commerce PWA site, you can visit SimiCart demo PWA on your phone: https://cody.pwa-commerce.com/.
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 first quarter 2018, there are nearly 4 million apps on Google Play and over 2 million apps on Apple App Store (Statista, 2018). 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. I’m gonna end this post with a quote in Tapita’s About Us page:
“We founded Tapita with a belief: Progressive Web Apps is the future. With its speed, layout flexibility and feature capability, PWA is destined to replace desktop site, mobile site, and even native mobile apps.”
What is PWA?
PWA (Progressive Web Apps) are basically web apps, which are applications on the web. 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 Apps 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.
[caption id="attachment_12007" align="aligncenter" width="1418"]
Instagram website is a PWA[/caption]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:
[caption id="attachment_12015" align="aligncenter" width="533"]
Normal websites[/caption]Let’s take a look at our demo PWA website Tapita.io as an example:
[caption id="attachment_12013" align="aligncenter" width="600"]
Progressive Web Apps[/caption]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.
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.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://whatwebcando.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?
I’ll tell you why you should not think twice when it comes to PWA in terms of how PWA is better than normal websites and native apps.
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: This is also made possible by Service Workers technology. All contents are pre-loaded the first time you visit the PWA and are delivered afterwards using Javascript. This is why it can work offline. After the first load It doesn’t need to request anything more from server to deliver the contents. (This doesn’t work if you have never visited the PWA and try to browse it offline, however, since it needs at least one visit to load the contents.)
- 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.The old “Add to home screen” prompt on Chrome will look something like this:
Now it looks like this: (I prefer the old one)
- 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!
- Low development cost: Since PWA can be developed once and then be applied to any mobile platforms, the development cost for PWA is relatively small compared to native apps’. Another reason is that PWA use programming languages and technologies that are more commonly understood and have a much larger developer base.
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.
Also, remember when I said our demo website Tapita is a PWA? Yes, you can access Tapita.io to experience the smoothness and speed of PWA.For an example of an e-commerce PWA site, you can visit SimiCart demo PWA on your phone: https://cody.pwa-commerce.com/.
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 first quarter 2018, there are nearly 4 million apps on Google Play and over 2 million apps on Apple App Store (Statista, 2018). 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. I’m gonna end this post with a quote in Tapita’s About Us page:
“We founded Tapita with a belief: Progressive Web Apps is the future. With its speed, layout flexibility and feature capability, PWA is destined to replace desktop site, mobile site, and even native mobile apps.”
Comments
Post a Comment