Understanding progressive web apps and Ionic development

January 9, 2018, 9:00 am Categories:

Categories

HTML5. XML. AJAX. JSON. CDN. SEO. SEM. PPC.....and now Progressive Web Apps.

Despite being in its early adult years the World Wide Web has spawned a lot of marketing related buzzwords and acronyms (particularly over the last decade) which if you were to listen to certain claims that have been made might leave you thinking that the human race had simultaneously discovered the secret to eternal life, world peace and free energy.

The truth is, of course, a little more grounded and prosaic.

Once you cut through the hyperbole, marketing hype and window dressing that surrounds most of these technologies you quickly discover that they're actually simple to understand and quite straightforward to implement in your day-to-day development toolbox.

Over the course of this article we're going to look at one particular marketing term that's been steadily bandied around over the last couple of years: Progressive Web Apps.

By the end of this article we'll understand what they refer to, the tools and technologies they make use of and how they apply to Ionic Application development (and I promise we won't be chasing rainbows or unicorns along the way!)

So what is a Progressive Web App?

Progressive Web Apps, or PWAs for short, are mobile applications designed to leverage modern web features to deliver Native App-like experiences to the end user while running in the browser.

At its simplest then a Progressive Web App is simply a browser based mobile app (unlike Ionic/Cordova hybrid Apps which are designed to run natively on handheld devices).

Typically a PWA will take advantage of modern Web API's and features such as push notifications, offline caching and installability (they can be 'pinned' to a user's home screen on their device).

When running on older browsers that don't support the latest Web API's/features a Progressive Web App should gracefully degrade and allow the user to reasonably access page content (albeit without the 'bells and whistles' that come with features present in modern browsers).

What must a Progressive Web App be able to do?

Functionally a Progressive Web App must be:

  • Responsive - adapts to the screen size of the device that it is viewed on (mobile, tablet or web)
  • Discoverable - can be indexed by search engines
  • Installable - can be installed to the home user's device
  • Linkable - can be shared, without requiring complex installations, via URL's
  • Network independent - is expected to function in low network connectivity or offline
  • Progressive - works on all browsers
  • Engaging - can engage the user, even when 'switched off' by use of features such as Push Notifications

What are the key features/technologies?

Progressive Web Apps make use of the following architectural patterns, technologies and Web APIs to provide native-like experiences:

  • App Shell model - the minimal HTML, CSS and JavaScript required to power the user interface which is able be cached and does not require reloading by the network on subsequent user visits
  • Web App Manifest - provides information about an application, such as author, icon, description version etc, in the form of a JSON file which allows that application to be pinned to the home screen of a user's device
  • Service Workers - scripts that act as proxy servers that sit between the web application and the browser/network and help to control content caching, background syncing, offline access and push notifications...amongst other features

Unfortunately browser support is always an issue wherever technologies are concerned as demonstrated by the dismal statistics for the Web App Manifest:

Web App Manifest
Browser Version
IE Not Supported
Edge Not Supported
Firefox Not Supported
Google Chrome 38+
Safari Not Supported
Opera 32+
iOS Not Supported
Android UC Browser Not Supported
Android Chrome Browser 62+

Browser support for the Service Worker API support fares slightly better however:

Service Workers
Browser Version
IE Not Supported
Edge 17+
Firefox 57
Google Chrome 49
Safari Technology Preview only
Opera 32+
iOS Not Supported
Android UC Browser 11.5 (partial support)
Android Chrome Browser 62+

As Service Workers play a huge role in driving the functionality of Progressive Web Apps the level of support offered by modern browsers, although increasing, is pretty poor.

This means that only the most up to date browsers will be able to support Progressive Web Apps (I.e. caching/offline access and push notifications) while older browsers will simply get a website that renders in their browser but without some (or all) of the 'bells and whistles' offered by the latest supporting browsers.

How does this relate to Ionic development?

Ionic are betting big on Progressive Web Apps and have promised further features/support for this approach to application development in the next version of the Ionic Framework.

Currently, when creating a new project with the Ionic CLI, you receive a prompt as to whether or not you want to integrate your application with Cordova:

ionic start my-project blank
✔ Creating directory ./my-project - done!
✔ Downloading and extracting blank starter - done!

? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) 

This offers developers the ability to create Ionic projects that don't target native iOS and Android and simply function as mobile web applications once developed.

I'll be touching on Progressive Web App development with Ionic in future tutorials but for now we're simply laying the groundwork for understanding what the term means and what approaches are involved on a developmental basis.

In summary

Thanks to modern web API's and, in some quarters, browser support developers can now create applications which offer native-like experiences directly within the browser.

It's important to note that Progressive Web Apps are NOT a replacement for Native/Hybrid apps (not for the next few years at least - browser support and maturity are HUGE limiting factors where technology choices are concerned) so if you're looking to target iOS/Android handheld devices then continue developing your Ionic applications with Cordova integration in mind.

As browser support improves and market share increases Progressive Web Apps will become more and more common so it makes sense to start getting acquainted with that approach to application development today (but be aware of potential issues and workarounds that might need to be navigated while doing so).

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing then please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top