SlideShare a Scribd company logo
#MM18PL#MM18PL
Introduction to
Progressive Web Apps
@filrakowski
#MM18PL#MM18PL
Filip Rakowski
Co-founder
Front-end Dev
@filrakowski
This is my face!
#MM18PL#MM18PL
Who knows
what Progressive Web Apps are?
@filrakowski
#MM18PL#MM18PL
How many of you
think PWA is a buzzword?
@filrakowski
#MM18PL#MM18PL
@filrakowski
Let me tell you
about PWA
#MM18PL#MM18PL
„Progressive web apps use modern web APIs along
with traditional progressive enhancement strategy to
create cross-platform web applications. These apps
work everywhere and provide several features that
give them the same user experience advantages as
native apps. ”
~ Mozilla Developer Network
@filrakowski
#MM18PL#MM18PL
Don’t rely on modern APIs.
Always have a fallback
@filrakowski
#MM18PL#MM18PL
@filrakowski
Fast
#MM18PL#MM18PL
@filrakowski
Fast
Reliable
#MM18PL#MM18PL
@filrakowski
Fast
Engaging
Reliable
#MM18PL#MM18PL
Key technology
Service Worker
@filrakowski
#MM18PL#MM18PL
Service Workers are Web Workers that can
intercept navigation and resource requests.
They also work on a separate thread so they
are not terminated with your Web App!
Service Worker
@filrakowski
#MM18PL#MM18PL
Service Worker
@filrakowski
#MM18PL#MM18PL
Service Worker
@filrakowski
Service Worker can work even
when Web App has been closed!
#MM18PL#MM18PL
Service Worker Registration
@filrakowski
#MM18PL#MM18PL
Service Worker Registration
@filrakowski
Just a JavaScript code
#MM18PL#MM18PL
Service Worker
Cache and Offline
@filrakowski
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET https://name.com/api/users
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET https://name.com/api/users
response with users data
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET https://name.com/api/users
error
server is down, lack of
internet connection etc
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
Oops! I can’t fetch /users.
Let’s serve it from cache!
Cache
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
Do i have response
for /users cached?
Cache
#MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
Cache
/users
/users
#MM18PL#MM18PL
This was
Network-first caching strategy
@filrakowski
#MM18PL#MM18PL
@filrakowski
#MM18PL#MM18PL
You can do more!
Cache-first strategy
@filrakowski
#MM18PL#MM18PL
@filrakowski
#MM18PL#MM18PL
There is much more about handling Cache
Google.com: ‘Google Offline Cookbook’
@filrakowski
or type https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
#MM18PL#MM18PL
Service Worker
@filrakowski
Depending on type of a request and handled
circumstances Service Worker decides where to look for a
particular resource:
- Images/fonts always from cache
- JSON data from network
and from cache while offline
- ...
#MM18PL#MM18PL
@filrakowski
Simplify PWA development
https://developers.google.com/web/tools/workbox
#MM18PL#MM18PL
@filrakowski
Runtime Caching
example with Workbox
sw.js
#MM18PL#MM18PL
@filrakowski
#MM18PL#MM18PL
What else you can do with PWA
to improve User Experience?
@filrakowski
#MM18PL#MM18PL
One-click checkout with
Payment Request API
@filrakowski
#MM18PL#MM18PL
@filrakowski
Payment Request API
- One-click checkout without
needing to register or
provide order details
- Credit cards and Shipping
details shared between all
websites making use of
Payment Request API
#MM18PL#MM18PL
@filrakowski
Use traditional checkout as a fallback
#MM18PL#MM18PL
Engage your users by sending
Push Notifications
@filrakowski
#MM18PL#MM18PL
@filrakowski
Web Push Notifications
- Send native Push Notifications on
mobile and desktop
- Deliver them in a real-time from the
background Service Worker even
when your website is closed
#MM18PL#MM18PL
@filrakowski
Notifications API – an interface used to configure and
display notifications to the user
Push API – an interface used to subscribe your app to a
push service and receive push messages in the service
worker
#MM18PL#MM18PL
@filrakowski
Notification & Web Push API
- Ask for subscription (if
user declines you can’t do it
again!!)
- Display notifications from
Service Worker working on
background
Inside Service Worker
#MM18PL#MM18PL
@filrakowski
Let’s learn more!
#MM18PL#MM18PL
Let network requests wait for
stable connectivity with
Background Synchronization
@filrakowski
#MM18PL#MM18PL
@filrakowski
Request Network
Offline network requests
1. Try to reach the network
2. Fail
#MM18PL#MM18PL
@filrakowski
Request
Network
Offline network requests
with background sync
1. Queue task in the
background (Service
Worker)
2. Wait until connectivity is
restored
3. Send it to the server even
when website is closed
#MM18PL#MM18PL
@filrakowski
#MM18PL#MM18PL
What else you can do with PWA
to improve performance?
@filrakowski
#MM18PL#MM18PL
Prefetch resources before they are needed
to stay reliable!
@filrakowski
#MM18PL#MM18PL
1. Workbox precache module
https://developers.google.com/web/tools/work
box/modules/workbox-precaching
2. link rel=”prefetch”
@filrakowski
#MM18PL#MM18PL
Perform computationally expensive tasks without
interrupting user interface (main thread)
in Web Workers!
@filrakowski
#MM18PL#MM18PL
Reminder: Web Worker is a JS code executing
on a different thread which means it’s not
blocking the UI.
@filrakowski
#MM18PL#MM18PL
@filrakowski
Fetch /users for me please!
#MM18PL#MM18PL
@filrakowski
Hey! Sure!
Fetching...
#MM18PL#MM18PL
@filrakowski
Here’s your response!
#MM18PL#MM18PL
@filrakowski
#MM18PL#MM18PL
Bonus! Add to homescreen with
Web App Manifest
@filrakowski
#MM18PL#MM18PL
@filrakowski
#MM18PL#MM18PL
@filrakowski
Web App Manifest
- Add to homescreen like a
native app*
- Display without
browser’s UI so user can’t
see the difference
*from latest chrome version Homescreen
installation banner is not displaying
automatically. You need to run `prompt()`
method on prompt object.
#MM18PL#MM18PL
Workerize - delegate js modules to Web Workers
https://github.com/developit/workerize
ServiceWorkerWare - Express-like request middleware in Service Worker
https://github.com/fxos-components/serviceworkerware
Other awesome PWA stuff https://github.com/hemanth/awesome-pwa
@filrakowski
#MM18PL#MM18PL
You can follow me on twitter where I addictively
tweet about PWA @filrakowski (slides will be
there too)
Thank you!

