San Diego Web Development Blog

Part 2/3

If you haven't read part 1 of this series, we would recommend you start there: Part 1


Okay, you say.. I understand that you think Progressive Web Applications are the way of the future, but come on.. we already have three different solutions- Native Applications, Traditional Web Applications, and Hybrid Applications. Why do you think this newest option is so much better?

The problem with native applications

Following from our example from last time, what would happen if we wanted to build an application to control our coffee machine from another device? Maybe a study shows that coffee drinkers would drink more coffee if they didn’t have to spend so much time watching the machine waiting for it to brew. At this point, most coffee companies today would most likely build a native iOS application so that users could control the coffee machine from their iPhones, and then 6 months to a year later they would release a version of the application for Android. On their website the coffee company would promote the new application and tell users to go to their Apple / Play stores to find and download the app.

The problem with this is that in today’s day and age native applications are becoming a less sustainable concept. There is not just one type of device, there are many, and the numbers are growing. There has always been the battle of iPhone over Android, in part, companies are made to choose which audience “aligns more with their brand” or they need to pay a lot of money to build multiple native applications. This might be fine if we were talking about 2 devices, but technically there are plenty more and growing. On top of that, there are tablets, watches, car dashboards, and tvs; soon there will be mirrors, coffee tables, and everything in between. 

Native applications have several inherent issues:

  • High cost - Companies have to create a new native application for every device they want to support. If a new device comes out, they have to decide if they want to build a new version of their application.
  • High bar of entry - Getting users to find, agree to your app permissions, and then download your application takes a lot of effort. Users have to *really* like your brand or product to get them to search you out and install your app. Accessing your application data on a new or different device once again requires that you repeat all of the work to find and install the application on your new device.
  • Limited branding and experience - Native apps are traditionally built to perform base functions, and the experience is second to the functionality. They all look the same, and do not provide impactful branding or an engaging user experience. This is especially evident in the iOS market where Apple actually enforces a consistent look and feel for all applications on their platform.

Download the FREE Progressive Web App Whitepaper

 

The goal of any business is to reach as many users as possible; provide them with a low level of entry to access the company’s product, service, or content; provide them with a consistent user experience at all touch points; and encourage them to re-visit the business soon. As the device market begins to expand and change, it does not make sense for companies to pay to build native applications for every device that gets released. This also sets an unrealistic bar of entry for device manufacturers, because even if their new device is amazing, nobody is going to buy them if the consumer does not have access to all of their favorite games and apps.

The problem with traditional web applications

"But wait!" You say. "There is already a technology available that allows you to create applications that run on almost any device- web applications run in the browser and allow companies to build complex user applications that work cross-device." Not so fast... there are a lot of issues with traditional web applications that prevent them from being a real cross-device solution:

  • Restricted to the browser - Traditional web apps must run in a browser. They are not able to be launched from the home screen of a device, and instead a user must open a browser and then navigate to the application url.
  • Creating native web apps still requires extra work - Web apps can technically run "natively" without being a Progressive Web App. However, this still requires extra coding to be done to create “native wrapper applications” which run the web app within native device code. Native web apps tend to be really slow, and still increase the cost of building your product or service.
  • Slow performance - Traditional web apps are often very slow to load and to perform because everything must load over the internet. They do not have the same instantaneous feel of a native application.
  • Limited availability - Web apps rely on the internet, if users have spotty or no connection, then they are unable to run the application.

 The problem with hybrid applications

Now you are probably thinking, "Ok, but didn't they already try to do this with hybrid applications?" The answer is both yes and no. A hybrid application is a web application that is embedded inside of a native application router. Which was probably a little too literal of a take on the phrase, "the best of both worlds." Hybrid applications leverage a web application to provide the core functionality of an application, and then separate native wrappers are created in order to package and add the apps to the corresponding app stores. They were a big step toward the development of PWAs, as they were the first big attempt at solving the problem of the high cost and time involved in building separate native applications for every platform. However, hybrid applications are not *that* great in their actual implementation. They tend to have:

  • Slow performance - Since the web app is running most of the show, hybrid applications tend to have subpar performance.
  • "Clunky" experience - Having native functionality translated to a web framework does not generally work out as well as desired, and as a result many hybrid apps do not provide a smooth user experience.
  • Still adds cost overhead - Hybrid apps still require 3+ applications to be developed and supported, they just save on time and cost because the core of the application does not need to be re-written. However, these apps still require a new app to be built for every device which is not sustainable to the exponential growth in technology that we are experiencing.

Okay... so why are PWAs so different?

Progressive Web Applications, are still just web applications. However, they meet certain criteria which enables them to provide a more native-like experience to users. The biggest difference for the user between a Progressive Web App and a regular web app, is that a PWA will prompt the user to install the application when visited in a mobile browser. If installed, the user will then have a shortcut to the application right on their homescreen, or in their application drawer, just like a native app! Another huge difference is that a PWA can be take over the full device display (like a native app), will always work, even when there is no internet connection or when in airplane mode.  

Google created Lighthouse is an open-source tool that can be run in Chrome DevTools, from the command line, or as a Node module. The report produced by Lighthouse has a section dedicated to Progressive Web Apps. The baseline feature checklist to make your web app into a PWA so that a user can install it is below:

  • Site is served over HTTPS
  • Pages are responsive on tablets & mobile devices
  • All app URLs load while offline
  • Metadata provided for Add to Home Screen
  • First load fast even on 3G
  • Site works cross-browser
  • Page transitions don’t feel like they block on the network
  • Each page has a URL

These features ensure the web app offers a high-performing, responsive experience capable of leveraging the latest browser technologies.  Once this checklist is met, the browser will treat your application as a PWA and will allow the user to install the app to their mobile device. Want more? The final post in this series will be released in a couple days... the finishing touch to help you fully understand how awesome Progressive Web Apps can be for your business.


 Until then, feel free to download our whitepaper below, for a FREE comprehensive guide of Progressive Web Apps!

FREE non-technical guide to PWAs

New Technologies Web Apps

UP NEXT