Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgferreiro

Progressive
Web Apps 101
Jorge Ferreiro (@jgferreiro)
www.ferreiro.me

@JGFERREIRO@JGFERREIRO #codemotionpwa
How many of you have
ever created a web app?

How many of you know
what a PWA is?

@JGFERREIRO #CODEMOTIONPWA
Frontend @Eventbrite
Alumni @Amazon
Blogger, DJ, fan of musicals
Jorge Ferreiro

@JGFERREIRO@JGFERREIRO #CODEMOTIONPWA
youtube.com/jgferreiro
My youtube show:

@JGFERREIRO@JGFERREIRO
What are we
gonna build
today?
0.

Our first Progressive Web App!
✅ Ofﬂine mode
✅ Local Notiﬁcations
✅ Cache requests
✅ Payments API
❌ Background Sync
❌ IndexedDB
Emotion CSS-in-JS

github.com/ferreiro/pwa-101
ferreiro/pwa-101
Source code

Agenda
• Motivation
• Manifest
• Service workers
• Offline Mode
• APIs and advanced topics
Important quote

Audience: Goals
Experts on PWA
Web devs with no
experience on PWA
Beginners

Questions to Fran :)

#CODEMOTIONPWA
@JGFERREIRO

# What are
Progressive Web
Apps?
1.

Web applications that adapts the
user experience based on the device
network, device capabilities and
user needs
Progressive Web Apps (PWAs):

PWAs can also have native
mobile apps cabapabilities
(offline mode, push, etc.)
Big selling point!

Using latest browser features
when they are available
Progressive enhancement:

@JGFERREIRO
Progressive enhancement: Intuition

๏ Simplified web
version
๏ Data save mode
๏ Limit access to
advanced features
🌍
Progressive enhancement: Example
๏ High quality media
๏ Advanced Features:
Push, background
sync, etc.
United States
Bad 2G connection | Cheap phone 5G connection | High quality phones
%Africa

Progressive enhancement: Simplification
if ('feature' in browser) {
!// Feature is available!!!
!// Do something cool with it!
} else {
!// 😡 Party pooper
!// Browser does not support this feature
!// Change your browser!!...
}

Responsive
'
Works offline
⚙
App-like-
interactions
📱
Fresh
🌿
Safe
🔐
Discoverable
🔍
Re-engageable
🔔
PWA features (Alex Russell Jake Archibald)
Durable
💾
Linkable
🔗
Alex Russel “Progressive Web Apps:
Escaping Tabs Without Losing Our Soul”

@JGFERREIRO
Android rocks!
✅ Web Push
✅ Background Sync
✅ PWAs in the Google Play
https://www.youtube.com/watch?v=7JDFjeMvxos
🔥
🔥
🔥
🔥
🔥
🔥

Progressive Web
Apps in the industry
2.

Amazing PWAs in the industry

Pinterest increased by
843% new signups y/y
A one year PWA retrospective

Twitter decreased by 70%
data consumption
1. Twitter Lite case study
2. How we built Twitter Lite

Tinder mobile loading time
decreased from 11.37s to 4.69s

🤔 Why Progressive
Web Apps?
3.

Smaller and 1-click install
Native apps tend to occupy more space.
Offline and notifications!
Improves user retention and converstions.
Adaptative experience
Our apps can adapt to any device.
Distribution Freedom
No need apple store or play store

Let’s build our first
PWA!

Our first Progressive Web App!
Emotion CSS-in-JS
✅ Ofﬂine mode
✅ Local Notiﬁcations
✅ Cache requests
✅ Payments API
❌ Background Sync
❌ IndexedDB

Progressive
metatags
4.

Viewport metatag
<meta name="viewport"
content="width=device-width, initial-scale=1">
🔥 mdn: Using the viewport meta tag
Forces the browser to use real device width

Theme color
<meta name="theme-color" content="#fb8397">

Apple metatags
👀 Apple: Conﬁguring web applications
<meta name="apple-mobile-web-app-title" content="Pennapps">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-capable" content="yes">
😒

More Apple metatags… 😅 icons
👍 favicon-generator.org
<link rel="apple-touch-icon" sizes="57x57" href=“image_57_57.png">
<link rel="apple-touch-icon" sizes="60x60" href="image_60_60.png">

Manifest.json5.

manifest.json is a file that tells
the browser about your web
application and how it should
behave when 'installed'
https://developers.google.com/web/fundamentals/web-app-manifest

Create manifest.json
"short_name": "Pennapps",
"name": "Pennapps agenda",
"start_url": "/?utm_source=pwa",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"scope": "/",
"icons": []
{
}
<link href="/static/manifest.json" rel="manifest">

“short_name": "Pennapps",
"name": "Pennapps agenda",
"start_url": "/?utm_source=pwa",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"scope": "/",
"icons": []
{
}
{ !// 192 for the “home screen icon”
"src": "/static/images/pennapps_logo_pwa_192_192.png",
"sizes": "192x192",
"type": "image/png"
},
{ !// 512 for splash screen (on Android)
"src": "/static/images/pennapps_logo_pwa_512_512.png",
"sizes": "512x512",
"type": "image/png"
}
]

