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

A HARD LOOK AT PROGRESSIVE WEB APPLICATIONS

By brittles

Made with Slides.com

A HARD LOOK AT PROGRESSIVE WEB APPLICATIONS

This a discussion around Progressive Web Applications (PWAs). We walk you through what a PWA is, how they work, the huge potential for benefit, the limitations of the current browser implementations of them and practical advice from a real world project trying to use them. The speakers have been working on an open source, MERN stack platform with a unique targeted audience - Indigenous users. Which means, any platform to be used on a regular basis must be able to withstand unreliable Internet connections - ergo Progressive Web Applications. The audience should hopefully walk away better prepared for the new world of offline applications. Technical requirements - The audience should be able to follow along, however I will go into more specifics regarding React and PWA caveats. So some understanding of web applications and React would be a plus. Why I’m the strongest person to talk on this subject - As a lead developer at OCAD University in Toronto, Canada, I work closely with a group of anthropologists, academics, Indigenous artists and curators, and developers. I have been a part of the project from the initial development stages until now, and have been adamant about implementing Offline techniques. I have also worked with a group of international developers in Denmark on another PWA project.

  • 334