June 1, 2017

What Are Progressive Web Applications?

Progressive web apps are the latest attempt to bridge the gap between the mobile web, native apps, and web applications. However, if you think this is something new, progressive web apps are not actually new. The majority of mobile browsers have offered the ability to bookmark a website to the phone’s screen since 2011 (2013 for Chrome Android). In fact, The Financial Times has been using a progressive web app to deliver mobile content since 2012.

Here are some additional examples of progressive web apps and what they are used for:

1. QR Code Scanner – QR Code Scanner is a progressive web application that allows users to scan QR codes from anywhere.
2. English Accents Map – Watch English accents videos and get an insight into the different ways the language is used by native speakers around the world.
3. Currency-x.com – Currency calculator offering the latest exchange rates.

As you can see, progressive apps have a variety of use cases and are designed with users’ convenience in mind. In this brief guide, we’ll go over everything you need to know about progressive web apps, with detailed characteristics and benefits so that you can decide if a progressive web app is right for your business.

Why We Need Progressive Web Apps

The general consensus is that apps are fast and websites are slow. Everybody, including the average web user, already understands that this problem is due to the fact that mobile web applications and websites simply aren’t built for smartphones and other mobile devices.

As a result, Facebook and Google first attempted to patch this problem by launch projects aimed at attacking the speed of web pages loading on mobile devices with Facebook introducing Facebook Instant Articles in 2015 and Google introducing The Accelerated Mobile Pages Project (AMP), which launched in 2016.

While some news organizations and other companies have embraced these solutions, they have not yet enjoyed widespread adoption. This is due to the fact that they offer little to no support for web features other than content, such as forms and scripts.

As app technology evolves, progressive web apps may finally provide the solution to bridge the gap between the performance of native apps and the web. With this solution, we may finally have a way to produce web apps that are both fast and reliable and are also ready for the mobile-first age.

Progressive Web App Characteristics

A progressive web app combines the best features of web and mobile apps. Put simply, it is a website that is built using web technologies that enable it to work just like an app. With progressive web apps, users can receive push notifications, install them to their home screens, and even work offline.

To be considered as a progressive web app, an application must have the following characteristics:

  • Progressive. A progressive web app must work on any device and offer cross-browser support.
  • App-like UX. Every click of a button or link should result in an immediate response. Actions should be accompanied by placeholder loading screens as users wait for a response from the network.
  • Installable. Users should be able to install it on their device’s home screen.
  • SEO-friendly. It should appear in the search engines with appropriate metadata provided.
  • Shareable. Users should be able to share the app via a single URL. Individual pages should be deep-linkable.
  • Responsive. It should offer a responsive design to ensure that it works on any device.
  • Offline Access. It should offer offline or low connectivity access.
  • Secure. Progressive web apps should always be hosted over HTTPS and prevent mixed content.

The most important thing to know about progressive web apps is that they do not require installation. Progressive apps are not available in Google Play or the iTunes App store. To download a progressive web app, all you need to do is visit its website it and add it to your home screen as a shortcut.

Application Shell Architecture and Service Workers

For speed and functionality, progressive web apps rely on two features: Application Shell Architecture and Service Workers. Service Workers are the foundation of Application Shell Architecture.

Service Workers help to increase web app performance by caching and delivering content, allowing for instant loading. Service Workers are also what make it possible for progressive web apps to function offline.

The Application Shell is served by the Service Worker. Combining these features enables users to see the shell of the app before the content itself loads, thus delivering faster load times. In fact, during testing Google developers found that combining Application Shell Architecture and Service Workers drastically reduced the time it took for sites to load over mobile connections, reducing it to just 0.5 seconds per request.

If your site is very small, you probably don’t need to make use of an application shell. However, if you are building a complex app, it makes sense to use this technology for better performance.

Progressive Web App Benefits

Progressive web apps provide features that can help to aid the growth of your business or organization. Building a progressive web app offers many benefits, namely:

  • Featured on the home screen. When you offer a high-quality progressive web app, users will feel compelled to add it to their home screens.
  • Increased engagement. Using a progressive web app can deliver higher engagement as users spend more time on your site.
  • Higher conversion rates. Delivering an amazing user experience translates to higher conversion rates and potentially more sales for your business.

The most common app development plan for a business is to build a native Android or iOS, in addition to a website. However, progressive web apps can potentially replace the functions of both native apps and websites given the ability of progressive web apps to work well across platforms.

Conclusion

Progressive web apps are starting to gain more traction as users download fewer and fewer native apps. With support for native features, such as working offline, clipboard access, launching in full screen, and more, adoption of progressive web apps for business is only expected to grow.

There are some exciting developments on the horizon the world of web apps, thanks to increasing support for new technologies and added features. If you are considering a web app for your business, now is a great time to explore the potential of progressive web apps. Take 30 minutes with us to discuss your web development next project.


Estimate Calculator

How much does it cost to build your app? Use our interactive calculator to get an idea!



Get Instant App Estimate