Cloud Architect • Full Stack Developer

Install Me As A PWA!

This website - paulhale.com - is not just a website. It's an app. A Progressive Web App or PWA to be precise. PWAs are fast, secure and update in the background. PWAs are the future of the web. 

As I write this in mid May 2019 the only desktop browser to support PWA desktop installs is the latest version of Chrome. 

Update Chrome

To install a PWA as a desktop app first update Chrome to the latest version. On Chrome for Mac you usually see an upgrade icon in the top right when an update to Chrome is available. 

Update Chrome

Alternatively, select settings and then the settings hamburger icon and then About Chrome to update Chrome.

Update Chrome via Settings > Settings Hamburger icon > About Chrome

Enable Chrome Flags for PWA Desktop App Installation

This is only a temporary measure as future versions of all browsers will support PWA desktop app installations out of the box. Google plan to show an install link for all PWAs in Chromes browser bar in the not too distant future. Until that functionality is shipped we can enable some Chrome Flags so that we can install desktop PWAs now.

  1. chrome://flags#enable-app-banners
  2. chrome://flags#enable-experimental-app-banners
  3. chrome://flags#enable-desktop-pwas

Paste each link above in your Chrome browser and toggle the flag.

Link to toggle Chrome experimental functionality
Enable PWA Desktop Installs in Chrome by Toggling Experimental Features

Install PWA Desktop App

Once you have enabled the required experimental flags browse to paulhale.com and click the three little round circle buttons in the top right of your browser. Then select "install Paul Hale". It's that simple.

PWA Desktop Install

Once installed you can instantly access the app just like any other app. For convenience, you can add it to your Start Menu in Windows or Dock in MacOS.

Install PWA mobile iOS App

Ensure you have the latest iOS. Then using Safari browse to a PWA site such as paulhale.com. Touch the share icon.

iOS Share Icon

From the sharing panel slide the bottom row left until you see the Add to Home Screen icon.

iOS Add To Home Screen

You can then name the app and add it to your iOS home screen.

Install PWA on iOS

With the app installed you can now touch the apps icon to launch it just like any other app.

PWA Installed on iOS

What is a Progressive Web App?

To understand what a PWA is you need to know the difference between a native app and a website. Once you understand the difference it's easy to see why PWAs are a game changer which will rock the web for the foreseeable future.

Native Apps

All apps are made with code. Native apps are apps you download to your device, be it your watch, phone, tablet, desktop or TV usually through App Stores.

When you launch your native app the code executes on your device and your app springs to life. Your app may or may not reach out over the internet to collect and process data. For example, Facebooks native app launches and then pulls in data from the internet to show your specific feed. So the code that powers your app runs natively on your device powered by whatever hardware your device provides.

Because this code is executing directly on your device it runs fast. It takes advantage of your devices processor, graphics and memory. Your app can also utilise additional features of your device such as cameras, speakers, bluetooth and motion detectors etc. Until relatively recently websites did not have access to these resources. Thanks to advancements in modern web APIs (Application Programming Interfaces) websites can now access almost everything a native app can.

Websites

A website is delivered to your device over the internet and is usually consumed and viewed with a web browser. Popular web browsers are Google's Chrome, Microsoft's Edge, Apple's Safari and Mozilla's Firefox.

The common stack that runs within your web browser to render a web page usually consists of HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and JavaScript.

  • HTML provides the base structure and content for a web page
  • CSS provides the styling for a web page
  • JavaScript is code that executes within your browser to make web pages interactive

This stack is evolving and it's now possible to run different languages within a browser such as C# (see Microsoft's Blazor for more on this) thanks to WebAssembly. More on this later.

Websites are served from web servers. Static sites are served directly from these servers where as sites with dynamic content can perform server side processing to generate content before serving it.

Native App Advantages

Native apps have a few advantages over traditional websites.

  • App executes on local device utilising devices hardware
  • App has access to devices additional hardware such as cameras, bluetooth and motion detectors
  • App can function offline

Native App Disadvantages

Native apps also have a few disadvantages.

  • App updates
  • Discovery
  • Cross-Platform Cost of development
  • App Store Tax

Let's break these out and discuss each one in a little more detail.

App Updates

Even though iOS has an automatic app update feature that is supposed to run in the background I find it doesn't always work and have to manually update apps. One or two app updates are fine but when you realise you need to update over fifty apps it can be frustrating. This has happened when I haven't used my iPad for some time.

Discovery

Native apps can be found within App Stores or within search engines. Neither of these can effectively index or analyse a native app. Search Engine Optimisation (SEO) can only come into play where an app has a dedicated companion website to promote it. App Store Optimisation (ASO) is dependant upon the developers ability to work the relevant app stores ecosystem to their advantage.

Cross-Platform Cost of Development

Developing cross-platform native apps can be time-consuming and expensive. Especially for apps that require large development teams. For native apps to be truly cross-platform they should run everywhere including Windows, Linux, Mac desktops plus iOS and Android mobiles and tablets. You could also argue that some apps should run seamlessly on larger devices such as TV's and smaller devices like watches.

Each of these platforms require different technology stacks with developers proficient enough within each stack to deliver the apps. An Android app may be built using Kotlin or Java programming languages where an iOS app could be built using Swift or Objective-C. Native Windows apps might need C# and WPF experience.

This can make native apps that target different platforms very expensive to develop and maintain as each app requires its own code base. There are tools and frameworks such as Xamarin, Cordova, React Native and Electron that can be used to develop cross-platform apps but they each have their own learning curves and rarely perform as efficiently as native apps that target specific operating systems. There is usually a lot to consider regarding tradeoffs.

