Progressive Web Apps

Agenda

  • What are Progressive Web Apps?
     
  • PWA Features
     
  • Core building blocks of a PWA

Agenda

 

  • Web push notifications
    • Media API (Camera) & Geolocation
    • Automated SW management

What are Progressive Web Apps (PWAs)?

Progressive Web Apps is just a term used to describe a set of features that can be added to any existing web application to —progressively— enhance it and turn it into a native mobile app-like experience using device features like the camera and providing offline access.

We can summarize the PWAs in 3 words:

  • Reliable: Load fast and provide offline functionality
     
  • Fast: Respond quickly to user interactions
     
  • Engaging: Feel like a native app

Mobile Web vs Native Apps

What native apps provide

  • Push notifications (to bring the user back)
  • Home screen icons (unlike web apps where you need to open the browser  and search for the web app you'd like to visit)
  • Access native device features like camera and gps
  • Offline availability (at least for a part of the app)

But do you really want to build a native app?

  • Two languages/ react native solution
  • If you would like to visit a website/app (say to get a gift or for black Friday) you have to install the brand app, browse it, and then you'll most likely uninstall it after finishing.
  • Also average users don't install new apps periodically.

Reach of apps vs mobile web

PWAs vs Native Apps vs "Traditional" web pages

Capability Reach
Native Apps Access Device features Top apps win, rest loses
Traditional Web pages Highly limited device feature access High  reach
Progressive Web Apps Access Device features High  reach

Example of a Progressive Web App

Progressive Web Apps .......

Features and why to use

Progressive Web Apps .......

Example on PWA

Remember

It's okay not to reach 100% in PWA audit

Show demo of the final version of the PWA we'll build

Let's build
our first PWA

Title Text

Start the app locally

Core BUILDING BLOCKS

Service Workers

Service Workers

Caching/

Offline Support

References

  • Progressive Web Apps (PWAs) - The Complete Guide (by Maximilian Schwarzmüller)
  • Bullet Two
  • Bullet Three
Made with Slides.com