Introduction

What are Progressive Web Apps?

  • can work completely offline
  • near-instant load times
  • secure
  • resilient to flaky connections

OR

  • 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

Web versus Native

The web

  • August 6, 1991: Sir Tim Berners-Lee at CERN launched the first website
  • Plain HTML, no images, CSS or JavaScript
  • Websites become bigger and heavier
  • More and more devices we access the web on
  • Expectations are high
  • Mobile connections can be horrible

Native apps

  • Have a better user experience
  • All or most of the needed resources on the device already
  • Offline capabilities
  • Instant load times
  • Reliable

Definition of PWA

Major browser vendors worked together to give developers the tools to create fast, reliable and engaging websites.

Key features of a Progressive Web App or rather a Progressive Website are:

  • Responsive (works on every screen resolution)
  • Connectivity-independent (can work offline)
  • Feel like a native app (fast loading)
  • Always up-to-date (fresh from the web; no updates from the app store)
  • Safe (https)
  • Discoverable (search engines)
  • Linkable (URL's)
  • Installable (home screen, cache data)
  • Re-engageable (home screen, push notifications)

PWA's will work on every modern browser.
Older browsers will keep on working as a normal website because PWA is (it's in the name already) a Progressive Enhancement.

PWA Basics

PWA's are normal websites (or applications) created with the technologies we all know and love: HTML, CSS and JavaScript, but with superpowers.

Two key features will make a PWA from your website:

  • Manifest file
  • Service Workers

Manifest file

A manifest file is a JSON file that contains information about the website, including its icons, colours and default screen orientation.

Service Workers

A Service Worker can tap into network requests, manipulate them and selectively cache responses to provide an offline experience. With the help of Service Workers it's also possible to prevent users from getting a default "No internet connection" error screen, but instead, provide them with something more useful and meaningful.