What’s a Progressive Web Applications (PWA) and Why does my website want to be one?

What’s a Progressive Web Applications (PWA) and Why does my website want to be one?

My last couple of posts (App or not to App and Cross-platform applications – PhoneGap/Cordova, Xamarin, PWAs and now Flutter) have been discussing different aspects of build applications. In particular in my previous post I discussed deployment models as being one dimension of applications. In this post I’m going to focus a bit more on the one of the hottest topics going around at the moment, Progressive Web Applications, or just PWA for short. If you’re new to this topic, I’d suggest a quick detour across to the Google developer site where they have an entire section dedicated to PWAs, and it’s a great starting point to understand the importance of PWAs and the experience that a good PWA should deliver.

Side note: I had to laugh when I first went to the PWA page on the Google developer site as it talks about “A new way to deliver amazing user experiences on the web”. This is really what happens when you let the marketing get out in front of technology. Unfortunately I’ve see this type of propaganda so many times (Flash, Silverlight, HTML5) that it actually makes me a bit nervous as I start to think about another learning curve.

image

One of the quickest ways to get past the marketing fluff is to click the PWA Checklist button in the top right corner of the PWA page. Here’s a list of some of the other useful links on the Google developer site in relation to PWAs:

PWA Checklist

Lighthouse

PWA Summit videos (a bit dated but still a good place for building familiarity)

Now that I’ve assigned you a bit of reading, let’s talk about what all the fuss is about. After scanning through the PWA checklist it becomes very evident that there are a couple of key topics: security, offline, seo and notifications. Let’s break these down, with specific attention to why they’re all important aspects of a great application (not just a PWA).

Security

Whilst not the first topic that comes up in regards to PWAs in the checklist it’s very evident that security first is still a key mantra when building the next generation of applications, which is made clear by the first item in the checklist which indicates that all content should be delivered across HTTPS.

In the context of application development there has been an increase flow towards the use of HTTPS (for example the release notes for iOS9 by Apple indicated that all new apps should use HTTPS). Without HTTPS it’s just too easy for any third party to intercept and read/modify the traffic to and from the application.

Offline

This is a biggie when it comes to PWAs and in fact you could argue that this is probably the most significant departure from traditional web development. The introduction of service workers that can intercept requests, cache and dynamical change request behaviour opens the world to building intelligent offline-enabled applications. However, from an offline-ready application development perspective the current thinking in this space seems relatively immature, with most of the priority being placed on caching the components that make up the application (ie the HTML, CSS, JS that make up the application), rather than offline data and synchronisation scenarios.

SEO

Optimising your application for search has been one of those things that every developer says they’re going to do but rarely do they do it, and seldom is it done well. In terms of application development, one of the challenges faced by developers is how to define a set of deep links that will resolve both on the web and in the app. In structuring an application, it should be possible to provide an external link to any part of the applications, and in an ideal world the the link can be shared via any method, whether it be a link on social media, or via private correspondence such as chat or email. The upshot is that by structuring an application this way, you’re already half way there to making it indexable – you just need to make sure that the web application can be statically crawled so that relevant sections will appear in search results.

Notifications

Another aspect that tends to differentiate a good application is one where the user doesn’t have to keep on opening the application in order to see whether anything important has happened. All the native platforms, Windows, iOS and Android, have a rich push notification system that allow for interactivity and rich media in some cases. However, there is a disconnect as applications have to support multiple vendors that all support a slightly different push notification format. Notifications are important for a quality application as they help to keep the user informed about the things they care about most. The “Glance and Go” marketing campaign by Microsoft a number of years back for Windows Phone, whilst ultimately a failure (bye bye Windows Phone, we’ll miss you) it rang true in that notifications and badges are an extremely effective way of keeping users abreast of background activity within applications (either locally on the device, or remotely)

Hopefully from this breakdown you can see that PWAs, whilst one of the hottest topics today, is far from “a new way to deliver amazing user experiences,” since application developers have been doing this since before the release of the iPhone. I guess the big distinction with PWAs is the “on the web”…. as in “please developers, stop building web sites with a crappy user experience, and start building rich applications that delight the user”. Perhaps some day we’ll break the dependency on the request-response model that has for so long governed the design of web sites.

