Introduction to PWA

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

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Leave a Reply