Manifest.json - display
fullscreen No browser UI
✅ Videogames
standalone Hides standard browser UI elements
✅ Standalone native app
minimal-ui Fullscreen display. Minimal UI elements
browser Standard browser experience
Google: Web App Manifest

Test your manifest in dev tools

@JGFERREIRO
Test your manifest in Lighthouse

Intro to Service
Workers
6.

A service worker is like a
client side proxy
It gives you control of the cache,
and how to respond to requests

Service
Worker
A service worker is a JavaScript file
that runs separately from the main
browser thread

Our first service
worker

SERVICE WORKER :: INSTALL CALLBACK
self.addEventListener('install', (event) !=> {
!// Install anything you need here!
})
self.addEventListener('fetch', (event) !=> {
console.log('I am intercepting network requests!')
const url = event.request.url
console.log('Requested resource url: ', url)
})
Create a new SW.js file

SERVICE WORKER :: REGistering new SW
if ('serviceWorker' in navigator) {
console.log('⭐ Start to register a service worker')
navigator.serviceWorker.register('/sw.js')
.then((registration) !=> {
console.log('SW!::Registration', registration)
})
.catch((error) !=> {
console.log('SW!::Error registering', error)
});
}

Offline mode with
Cache API
7.

Offline mode?
We need a cache!
We need a bunch of cached
resources, downloaded in
the client’s browser
Cached resources in the browser

Cache API is a key-value
storage mechanism for
requests<>responses pairs

Cache API gives programmatic
control over caching assets
inside a service worker

Cache Hello World7.1

caches.open()
Returns a Promise with
the Cache object
CacheStorage API
https://developer.mozilla.org/en-
US/docs/Web/API/CacheStorage

Cache object
Cache.add(request)
Cache.addAll([request])
Cache.put(request, response)
Cache.delete(request, options)
Cache.match(request, options)
Cache.matchAll(request, options)
https://developer.mozilla.org/en-
US/docs/Web/API/Cache
(Same as fetch() + put())
Request object
or a URL
fetch(new Request(“/image.jpg”))

CACHE API :: HELLO WORLD
const cacheNameVersion = 'resources-v1'
self.addEventListener('install', () !=> {
})
caches.open(cacheNameVersion)
.then((cache) !=> {
cache.add("index.html")
cache.add("client.bundle.js")
})
.catch((error) !=> {
!// Error opening the cache :/
})

🔎 Check cached resources

🔎 Check cache size

Caching critical
assets
7.2

A critical asset?
Things needed to run your app
without internet connection.

event.waitUntil()
Service worker will stay in “install”
mode, until the promise is resolved
✅ Are all assets cached? Then
Service Worker is installed!
❌ Error caching critical assets?
Service worker not installed.

CACHE API :: REQUIRING CRITICAL ASSETs
const cacheVersion = 'version-1'
const noCriticalAssets = [‘foo.css']
const criticalAssets = ['/index.html', ‘/client.bundle.js']
function cacheAssets() {
return caches.open(cacheVersion)
.then((cache) !=> {
cacheNoCriticalAssets(cache)
return cacheCriticalAssets(cache)
})
}
function cacheCriticalAssets (cache) {
return cache.addAll(criticalAssets)
}
function cacheNoCriticalAssets(cache) {
cache.addAll(noCriticalAssets)
}
event.waitUntil(cacheAssets())
})
This return does the magic!
If failure on this promise,
then waitUntil will fail

Removing old
cache resources
7.3

CACHE API :: REMOVING CACHED ASSETS
!// Add assets to the service worker cache
})
self.addEventListener('activate', (event) !=> {
!// Remove cached assets from previous version
!// using caches.delete().
})
Make sure to remove cached ASSETS!

Fetch image or
placeholder
7.4

CACHE API :: Fetch image or placeholder
self.addEventListener('fetch', (event) !=> {
const acceptHeader =
event.request.headers.get('accept')
if (acceptHeader.includes('image')) {
return event.respondWith(
fetchImageOrPlaceholder(event)
)
}
})

function fetchImageOrPlaceholder(fetchEvent) {
return fetch(fetchEvent.request)
.then((response) !=> {
if (!response.ok) {
throw Error(‘Can not download from server…’)
}
return response
})
.catch(() !=> {
!// NB: Return placeholder.
return caches.match(placeholderImage, {
cacheName: cacheVersion
})
})
}
const placeholderImage = '/images/placeholder.jpg'

Network request
with cache backup
7.5

function fetchImageOrFallback(event) {
return fetch(event.request)
READ CacheStorage
.then((response) !=> {
if (!response.ok) {
throw Error('Can not download image from server')
}
caches.open(cacheVersion).then(function(cache) { !// Cache in background
cache.put(event.request, response)
})
return response.clone() !// NB: Can't reuse responses twice: bit.ly/response-clone
})
.catch(() !=> {
return caches.match(fetchEvent.request).catch(function() { !// try to get cached
return caches.match('/images/placeholder.jpg', { !// Return placeholder
cacheName: cacheVersion
})
})
})
}

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgferreiro

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgferreiro

Ähnlich wie Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgferreiro (20)

Mehr von Jorge Ferreiro

Mehr von Jorge Ferreiro (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Codemotion Progressive Web Applications Pwa Webinar - Jorge Ferreiro - @jgferreiro