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?