Build a production ready PWA - LINKIT & KLM Digital Studio Meetup

B U I L D A P R O D U C T I O N  
R E A D Y P WA

@onderceylan
Ö N D E R C E Y L A N
@onderceylan
Sharing knowledge on #javascript, #typescript, #angular, #ionic and #pwa
JS Tech Lead @LINKIT
Speaker, Organiser @ITNEXT
Speaker, Organiser @GDG NL

@onderceylan
S TAT E O F
T H E P WA
D E V E L O P M E N T

@onderceylan
N U M B E R O F P WA S
>
https://httparchive.org/reports/progressive-web-apps#swControlledPages

@onderceylan
AV E R A G E P WA S C O R E S
https://httparchive.org/reports/progressive-web-apps#pwaScores

@onderceylan
P R O J E C T F U G U
Going Big: PWAs Come to Desktop and Chrome OS (Google I/O ’19) 
https://www.youtube.com/watch?v=2KhRmFHLuhE

@onderceylan
goo.gle/fugu-api-tracker

@onderceylan
bit.ly/origin-trial

@onderceylan
B A D G I N G A P I

@onderceylan
N AT I V E F I L E S Y S T E M A P I

@onderceylan
C O N TA C T P I C K E R A P I

@onderceylan
S M S R E C E I V E R A P I

@onderceylan
A D D I N G P WA
S C H E M AT I C T O A N
A N G U L A R A P P

@onderceylan
A D D I N G T H E P WA S C H E M AT I C

@onderceylan
Use npx ng command
in your Angular project
without installing a global
@angular/cli package on
your system.
such tip wow
so npx
https://blog.npmjs.org/post/162869356040/
introducing-npx-an-npm-package-runner

@onderceylan
C H A N G E S E T A F T E R A D D I N G  
P WA S C H E M AT I C

@onderceylan
C H A N G I N G W E B A P P
M A N I F E S T F I L E

@onderceylan
A N G U L A R ’ S M A N I F E S T F I L E
manifest.webmanifest

@onderceylan
I N S P E C T I N G T H E M A N I F E S T

@onderceylan
A D D I N G A D E S C R I P T I O N

@onderceylan
A D D I N G A D E S C R I P T I O N
https://www.w3.org/TR/appmanifest/#description-member
https://developer.mozilla.org/en-US/docs/Web/Manifest#description

@onderceylan
Providing a name,
description and an app
icon that is at least 512 x 512
pixels will help your PWA to be
automatically indexed and
packaged on Microsoft
Store.
such icon wow
so index
https://docs.microsoft.com/en-us/microsoft-
edge/progressive-web-apps/microsoft-
store#automatic-pwa-importing-with-bing

@onderceylan
T R A C K I N G T H E S TA RT U R L

@onderceylan
D I S P L AY I N G A D D
T O H O M E S C R E E N
G U I D E L I N E S

@onderceylan
A 2 H S P R O M P T O N A N D R O I D

@onderceylan
• The web app is not already installed
• Meets a user engagement heuristic
• Includes a web app manifest that includes:
• short_name or name
• icons must include a 192px and a 512px sized icons
• start_url
• display must be one of: fullscreen, standalone, 
or minimal-ui
• Served over HTTPS (required for service workers)
• Has registered a service worker with a fetch event
handler
A 2 H S C R I T E R I A O N A N D R O I D
👤
👤

@onderceylan
short_name field in
your manifest will represent
your PWA's name when it's
added to a home screen.
Additionally, name field will be
used on Add to Home
Screen prompt on
Android!
such name wow
so android
https://developers.google.com/web/
fundamentals/app-install-banners/

@onderceylan
A 2 H S P R O M P T O N I O S

@onderceylan
A D D I N G M E TA TA G S
F O R P L AT F O R M
O P T I M I S AT I O N

@onderceylan
L A C K O F S TA N D A R D S O N I O S
Safari WebKit

@onderceylan
L A C K O F S TA N D A R D S O N I O S

@onderceylan
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/
SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

@onderceylan
Keep an eye on WebKit
Feature Status for tracking the
progress of the implementation of
web standards. Once Web App
Manifest specs is implemented on
WebKit, you won't need to use
custom meta tags anymore.
such manifest
wow
so webkit
https://webkit.org/status/#?search=manifest

@onderceylan
https://webkit.org/status/#?search=manifest

@onderceylan
A D D I N G M E TA TA G S F O R  
A P P I C O N S O N I O S
index.html

@onderceylan
S P L A S H S C R E E N S O N I O S
index.html

@onderceylan
index.html
S P L A S H S C R E E N S O N I O S

@onderceylan
https://developer.apple.com/design/human-interface-guidelines/
ios/icons-and-images/launch-screen/

@onderceylan
Use an automated tool to
generate your splash screen
images and their corresponding
html codes. Here's a CLI tool:  
https://bit.ly/pwa-assets
such automation
wow
so splash

@onderceylan
https://bit.ly/pwa-assets

@onderceylan
A D D I N G M E TA TA G S F O R
T H E S TAT U S B A R O N I O S
index.html

