Using Progressive Web Apps to Code for Good

9:50-10:20, Lecture Room 1

Zeki Kucuk-Kose

The key take aways for an attendee of this talk are:

  1. What are Progressive Web Apps (PWA)
  2. What benefits a PWA can bring over opting for a traditional native iOS/Android app
  3. How to build a PWA using service workers and caching.
  4. A demo of an app I have been building in my spare time that leverages the power of PWAs to help prevent suicide.

Here are some example paragraphs of what I will present to attendees:

PWAs are a new breed of web app that combine the benefit of a native app with the low friction of the web. Getting a user to install and use your native app is quite an ordeal. First of all they have to find out about your app, then they have to visit the app store and then they must click install. Then once the app has eventually finished downloading, they have to agree to various permissions and then maybe, just maybe, will they actually use it. Did you know that the average person spends 84% of their time on mobile devices using just the 5 top mobile apps…. and more often than not, that isn’t one of your apps!!

How do you get your app in the hands of users then? A progressive web app takes a very different approach and they aim to break down all of these barriers. Instead of a user having to download and install an app via an app store, they instead would click a link. This could be a link they’ve found on the web, or sent from a friend. Once clicked, the app will load and the browser even suggests adding a shortcut to the homescreen. For all intents and purposes, the app (despite running in the browser) looks and feels like a native app. It even has many of the powers that a native app has:

  1. Unlike a traditional web app, they are available regardless of internet connection.
  2. Fast load times - Using service workers, sites can load in milliseconds (often even faster than a native app)
  3. Push notifications - yep, they have them.
  4. Homescreen shortcut
  5. Native look - a PWA can have a loading splash screen, launch in full-screen mode and lock themselves to a specific screen orientation.