A HARD LOOK AT PROGRESSIVE WEB APPLICATIONS

A HARD LOOK AT PROGRESSIVE WEB APPLICATIONS

What we are covering!

Project Background

What you need to know about PWAs

Manifest

Service Worker

  • What is it

  • Benefits & Caveats

  • Our Experience

  • What is it

  • Benefits & Caveats

  • Our Experience

Wrapping it up

Links & other goodies

Maya Lvovna Filippova

Lead Full Stack Dev

@mordacem

Brittany Pitseolak Bergin

Research Analyst

@berginbrit

Meet the Team

Tier 1 Canada Research Chair

UX Designer

Graphic Designer

Software Developer

Project Coordinator

PostDoc Fellow

Who are our end users?

Where are our end users?

25 - 90%

10 - 25%

5 - 10%

3 - 5%

2 - 3%

1 - 2%

0 - 1%

text

Why talk about it?

WHAT TO KNOW

    ┏┓

  ┃┃  ╱╲ in this

  ┃╱╱╲  ╲  house

╱╱  ╭╮  ╲  ╲ we

  ▔▏┗┛▕▔     say

  ╱▔▔▔▔▔▔▔▔▔╲

╱╱┏┳┓╭╮┏┳┓ ╲╲

▔▏┗┻┛┃┃┗┻┛▕▔

PWA

MPA

SPA

PWA

The Secret Truth About PWAs

Easy.

*if you know the structure

They are

**Boilerplate is available 4 u

<!DOCTYPE html>
<html>
  <head>
    <link rel="manifest" href="./manifest.webmanifest" />
  </head>
  <body>
    <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", () => {
          navigator.serviceWorker.register("/service-worker.js");
        });
      }
    </script>
  </body>
</html>
index.html

PWA

Manifest

ServiceWorker

W3C Status

PWA or Separate?

From Scratch?

MANIFEST

WHAT DO YOU NEED FOR AN STANDALONE APP?

VPIA

1. Logo

2. Title

{
  "short_name": "VPIA",
  "name" : "Virtual Platform for Indigenous Art",
  "icons": [
    {
      "src": "./assets/images/logo.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src":"./assets/images/logo.png",
      "sizes":"512x512",
      "type":"image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
manifest.webmanifest

The Benefits of

Manifest

1.

Less work!

Less work!

2.

No delay to release!

No delay to release!

The Caveats of

Manifest

No Basic Common UI

Apple Safari Banner

Firefox Desktop Installation

Custom A2HS Banners

SERVICE WORKER

vs

WEB WORKER

WEB WORKER

SERVICE WORKER

SERVICE WORKER

The Benefits of

Service Worker

The Caveats of

Service Worker

Implementation is up to you

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"
);

if (workbox) {
  // Precache routes to website so it is served even if user offline
  workbox.precaching.precacheAndRoute([
    { url: "/" },
    { url: "/#/landing" },
    { url: "/#/about" },
    { url: "/#/results" }
  ]);

  // Example of creating cache for JS and CSS files
  workbox.routing.registerRoute(
    /\.(?:js|css)$/,
    new workbox.strategies.NetworkFirst({
      cacheName: "static-resources"
    })
  );
  
  // Add more caches if needed.

} else { console.log("Workbox failed to load."); }
service-worker.js

Create React App

Wrapping Up

Wrapping Up

BOILERPLATE

https://github.com/Mordax/pwa-boilerplate

Boilerplate

Interested in the VPIA?

https://github.com/Wapatah/VPIA

vpia@ocadu.ca