@onderceylan
S TAT U S B A R O P T I O N S O N I O S
• white - displays a white status bar with black text and
symbols.
• black - displays a black status bar and white text and
symbols. This is the default behaviour of a PWA on iOS,
when this meta tag is not in place.
• black-translucent - displays a white text and symbols,
with status bar using the same background color of your
app's body element.

@onderceylan
white
black
black-translucent
S TAT U S B A R O P T I O N S O N I O S

@onderceylan
C O N F I G U R I N G  
A N G U L A R
S E R V I C E W O R K E R

@onderceylan
A N G U L A R S E R V I C E W O R K E R  
N G S W - C O N F I G . J S O N

@onderceylan
A S S E T G R O U P S I N  
N G S W - C O N F I G . J S O N

@onderceylan
D I F F E R E N T I A L
L O A D I N G
index.html

@onderceylan
P R E F E T C H M O D E

@onderceylan
A S S E T G R O U P C O N F I G
E X A M P L E : S H E L L
ngsw-config.json [partial]

@onderceylan
A S S E T G R O U P C O N F I G
E X A M P L E : U I A S S E T S

@onderceylan
E X T E N D I N G  
A N G U L A R  
S E R V I C E W O R K E R

@onderceylan
I N T R O D U C I N G Y O U R
O W N S E R V I C E W O R K E R
src/sw/main-sw.js
src/app/app.module.ts

@onderceylan
U P D AT I N G  
Y O U R P WA

@onderceylan
A P P V E R S I O N S A N D
U P D AT E C H E C K S

@onderceylan
A P P D ATA

@onderceylan
S W U P D AT E S E R V I C E

@onderceylan
A N G U L A R . J S O N
F O R S TAT I C A S S E T S

@onderceylan
D E FA U LT A S S E T C O N F I G O F
@ A N G U L A R / P WA
angular.json [partial]

@onderceylan
A D VA N C E D A S S E T C O N F I G
angular.json [partial]

@onderceylan
Angular’s config files
use glob-like pattern to
match file names. Example:  
 
/**/*.html all HTML files.  
/*.html only HTML files in the root.  
!/**/*.map exclude all
sourcemaps.
such match
wow
so glob
https://angular.io/guide/service-worker-
config#glob-patterns

@onderceylan
H O S T I N G Y O U R
P WA O N F I R E B A S E

@onderceylan
F I R E B A S E C L I

@onderceylan
I N I T I A L I S I N G F I R E B A S E
C O N F I G

@onderceylan
A F I R E B A S E  
H O S T I N G  
F O R Y O U R P WA

@onderceylan
Do not deploy any file that
keep your credentials or any other
confidential info under no
circumstances. Make sure to ignore
any conﬁguration ﬁle you have in
your public folder.
such security
wow
so public

@onderceylan
A D D I N G C U S T O M H T T P
H E A D E R S F O R C A C H I N G

@onderceylan
Long cache lifetime
and compressed
static resources
firebase.json

@onderceylan
Introduce vendor
chunk to your production
build config of your Angular
app - see vendorChunk option
in angular.json. This will help on
your PWA's cache strategy as you
most likely will not update
vendor libraries too
often.
such vendor
wow
so chunk

@onderceylan
{1} Production build output of Angular where vendor chunk is
enabled

@onderceylan
D E P L O Y I N G  
Y O U R P WA
T O F I R E B A S E

@onderceylan
D E P L O Y M E N T O N
F I R E B A S E C L I

@onderceylan
A U D I T I N G  
Y O U R P WA
W I T H L I G H T H O U S E

@onderceylan
U S I N G O N L I N E
A U D I T R U N N E R
https://developers.google.com/web/tools/lighthouse/run

@onderceylan
U S I N G C H R O M E D E V T O O L S

@onderceylan
U S I N G L I G H T H O U S E C L I

@onderceylan
Executing nightly
regressions on your
production app to monitor it
against updated PWA audits will
help you to align with future PWA
best practices as the list of
audits get updated in
time.
such audit
wow
so nightly

@onderceylan
• Keep an eye on web standards and new capabilities 🐡
• Use Angular schematics to scaffold files for your initial PWA 🔌
• Optimise your PWA for iOS to provide uniform experiences 📱
• Generate your icons and splash screens in an automated way 🤖
• Use NGSW and cache strategies to make your app resilient ⛰
• Extend NGSW to add more capabilities via ServiceWorkers 🧩
• Notify your users when your app receives updates 🚀
• Conﬁgure your build and hosting provider for longer caches 🎯
TA K E AWAY S

@onderceylan
1 0 - 1 4 F E B R U A RY
@LINKIT HQ in Utrecht
bit.ly/linkit-mws

@onderceylan
@onderceylan
Follow me on Twitter
T H A N K Y O U !

@onderceylan
Q U E S T I O N S ?
@onderceylan
Follow me on Twitter

Build a production ready PWA - LINKIT & KLM Digital Studio Meetup

More Related Content

What's hot

Similar to Build a production ready PWA - LINKIT & KLM Digital Studio Meetup

More from Önder Ceylan

Recently uploaded

Build a production ready PWA - LINKIT & KLM Digital Studio Meetup