App or not to App

App or not to App

Following my last post there were a couple of interesting tweets that made me revisit (again) the discussion of whether building an app is the right thing to do. For example, @GeoffreyHuntley said:

Decision time:
– #0 Don’t make an app unless you absolutely have to.
– #1 React + React Native (insane productivity)
– #2 Xamarin (stagnating tbh)
– #3 Flutter (innovator – watch this space)

To be blunt, options 1-3 are all semi-painful – I’m not going to go into detail as to why, as that’s not the point of this post but needless to say that each one has their pros and cons, and none are what you’d consider an ideal development experience. Option 0 sounds like a great option and with the rapid development of Progressive Web Applications (with service workers being included by both React and Angular) it really does seem that not having to build an app is the way to go.

Ok, but in that case, when would we build an application? Before we answer this, I think it’s worth revising what the notion of an “application” or “app” actually means. If you do a search for “App” on Wikipedia you get a number of responses:

  • Mobile app, software designed to run on smartphones and other mobile devices
  • Application software that causes a computer to perform tasks for computer users
  • Web application or web app, software designed to run inside a web browser

(And particular note that the term “website” is not included here as according to Wikipedia a website is “a collection of related web pages” – personal opinion: if you still building for the web using the traditional post-back model (yes, looking at you ASP.NET) you’re building a website, not an app).

Let’s ignore for the moment the distinction between mobile, web or any other qualifier about the type of an application or the target platform and instead, let’s focus on what an application is. According to Wikipedia an Application is software that causes a computer to perform tasks for a user. This is a pretty wide definition and essentially encompasses most software, whether it be a command line application, browser or window based application. However, if you were to ask most people what they thought an “App” was today, they’d probably give an answer that relates to installing an application from the Apple, Google or Windows Store – it seems like the notion of an App is in somehow attached to the distribution model.

If we look further into this, there are a variety of distribution models:

– An application that you simply download from the Internet and just run (it might download as a Zip file but the important distinction here is that there’s no installation process and no Store managing the application). This is by far the simplest distribution model. However, these days few applications are distributed this way as most operating systems distrust downloaded files from the Internet and will refuse to run them without them being “unblocked” first.

– An application you download from the Internet and then install. For Windows and MacOS historically this was the most common way for applications to be distributed. The operating system didn’t have a built in distribution mechanism, such as a Store, but they did support a model for applications to be installed and uninstalled. The danger of this model, is that, similar to just downloading and running an application, an application that is installed could have wide-reaching access to the host operating system. Over time this model has be adapted and additional security (for example User Account Control on Windows) limited what an installed application could do

– An application you install from a Store. Whilst this model did exist prior to the iPhone, it wasn’t really until the App Store launched that the notion of a single curated Store became mainstream. Now, most platforms have a Store where you can browse, search and install apps to suit your every need. Depending on the platform, the process for submitting, certifying and publishing applications varies, with different levels of quality and policy controls imposed in order to try to maintain a high quality bar for apps. The Store also takes on responsibility for distributing updates to application as they become available, as well as providing a mechanism for developers to charge for their applications.

– An application you load in the browser. Most people don’t really consider websites that they navigate to in the browser as applications. However, websites are becoming highly functional and most no longer require a full post-back in order to load more content, improving the usability. In fact, browsers have tried to prompt web sites as pseudo-apps by allowing users to add a web site to a list of applications (for example the “Apps” icon that appears within Chrome under the address bar).

image

– An application you install via the browser. In contrast to adding a website to a list of applications within the browser, installing a website via the browser allows the website to take advantage of a lot of the benefits of applications installed via a Store. They can appear as an icon on the home screen (or list of applications installed on the device); they run without the browser chrome; they can receive push notifications and much more.

So the question is whether the distribution model is what defines what an “App” is?

When we embark on building an application do we need to lock ourselves into one of these distribution models, or can we pick multiple, or all of these distribution models. Or, is the distribution model different for each platform? To answer this we really need to consider the pros and cons of each mechanism and the corresponding audience reach it gives us, and whether it makes sense to choose a particular distribution model.