A real world example is where I wanted to create a native Mac app that could render multiple browser windows within the app. I initially started experimenting with Electron but the performance was poor. I ended up developing a platform specific Mac app using Swift and the performance was blazing fast.

App Store Tax

Apple, Microsoft and Google all charge a tax for selling apps. What's even more shocking is that Apple charge developers $99 a year for the privilege of making money from developers apps. Think about that for a second. Apple charge $99 per year, so that developers can make apps and extend Apple's ecosystem functionality, and then Apple have the front to charge each developer a 30% fee for every app they sell. 30%! Even if developers submit free apps to the Apple store it would still set them back $99 per year and Apple would still profit. Daylight robbery in my opinion.

Progressive Web Apps

PWAs are built using the same technology stack as websites. The key difference is something called a service worker. When a user visits a website that correctly implements a service worker then the all the resources that are required to render the website are cached on the consuming device. Basically, PWA's are websites that are automatically, instantly and seamlessly installed.

The next time you visit the PWA the service worker serves up the site from your local device without having to reach out over the internet to collect the resources it requires. This means that like native apps, PWAs can work offline. When an online presence is detected it reaches out and downloads and installs any updates. This process is fully automated making PWA updates transparent to the user.

PWA Advantages

Let's list then breakout some advantages that PWAs have over native apps.

  • Fast
  • Discoverability
  • Transparent Installs
  • Transparent Updates
  • Offline Access
  • Cross-Platform
  • Single Code Base
  • Common Stack
  • Zero App Store Tax

Fast

Because the resources required to run a PWA are installed locally they launch fast. Just like a native app.

Discoverability

PWAs can be fully indexed by search engines just like any other website. Most native apps are buried within specific App Stores. PWAs can be easily located on the web especially if they are designed using SEO best practises.

Transparent Installs

Don't let this frighten you. Websites have been caching (storing website files locally) for decades. PWAs just do it better. Much better. Even if you don't action a PWA "install" a PWA is still installed. This is a good thing.

When you manually install a PWA you will get the app icon so you can quickly access the app via your home screen, Dock, Start Menu etc. But, even when you don't perform a manual install your browser automatically installs the PWA's service worker which in turn installs the resources required to run the app locally.

Chrome Dev Tools Showing Installed Service Worker for this PWA

Transparent Updates

You never have to wait for PWA updates. They happen in the background when an online connection is detected and they update faster than native apps.

Offline Access

Just like native apps, PWAs can run perfectly well offline.

Cross-Platform

Native apps are usually developed to run on a specific platform. PWAs run anywhere a website could run.

Single Code Base

As just stated, Native apps are usually developed to target a particular platform such as Windows, Mac, iPhones or Androids etc. They then have to be redeveloped to target additional platforms. As discussed earlier, tools and frameworks exist to enable cross-platform development but rarely perform as well.

PWAs have a single code base making them easier, cheaper and quicker to develop and maintain.

Common Stack

Want to write a native iPhone app? Best bet is to learn Xcode, Swift and CoreData. How about an Android App? Maybe Android Studio and Kotlin? Windows app? Visual Studio, C#, WPF and Entity Framework might cut it?

PWAs can be developed using a common stack such as HTML, CSS and JavaScript. More than that, developers can choose whatever tooling and frameworks they are comfortable with. If different development team members are comfortable using different code editors and integrated development environments (IDEs) then they are free to stick with what they know and love. Tooling and Frameworks within the webs development ecosystem is vast.

Zero App Tax

Want to design, develop and deliver a free app? PWAs are the answer. You won't be robbed for $99 by Apple every year for the privilege.

If you want to monetise your app then you will have to implement a payment solution. App stores make monetising apps easier but at 30% per app sale + the annual fee they are expensive. Compare that with integrating a payment gateway like Stripe and it's easy to see the cost advantages.

If you're really cutting edge you could even except digital currency such as Bitcoin where transactions are secure with minuscule fees.

The Future of PWAs = PWAAs

Progressive Web Apps are cool but before they have even become mainstream there is already a cooler kid on the block in the form of Progressive WebAssembly Apps.

As of this writing, Wikipedia states...

WebAssembly (often shortened to Wasm) is a set of standards that define a portable (modular) binary format and a corresponding assembly-like programming language for executable program and environment-specific program interfaces into which it may be embedded and interact with.

Wikipedia

When native apps are released the source code is parsed through a compiler which compiles the code to a binary format targeting a specific platform where the app can be executed.

All mainstream desktop and mobile browsers now support Wasm. This means that code can be compiled to target Wasm and executed in a browser that supports it. And that's all of them.

When JavaScript is served from a web server it arrives at its destination unoptimised. The browser compiles the JavaScript code passing it through its Abstract Syntax Tree. This optimises the code so that it runs as efficiently as possible within the browser.

With Wasm, code is delivered to the browser as a pre-compiled Wasm binary saving the browser having to perform its usual compilation step. This means that Wasm code can run almost as fast as native code. Users can visit a site built using Wasm and instantly start using the app. An example game built using Wasm can be found here.

Lyn Clark has an excellent cartoon intro to WebAssembly which is well worth reading.

Summing Up

PWAs are here and are the coolest tech to hit the web in a long time. Pair PWAs with WebAssembly and things get really interesting.

So now you know what a PWA is you can go ahead and install me 🙂

CLOUD ARCHITECT • FULL STACK DEVELOPER
Right Menu Icon