More Related Content

What's hot (17)

PPTX
Structured Data Implementation, MREIDs, and More at SMX Advanced 2018
Mike Arnesen
 
PPTX
AMP Speeds without AMP Validation
MobileMoxie
 
PPT
Web Application Introduction
shaojung
 
PDF
PWA - The hidden stories about the future of the web
Romulo Cintra
 
PDF
FoundConf 2018 Signals Speak - Alexis Sanders
Alexis Sanders
 
PPT
Creating Yahoo Mobile Widgets
Ricardo Varela
 
PPTX
Lessons from the other side
Tim Plummer
 
PPT
Pubcon Vegas 2017 You're Going To Screw Up International SEO - Patrick Stox
patrickstox
 
PPTX
2 Seconds is the New Slow - Chris Simmance - under2
Chris Simmance
 
PDF
SEO Meets Automation
Hamlet Batista
 
PPTX
Query Classification on Steroids with BERT
Hamlet Batista
 
PPS
Etech2005
royans
 
PPTX
Using Enhanced Ecommerce for Non-ecommerce @ MeasureCamp Cardiff
MeasureCamp Cardiff
 
PPTX
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Mike Hale
 
PPTX
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Link-Assistant.Com
 
PPTX
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Gerry White
 
PPTX
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
Hamlet Batista
 
Structured Data Implementation, MREIDs, and More at SMX Advanced 2018
Mike Arnesen
 
AMP Speeds without AMP Validation
MobileMoxie
 
Web Application Introduction
shaojung
 
PWA - The hidden stories about the future of the web
Romulo Cintra
 
FoundConf 2018 Signals Speak - Alexis Sanders
Alexis Sanders
 
Creating Yahoo Mobile Widgets
Ricardo Varela
 
Lessons from the other side
Tim Plummer
 
Pubcon Vegas 2017 You're Going To Screw Up International SEO - Patrick Stox
patrickstox
 
2 Seconds is the New Slow - Chris Simmance - under2
Chris Simmance
 
SEO Meets Automation
Hamlet Batista
 
Query Classification on Steroids with BERT
Hamlet Batista
 
Etech2005
royans
 
Using Enhanced Ecommerce for Non-ecommerce @ MeasureCamp Cardiff
MeasureCamp Cardiff
 
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Mike Hale
 
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Link-Assistant.Com
 
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Gerry White
 