Cross-platform applications – PhoneGap/Cordova, Xamarin, PWAs and now Flutter

Cross-platform applications – PhoneGap/Cordova, Xamarin, PWAs and now Flutter

At Built to Roam we build applications that target a wide array of different platforms, using a wide variety of technologies depending on the project requirements. One of the most challenging things faced by organisation looking to build any form of software is often not what should I build, it’s often what technology should I use to build it. Unfortunately this is also where the most cycles are wasted and the poorest decisions are made.

Nirvana would be building the software once, and for it to be available on every platform and device type, able to be instantly updatable and have a rich and engaging user interface (and I’m sure there’s more things that needed to be bolted onto this list of “ideals”). However, the reality is that there are different device types and sizes; there are different technologies with differing capabilities; and different developer and deployment workflows. Rather than being able to make an absolute decision on the best strategy, companies are limited by their own field of influence. Too often this includes Gartner reports, media hype and both internal and contractors with whom the decision makers have a relationship with.

In addition to the number of options that are available, the optimum strategy also evolves over time. For example, five years ago in Australia it made sense for organisations to start their investment in mobile apps with a fairly basic iPhone application. Today the market expectation is that a mobile strategy encompasses at least Android and iOS, phone and tablet, and with a comprehensive set of features. In fact some applications, don’t even have a web presence, finding that their mobile apps were sufficient for their business model.

So the question is really whether it is possible to define the optimum strategy for a business and is it possible to future proof it?

To investigate this a bit further, let’s take a look at the progression of native application development. What’s quite interesting is that businesses have woken up to the fact that maintaining multiple applications written in the preferred technology for each platform is not sustainable. This has led to the emergency of a host of cross platform tools that generate native applications. There are tools such as Xamarin/Xamarin Forms which compile C# so that it can be run on the target platform; There has also been an explosion in Javascript based solutions, such as React Native where it generates the native components for each platform based on HTML mark-up (+CSS, JavaScript etc); More recently again there is Flutter, which aims to provide a user experience that has been drawn from the ground up to be platform agnostic. How do you make a decision between these technologies?

More importantly is – are you making the decision about the right thing? It would seem that making a decision about which native application toolset to use would be right but actually the web and some of the hybrid solutions solve so many challenges that native application developers face, it would be foolish to ignore them. Take for example the recent hype around Progressive Web Applications. There are some who believe this is just another round of hype about the newest buzzword to arrive on the scene but in actual fact whilst the name is new, the concept is not. Back even in the days of Windows Vista, there were desktop gadgets that essentially allowed parts of the web to run in a container in an offline capacity. PWAs are just the latest name to be given to this concept.

Where PWAs are set to make a difference is that they are being widely backed (eg Google: https://developers.google.com/web/progressive-web-apps/ and Microsoft: https://pwabuilder.com) and they also arrive at a point in time where devices have browsers and rendering engines that are capable of delivering a high-performance web experience whether in-browser, or in a hosted web application.

Do you think the market is ready for PWAs? or are native applications going to rule for the foreseeable future?

New BuildIt Release for NetStandard 2.0 (General, States and Forms)

New BuildIt Release for NetStandard 2.0 (General, States and Forms)

A new release of the following libraries is available via NuGet (v1.1.0.134):

BuildIt.General

BuildIt.States

BuildIt.Forms

Whilst not much has changed in terms of features, behind the scenes there was quite a significant change as we adjusted the solution/project structure, and thus the nuget package structure. We took advantage of the ability to multi-target which meant we no longer have to have separate projects/libraries in order to support platform specific features. BuildIt.General, which used to have a UWP specific library, is now a single libary. Same goes for BuildIt.States. BuildIt.Forms has two libraries, down from the 5 that it used to have.

Additionally we also added direct support for netstandard 2.0. As part of the build process, each library is compiled for netstandard 1.0, netstandard 2.0 and then any platforms that have additional features.

In this release we’ve released multiple packages with the same version number, even though there is an interdependency between them (Forms –> States –> General).

Please reach out and let me know if you see any issues in this release with any of these libraries. We’ll be working to release updates to the other BuildIt libraries over the coming weeks.