Google IO Extended Unilag Codelab

Check it out the preview

How to set up.

The project has three folders,

• initial - This is the initial state of the app. No PWA capabilities
• final - This is thefinal state of the app with PWA capabilities
• docs - Live preview

To start, run npm run start, to develop run npm run dev. You need express and nodemon.

To change the current folder being served, edit the server.js file like so:

var app,
  server,
  express = require('express'),
  path = require('path'),
  port = process.env.PORT || 5000,
  root = path.resolve(__dirname, 'src'); // Change this to the folder you want to serve
...

Building a FIRE PWA

• Fast
• Integrated
• Reliable
• Engaging

Things to consider

- Service worker

- Manifest.json

- Meta Theme Color

<link name="theme-color" content="#989489"/>

- Resource Prioritization

• prefetch: informing the browser of a resource that is expected to be needed as part of a future navigation or user interaction, for example, something that might be needed later,

<link rel="prefetch" href="page-2.html">

• preconnect

<link rel="preconnect" href="image.tmdb.org">

• preload: very important resources

<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="myfont.woff2">

- Intersection observer:

Fetch images only when they are in view

const observer = new IntersectionObserver();

Feel free to contribute