How to scale SEO work NOBODY wants to do (including your competitors) to rapi...
Hamlet Batista
 

Similar to Introduction to Progressive Web Apps / Meet Magento PL 2018 (20)

PDF
Maxim Salnikov - Service Worker: taking the best from the past experience for...
Codemotion
 
PPTX
Progressive Web Applications - The Next Gen Web Technologies
GeekNightHyderabad
 
PDF
Voxxed Athens 2018 - Getting real with progressive web apps in 2018
Voxxed Athens
 
PDF
Progressive Web Apps
Saikiran Sheshagiri
 
PPTX
PWA basics for developers
Filip Rakowski
 
PDF
pwa-170717082930.pdf
GabrielaPonso1
 
PPTX
Pwa.pptx
Harish Karthick
 
PDF
WTF is PWA?
Alan Semenov
 
PDF
Service workers
Pavel Zhytko
 
PPTX
Progressive Web Apps 101
Muhammad Samu
 
PPTX
Progressive web applications
Tom Martin
 
PPTX
Service workers and their role in PWAs
Ipsha Bhidonia
 
PPTX
Progressive Web Apps
Allison Clemens
 
PPTX
Progressive Web Apps - Overview & Getting Started
Gaurav Behere
 
PDF
Pwa february 2018
Business incubator Novi Sad
 
PDF
Progressive Web Apps
Software Infrastructure
 
PDF
WTF R PWAs?
Mike Wilcox
 
PDF
Progressive Web Apps - NPD Meet
Vaideeswaran Sethuraman
 
PPTX
Progressive web app testing
Kalhan Liyanage
 
Maxim Salnikov - Service Worker: taking the best from the past experience for...
Codemotion
 
Progressive Web Applications - The Next Gen Web Technologies
GeekNightHyderabad
 
Voxxed Athens 2018 - Getting real with progressive web apps in 2018
Voxxed Athens
 
Progressive Web Apps
Saikiran Sheshagiri
 
PWA basics for developers
Filip Rakowski
 
pwa-170717082930.pdf
GabrielaPonso1
 
Pwa.pptx
Harish Karthick
 
WTF is PWA?
Alan Semenov
 
Service workers
Pavel Zhytko
 
Progressive Web Apps 101
Muhammad Samu
 
Progressive web applications
Tom Martin
 
Service workers and their role in PWAs
Ipsha Bhidonia
 
Progressive Web Apps
Allison Clemens
 
Progressive Web Apps - Overview & Getting Started
Gaurav Behere
 
Pwa february 2018
Business incubator Novi Sad
 
Progressive Web Apps
Software Infrastructure
 
WTF R PWAs?
Mike Wilcox
 
Progressive Web Apps - NPD Meet
Vaideeswaran Sethuraman
 
Progressive web app testing
Kalhan Liyanage
 
Ad

More from Filip Rakowski (6)

PDF
Building resuable and customizable Vue components
Filip Rakowski
 
PPTX
Performance optimization of vue.js apps with modern js
Filip Rakowski
 
PPTX
Vue Storefront MUG
Filip Rakowski
 
PPTX
Vue storefront London PWA meetup
Filip Rakowski
 
PPTX
Maintainable design
Filip Rakowski
 
PPTX
Vue Storefront Basics
Filip Rakowski
 
Building resuable and customizable Vue components
Filip Rakowski
 
Performance optimization of vue.js apps with modern js
Filip Rakowski
 
Vue Storefront MUG
Filip Rakowski
 
Vue storefront London PWA meetup
Filip Rakowski
 
Maintainable design
Filip Rakowski
 
Vue Storefront Basics
Filip Rakowski
 
Ad

Recently uploaded (20)

PDF
The Internet of Things (IoT) refers to a vast network of interconnected devic...
chethana8182
 
PDF
GEO Strategy 2025: Complete Presentation Deck for AI-Powered Customer Acquisi...
Zam Man
 
PPTX
MSadfadsfafdadfccadradfT_Presentation.pptx
pahalaedward2
 
PDF
The AI Trust Gap: Consumer Attitudes to AI-Generated Content
Exploding Topics
 
PPTX
Perkembangan Perangkat jaringan komputer dan telekomunikasi 3.pptx
Prayudha3
 
PPTX
Different Generation Of Computers .pptx
divcoder9507
 
PPTX
The Latest Scam Shocking the USA in 2025.pptx
onlinescamreport4
 
PPTX
How tech helps people in the modern era.
upadhyayaryan154
 
PPTX
Artificial-Intelligence-in-Daily-Life (2).pptx
nidhigoswami335
 
