Progressive Web Apps

Who needs native?!

What are PWAs?

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no installation required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

The web…but better

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.

https://ionicframework.com/docs/developer-resources/progressive-web-apps/

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging - Feel like a natural app on the device, with an immersive user experience.

 

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

https://developers.google.com/web/progressive-web-apps/

Why build PWAs?

Distribution

Features

Push notifications

  • Available on native apps for ages
  • New to web
  • Use to re-engage users
  • eg abandoned shopping cart

Offline functionality

  • Like native app
  • Control with service workers

Accessible to all

  • Discoverable
  • Requires SEO like any website
  • Easy to share

Try before you... install

  • Can start using before installing
  • No app store
  • Instant updates

What's the catch?

Doesn't work on iOS

  • no service workers
  • no push notifications
  • no A2HS

WebKit project five-year plan - on service workers:
 

“Becoming a more frequent request. We should do it.”

Demo PWA

react-pwa

https://github.com/paulhoughton/react-pwa

My app

  • Fork react-pwa
  • Created lists app
  • Fixed PWA fails with Lighthouse

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

https://developers.google.com/web/tools/lighthouse/

Made with Slides.com