Introduction to PWA

Introduction to PWA

Introduction

Learning Objectives

Basic Concepts

  • What is an Application Shell?

The part of a web app that does not change often or not at all in some cases. This is the minimum code required to power the UI. It should load very quickly and be immediately cached.

The core app shell infrastructure should be cached locally using a service worker so on subsequent loads the PWA only needs to load the required (dynamic) data.

Watch the next video to learn more about the Application Shell:


  • What is a Web Manifest?

Adds the ability to control how the app will appear to the user and how they can launch it.


  • What is a Service Worker?

The Service Worker Brower API sits between the client and the server, like a client-side proxy written in JavaScript.

Using a Service Worker, assets can be cached locally so things load instantly regardless of network, the app can work offline, and can also be woken up when certain events happend and notify the user. These events don’t rely on the browser being open on the phone.

Watch & Code

  1. Intro to Progressive Web Apps
  • Duration: 3 minutes

  1. App Shell
  • Duration: 6 minutes

  1. Service Worker
  • Duration: 7 minutes

  1. WorkBox Intro
  • Duration: 5 minutes

  1. WorkBox Routing
  • Duration: 8 minutes

  1. CONTINUE FROM: … https://www.youtube.com/watch?v=1gNszTZHQYA

Source Code

Things to watch our for:

  • In order for the Add to Home Screen to be available, you’ll need the following web manifest options included: name, short_name, icons and start_url.

Resources