PDF
How Much GB RAM Do You Need for Coding? 5 Powerful Reasons 8GB Is More Than E...
freeshopbudget
 
PDF
LOGENVIDAD DANNYFGRETRRTTRRRTRRRRRRRRR.pdf
juan456ytpro
 
PDF
Data Protection & Resilience in Focus.pdf
AmyPoblete3
 
PPTX
The Internet of Things (IoT) refers to a vast network of interconnected devic...
chethana8182
 
PPT
Introduction to dns domain name syst.ppt
MUHAMMADKAVISHSHABAN
 
PPTX
The Monk and the Sadhurr and the story of how
BeshoyGirgis2
 
PPTX
Google SGE SEO: 5 Critical Changes That Could Wreck Your Rankings in 2025
Reversed Out Creative
 
PPTX
Pengenalan perangkat Jaringan komputer pada teknik jaringan komputer dan tele...
Prayudha3
 
PDF
LB# 820-1889_051-7370_C000.schematic.pdf
matheusalbuquerqueco3
 
PPT
1965 INDO PAK WAR which Pak will never forget.ppt
sanjaychief112
 
PDF
Latest Scam Shocking the USA in 2025.pdf
onlinescamreport4
 
The Internet of Things (IoT) refers to a vast network of interconnected devic...
chethana8182
 
GEO Strategy 2025: Complete Presentation Deck for AI-Powered Customer Acquisi...
Zam Man
 
MSadfadsfafdadfccadradfT_Presentation.pptx
pahalaedward2
 
The AI Trust Gap: Consumer Attitudes to AI-Generated Content
Exploding Topics
 
Perkembangan Perangkat jaringan komputer dan telekomunikasi 3.pptx
Prayudha3
 
Different Generation Of Computers .pptx
divcoder9507
 
The Latest Scam Shocking the USA in 2025.pptx
onlinescamreport4
 
How tech helps people in the modern era.
upadhyayaryan154
 
Artificial-Intelligence-in-Daily-Life (2).pptx
nidhigoswami335
 
How Much GB RAM Do You Need for Coding? 5 Powerful Reasons 8GB Is More Than E...
freeshopbudget
 
LOGENVIDAD DANNYFGRETRRTTRRRTRRRRRRRRR.pdf
juan456ytpro
 
Data Protection & Resilience in Focus.pdf
AmyPoblete3
 
The Internet of Things (IoT) refers to a vast network of interconnected devic...
chethana8182
 
Introduction to dns domain name syst.ppt
MUHAMMADKAVISHSHABAN
 
The Monk and the Sadhurr and the story of how
BeshoyGirgis2
 
Google SGE SEO: 5 Critical Changes That Could Wreck Your Rankings in 2025
Reversed Out Creative
 
Pengenalan perangkat Jaringan komputer pada teknik jaringan komputer dan tele...
Prayudha3
 
LB# 820-1889_051-7370_C000.schematic.pdf
matheusalbuquerqueco3
 
1965 INDO PAK WAR which Pak will never forget.ppt
sanjaychief112
 
Latest Scam Shocking the USA in 2025.pdf
onlinescamreport4
 

Introduction to Progressive Web Apps / Meet Magento PL 2018

Editor's Notes

  • #3: I’m gonna talk about something that probably most of you is tired of - Progressive Web Apps. Before I continue I just want to ask two questions.
  • #5: While in eCommerce industry PWA is obviously a big buzzword representing the modern JS approach to building eCommerce stores the PWA technology itself in my opinion deserves this buzz like nothing else. During this talk I’ll try to show you just a small piece of the stuff you can achieve with PWA technology and trust me - it’s not just about replacing the native apps
  • #6: First I need to be sure that by saying ‘Progressive Web Apps’ we all mean the same so here is a great definition from Mozilla Dev Network
  • #7: As the definition may sound complicated in fact it’s very easy and intuitive. Let’s focus on highlited parts. PWA are using modern web api with progressive wnhancement strategy - it means that we are providing a bseline of our apps functionality to everyone no matter what browser they are using and progressively enhancing this functionality with what modern JS APIs can offer. But remember - you can’t rely on a modern APIs always need a fallback.
  • #8: As the definition may sound complicated in fact it’s very easy and intuitive. Let’s focus on highlited parts. PWA are using modern web api with progressive wnhancement strategy - it means that we are providing a bseline of our apps functionality to everyone no matter what browser they are using and progressively enhancing this functionality with what modern JS APIs can offer. But remember - you can’t rely on a modern APIs always need a fallback.