At the Apple Worldwide Developers Conference (WWDC) in 2007, just eighteen days before the official launch of the iPhone, Steve Jobs announced that all third-party app development would be restricted to web apps. He said…

The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. They can make a call, they can send an email, they can look up a location on Google Maps.

And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. So developers, we think we’ve got a very sweet story for you. You can begin building your iPhone apps today.

As we know, Apple did not stick with this positioning very long, announcing the App Store and native app development just one year later. This resulted in rapid developer adoption, with over two million native apps now available for the iPhone.

However, even with the success of the App Store, I believe the original web app positioning may have been directionally correct, simply a decade ahead of its time.

Progressive Web Apps

Progressive Web Apps (PWA) aim to combine the flexibility of the web, with the rich user experience of native apps.

The first time I was introduced to Progressive Web Apps, my mind immediately jumped to “hybrid apps”, including frameworks such as Apache Cordova, etc. Hybrid apps attempt to bridge web technologies into a native paradigm, for example, although written in HTML and JavaScript, they run in a native container (not directly accessible via a URL) and must be maintained like a native app, including the required download from an App Store.

Progressive Web Apps are essentially the opposite, as they attempt to bring a native app experience to the web. Unlike hybrid apps, this approach does not force the user to give-up the inherent advantages of the web, such as, the ability to run in any browser, on any device, without the need to download or maintain the native app.

Progressive Web Apps - Characteristics

Unsurprisingly, Progressive Web Apps have proven popular with web-first companies, such as Google, Twitter and Facebook. To help ensure quality and consistency, Google have developed ten characteristics, which can be used as a guide when developing Progressive Web Apps.

  • Progressive: Supports all browsers and is continuously enhanced.
  • Engaging: Supports native features, such as push notifications, etc.
  • Responsive: Must automatically optimise for the specific device.
  • App-like: Delivers a native app experience.
  • Connectivity: Must work offline and in areas of low connectivity.
  • Discoverable: Identified as an “app” and discoverable via search engines.
  • Linkable: Must be able to retain and reload state when bookmarked or shared.
  • Installable: Can be installed, making it available on the home screen.
  • Fresh: Content is always relevant and up to date.
  • Safe: Leveraging modern web techniques to ensure end-to-end security.

There are already a lot of great Progressive Web Apps available that highlight these characteristics. For example, Twitter Lite, which is Progressive Web App that was developed in partnership with Google.

Progressive Web Apps - Development

Progressive Web Apps can be developed using a number of modern frameworks and libraries, including React, Preact, Vue and Angular. A great resource for developers is HNPWA, which takes Hacker News and implements it as a Progressive Web App, using a wide range of frameworks and libraries.

There are three key concepts to consider when developing Progressive Web Apps.

Service Worker

A service worker, written in JavaScript, is like a client-side proxy, which runs in the background and is triggered via events. A Service Worker can be used to handle network requests, caching, push notifications, content fetching, connectivity changes, etc.

This approach is incredibly powerful, but can also become very complex. As a result, developers will likely leverage pre-defined recipes to enabled common tasks. Google have developed a wide range of Service Worker Samples, which are openly available on GitHub.

Web App Manifest

The Web App Manifest is a simple JSON file, which is used to control how the app appears and how it is launched. This includes the home screen icons, default launch page, screen orientation and can even manipulate the appearance of the browser, providing a full screen experience.

The goal is to deliver a native app experience, without the need to go via an App Store.

App Shell

App Shell is not a specific technology, but rather a design pattern that compliments the caching capabilities of a service worker.

The pattern focuses on decoupling the shell (minimum user interface) from the content. The goal is to have the user interface load first, followed by the content, which theoretically delivers a better user experience. This is achieved by caching the shell (HTML, CSS and JavaScript required to render the user interface) and content separately, with priority put on the shell.

Conclusion

As someone who has developed through the hybrid app era, it would be easy to dismiss Progressive Web Apps. However, I feel far more comfortable about the technology and believe the web is now ready to deliver truly immersive, mature experiences to mobile users. This is helped by the strong support from Google, who have published an incredible amount of documentation, as well as aggressively pushed tight integration for Progressive Web Apps into Android and Chrome.

Ironically, considering their original positioning regarding web apps, Apple are currently a barrier for broader adoption. For example, Safari does not yet support the full feature set of Progressive Web Apps, including Service Workers (although it is marked as “In Development”). I sense that the current strong revenue stream from the App Store may be resulting in some inertia, but I do not expect that to last, as it is unlikely that Apple will allow Google to deliver a better web experience on Android.

In summary, I am very optimistic about the future of Progressive Web Apps and therefore will be watching closely as the eco-system (technology, documentation, community) continues to evolve.

development programming progressive_web_apps pwa architecture