Progressive Web Apps - Blurring the Lines between Web and Mobile Apps
Tags: mobileapp, nativeapp, pwa, progressivewebapp
Published: 2018-07-28 10:48:54

---
title: Progressive Web Apps - Blurring the Lines between Web and Mobile Apps
published: true
description: 
tags: #mobileapp #nativeapp #pwa #progressivewebapp
---

![Progressive Web Apps](https://thepracticaldev.s3.amazonaws.com/i/u3yc5tqxb43ijno5ia2r.jpg)

<p style="text-align: justify;">Steve Job jobs kicked off the smartphone revolution when he introduced the iPhone and on the iPhone there was kind of mobile browser but it was a poor experience of going online. A year later Apple kicked off the App Store and you've got the native apps and this is a really good way of getting online in interacting with online content and I'm sure you've all use that loads of apps over the last 10 years.</p>
<p style="text-align: justify;">Gmail app for sending emails, Twitter for sending tweets, and Snapchat for sending two delightful pictures of yourself. Talking about view time with those apps, I'm sure you would have spent many weeks and months playing Flappy Birds</p>
Since 2008, the mobile web has increased dramatically.I'm sure that many of you are reading this in Chrome.

<strong>What is exactly a Progressive Web App (PWA)?</strong>
<p style="text-align: justify;">Well, the idea goes back to 2015 in an article written by Alex Russell, who is a Google engineer. In there, he outlined the requirements for PWA, or progressive web applications. Since then, the whole industry has been working towards progressive web apps. So, Google Chrome supports it. Edge will be supporting it in Redstone4. Even Safari is getting a version of it in11.3, later on this year.</p>
<p style="text-align: justify;">What makes progressive web apps unique are its abilities. For the first time, web applications can work offline and in the background,and that's done through a thing called service workers.</p>
<p style="text-align: justify;">Think of service workers as little web components that work in the background. They pull in notifications. They cache app data. That's how they work offline. When you launch a progressive web app, it doesn't look like you're in the browser. It looks like an application.</p>
<img class="aligncenter size-full wp-image-6526" src="http://www.topsinfosolutions.com/wp-content/uploads/2018/07/instagram-native-and-pwas.png" alt="instagram-native-and-pwas" width="740" height="450" />
<p style="text-align: justify;">For instance, Instagram has a PWA. If you go to Instagram on your Android phone, assuming it's a modern one, and you log in, you'll be asked if you want to pin this to your start screen or your application screen and would you like to receive notifications. Once you do that and then you open that app, it looks just like the regular Instagram application. In fact, the scrolling is better than a native app of Android, which tells you a lot.</p>
<strong>Progressive Web Apps vs Native Apps</strong>

<img class="aligncenter size-full wp-image-6523" src="http://www.topsinfosolutions.com/wp-content/uploads/2018/07/PWA-Features-comparison-with-Native-apps.png" alt="PWA Features comparison with Native apps" width="740" height="345" />
<p style="text-align: justify;">Native apps have a huge benefit in loads of areas: they are fast and quick to respond. You've got a really nice icon that you can click on. As soon as you click on that, you get really nice ‘scaffolded’ app screen that comes up. Let's say you go onto Facebook. It's kind of a nice blue look and you have a Facebook icon.</p>
<strong>Benefits of Native Apps</strong>
<p style="text-align: justify;">When I get my Twitter wrap up,I've got a load of tweets there. From Twitter app, I can see those straightaway there's no going into Chrome and trying to find a URL and load up a page.</p>
<p style="text-align: justify;">Apps also have a smooth consistent, self-contained UI that looks really good on your smartphone. The best part is this that native apps works consistently well offline.</p>
<img class="aligncenter size-full wp-image-6525" src="http://www.topsinfosolutions.com/wp-content/uploads/2018/07/PWA-vs.-Native-Apps.png" alt="PWA vs. Native Apps" width="740" height="345" />
<p style="text-align: justify;">If you are checking your emails in no dead zones, that's not a matter. You can check your emails in basements, tube stations, and other no coverage areas the app seized during the day. You can even reply to those emails. When you come in coverage area, it goes and all works well.</p>
<strong>App Development can be Painful</strong>
<p style="text-align: justify;">Native app development can be painful. There are different languages between Android and iOS. You got Java. Perhaps, your funk-in-hipster uses Kotlin. Otherwise, you're using Swift. You can use React Native and still have to change the way you develop a whole load of things.</p>
<p style="text-align: justify;">In React Native, you have to do different stuff depending on the platform you're on and even then you can have to develop differently for the web. You're already developing for three different platforms. It's expensive to develop.</p>

<p style="text-align: justify;">If you want to release apps on the web, it goes to your customer straightaway whereas a native app you have to go through app stores’ certification. There are separate app stores for Android and iOS.</p>
<strong>Progressive Web Apps to the Rescue...</strong>

One of the best things about progressive web apps is it used web standard technology. It uses JavaScript. It uses JSON.

It got most of the benefits of native apps, including performance and UI tweaks.

Write once work everywhere. You just build it once and hopefully it should work everywhere. You have one team. Maybe you need a few tweaks depending on the target platform.

<strong>What does Progressive Mean?</strong>
<p style="text-align: justify;">In the old days, we just have static HTML pages and then JavaScript came around and we wanted to enhance our pages. JavaScript can make the app faster and feel better but if you didn't run JavaScript, it would still work. It's a kind of the same thing. Progressive enhancement is a whole bunch of features that you can add to your app. There's a level that Google lists and each of these should improve the experience for the customer. If their platform doesn't have one of those features, it shouldn't break your app.</p>
<p style="text-align: justify;">Progressive web app is a case of extra technologies. They can add to the performance of your app. With more of the features, the benefits across desktop and web kind of always keep comparing against native apps but a lot of these performances are also on the website.</p>
<p style="text-align: justify;">If you have a website you don't really care so much about your mobile customers, a lot of these technologies can really improve the performance of your websites.</p>
<strong>Discoverability and Future of App Stores</strong>
<p style="text-align: justify;">Since progressive web apps are websites at the end of the day, app stores don't need permission from their publishers to publish on their platform. All they're doing is putting websites in the store. They will act much like websites directories. App stores will have to look at PWA sites that are live right now and if they meet certain standards, they're going to be putting these in the store automatically. So, we can expect probably a couple hundred maybe even a thousand of these things to all of a sudden show up in the store.</p>
<p style="text-align: justify;">Now since no money is being transpired here, the app store is not making money on ads through these things. It's all just pulling in a website from a company. There's no reason there that a company needs its permission. Twitter is Twitter. If Twitter wanted to deny a PWA on Windows10, they would be effectively saying, you can't go to twitter.com on your web browser, which would be insane.</p>
<p style="text-align: justify;">By putting progressive web apps right in the store and it's going to be therefor users but without the discoverability problem of having to go to the website,log in and then pin it to your start screen. It's a unique thing and it should be happening a lot more in coming times.</p>
<strong>What is the State of Progressive Web Apps Right Now?</strong>
<p style="text-align: justify;">Many progressive web apps are already out there, including Google Maps. You can pin it to your start screen and have a PWA of Google Maps that uses your location and works just like the app itself.</p>
<p style="text-align: justify;">Starbucks has a preview version. If you go to <a href="https://app.starbucks.com/">app.starbucks.com</a> on your phone,you can see it there, log in, and pin that to your start screen and that is a PWA, as well. You also have Twitter, you have Instagram,you have Tinder, you have Uber, and you have Lyft. Even Pinterest has a PWA. All the major companies are embracing this, because again, companies hate paying developers. They would rather just have a web developer, make a PWA website, and call it a day.</p>
<strong>What does the Future Hold?</strong>
<p style="text-align: justify;">I also expect a lot of banks to jump into this because maintaining a banking app is super expensive. There's a lot of security involved. There are many laws, in effect,that they need to be compliant with. That's one reason why Windows 10 always had an issue with banking apps. They're very expensive to maintain.</p>
<p style="text-align: justify;">But, what is always maintained? A banking website. In fact, that is updated even before any iOS and Android apps. So, if a bank can maintain a PWA website, well that's a win-win for everybody, including them and their consumers.</p>
<a href="http://www.topsinfosolutions.com/inquiry/"><img class="aligncenter size-full wp-image-6527" src="http://www.topsinfosolutions.com/wp-content/uploads/2018/07/CTA2-1.png" alt="CTA2 - PWA" width="740" height="150" /></a>

The post [Progressive Web Apps - Blurring the Lines between Web and Mobile Apps](http://www.topsinfosolutions.com/blog/progressive-web-apps-web-mobile-apps/) was originally published on [TOPS Infosolutions](http://www.topsinfosolutions.com)