Taking the P out of PWA

Christian Heilmann
Christian HeilmannSenior Program Manager Developer Experience and Evangelism at Microsoft
Taking the P out of PWA…
Chris Heilmann (@codepo8) January 2018
Taking the P out of PWA
Partner
Application
Experience
Apps in the
Enterprise
Photo by Janson G: pixabay.com/en/spaceship-model-isolated-enterprise-2749360/
Progressive Web Apps
twitter.com/larsklint/status/941504191222054912
twitter.com/codepo8/status/954311316113690624
“But, what is a PWA?”,
I hear you ask.
Yeah, OK, a developer can dream…
A PWA is
Discoverable Installable Linkable
Network
Independent
Safe Re-engageable
Progressive Responsive App-Like Fresh
Asking that much is a bit
of a stretch…
Let’s make this simpler…
A PWA is a web-technology
based application. It mixes the
best of the web and the app
space.
Let’s make this simpler…
A PWA has a unique URL. This
can be used as a distribution
model. The link.
Let’s make this simpler…
PWAs are progressive.
They don’t work and behave
the same everywhere.
Let’s make this simpler…
PWAs are progressive.
They improve over time and
with the ability of the host
environment.
Let’s make this simpler…
If you choose to install PWAs
they behave like we expect
apps to behave. Without any
of the annoying bits…
Bridging the gap between
apps and web needed
good technology
PWAs use the
current web,
progressively
aka.ms/webcando
Additionally, we needed
two new technologies.
Web
Manifest
Service
Workers
We talk far too much
about the nuts and bolts.
E
Engaging
Let’s concentrate on
how our apps appear
to the user.
F
Fast
I
Integrated
R
Reliable
Where’s the fire?
E
Engaging
F
Fast
I
Integrated
R
Reliable
Where’s the fire?
WTF?
E
Engaging
F
Fast
I
Integrated
R
Reliable
Let’s talk about things
that need work…
Speed
E
Engaging
F
Fast
I
Integrated
R
Reliable
Empty shells are fast, but not useful...
twitter.com/codepo8/status/954308397809184768
E
Engaging
F
Fast
I
Integrated
R
Reliable
PWAs should be faster, not slower...
Integration
E
Engaging
F
Fast
I
Integrated
R
Reliable
PWAs should play well with the OS…
E
Engaging
F
Fast
I
Integrated
R
Reliable
Alas, it is the web and user choice...
E
Engaging
F
Fast
I
Integrated
R
Reliable
We have some work to do...
E
Engaging
F
Fast
I
Integrated
R
Reliable
Great integration we don‘t mention...
E
Engaging
F
Fast
I
Integrated
R
Reliable
From web to app store via manifest...
E
Engaging
F
Fast
I
Integrated
R
Reliable
Yes, the manifest matters...
Reliability
E
Engaging
F
Fast
I
Integrated
R
Reliable
Embracing the web shareability...
E
Engaging
F
Fast
I
Integrated
R
Reliable
Avoiding known annoyances
E
Engaging
F
Fast
I
Integrated
R
Reliable
Availability in the worst scenarios...
E
Engaging
F
Fast
I
Integrated
R
Reliable
Let’s be mindful of Service Workers…
homebrewery.naturalcrit.com/share/SyZ4Sxms5b
Engagement
E
Engaging
F
Fast
I
Integrated
R
Reliable
Engaging, not annoying…
E
Engaging
F
Fast
I
Integrated
R
Reliable
Not all re-use is advisable...
E
Engaging
F
Fast
I
Integrated
R
Reliable
Going too basic isn‘t helping either...
E
Engaging
F
Fast
I
Integrated
R
Reliable
Let’s build progressive interfaces…
E
Engaging
F
Fast
I
Integrated
R
Reliable
Same app, different environment…
This isn’t new - our web
best practices apply…
E
Engaging
F
Fast
I
Integrated
R
Reliable
PWA tooling is great!
(as always, it is tough to build tools for an open stack)
ServiceWorker
Cookbook
(Mozilla)
aka.ms/serviceworkers
Workbox
(Google)
aka.ms/workbox
Lighthouse
(Google)
aka.ms/google-lighthouse
Not everybody
cares about the nuts
and bolts…
twitter.com/headjs_ru/status/955333399564161024
PWA Builder
(Microsoft)
aka.ms/pwa-builder
PWA Builder
(Microsoft)
aka.ms/pwa-builder
Why is it hard to
find great examples?
Why indeed?
Our PWA messaging is
at times awful and
short-sighted
E
Engaging
F
Fast
I
Integrated
R
Reliable
Moaning travels
upwards and takes a
long time to arrive.
Photo by Janson G: pixabay.com/en/spaceship-model-isolated-enterprise-2749360/
It is tough to find
PWAs on FIRE
(that aren’t demos)
PWA Stats
(Cloud Four)
aka.ms/pwa-stats
Please help the PWA effort
Don’t assume your
experience is normal
E
Engaging
F
Fast
I
Integrated
R
Reliable
Give feedback and take
part in tools and docs
E
Engaging
F
Fast
I
Integrated
R
Reliable
Keep up-to-date before
telling people about PWAs.
E
Engaging
F
Fast
I
Integrated
R
Reliable
Promote and celebrate
great examples.
E
Engaging
F
Fast
I
Integrated
R
Reliable
I try to stop people to
package awful websites
into containers - again.
Please, help!
Thanks!
Chris Heilmann
@codepo8
1 of 68

More Related Content

Similar to Taking the P out of PWA(20)

Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
Christian Heilmann1.4K views
Going web native - Feb 2018Going web native - Feb 2018
Going web native - Feb 2018
Marcus Hellberg133 views
Going web nativeGoing web native
Going web native
Marcus Hellberg161 views
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
Jason Grigsby624 views
Demystifying progressive web appsDemystifying progressive web apps
Demystifying progressive web apps
Marcus Hellberg199 views
Business Values of PWAsBusiness Values of PWAs
Business Values of PWAs
UXDXConf110 views
Mobile simplificadoMobile simplificado
Mobile simplificado
Mobile Marketing Association289 views
Trust in Brands in the Age of AITrust in Brands in the Age of AI
Trust in Brands in the Age of AI
J F Grossen46 views
The Future of Web AppsThe Future of Web Apps
The Future of Web Apps
iCiDIGITAL437 views
Developer connect - microservicesDeveloper connect - microservices
Developer connect - microservices
Anton McConville409 views
All onboard! (Mobilize Dublin 202001)All onboard! (Mobilize Dublin 202001)
All onboard! (Mobilize Dublin 202001)
Mathew Cropper48 views
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby2.1K views

More from Christian Heilmann(20)

Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
Christian Heilmann1.1K views
Hinting at a better webHinting at a better web
Hinting at a better web
Christian Heilmann2.8K views
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann1K views
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann1.3K views
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann2.5K views
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
Christian Heilmann534 views
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann955 views
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann1.5K views
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
Christian Heilmann581 views
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
Christian Heilmann3.2K views
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
Christian Heilmann1.1K views

Recently uploaded(20)

NS3 Unit 2 Life processes of animals.pptxNS3 Unit 2 Life processes of animals.pptx
NS3 Unit 2 Life processes of animals.pptx
manuelaromero201394 views
Chemistry of sex hormones.pptxChemistry of sex hormones.pptx
Chemistry of sex hormones.pptx
RAJ K. MAURYA107 views
Drama KS5 BreakdownDrama KS5 Breakdown
Drama KS5 Breakdown
WestHatch54 views
STYP infopack.pdfSTYP infopack.pdf
STYP infopack.pdf
Fundacja Rozwoju Społeczeństwa Przedsiębiorczego159 views
Universe revised.pdfUniverse revised.pdf
Universe revised.pdf
DrHafizKosar88 views
Classification of crude drugs.pptxClassification of crude drugs.pptx
Classification of crude drugs.pptx
GayatriPatra1460 views
ICS3211_lecture 08_2023.pdfICS3211_lecture 08_2023.pdf
ICS3211_lecture 08_2023.pdf
Vanessa Camilleri79 views
Narration  ppt.pptxNarration  ppt.pptx
Narration ppt.pptx
TARIQ KHAN76 views
Narration lesson plan.docxNarration lesson plan.docx
Narration lesson plan.docx
TARIQ KHAN92 views
SIMPLE PRESENT TENSE_new.pptxSIMPLE PRESENT TENSE_new.pptx
SIMPLE PRESENT TENSE_new.pptx
nisrinamadani2159 views
Structure and Functions of Cell.pdfStructure and Functions of Cell.pdf
Structure and Functions of Cell.pdf
Nithya Murugan256 views
Lecture: Open InnovationLecture: Open Innovation
Lecture: Open Innovation
Michal Hron94 views
STERILITY TEST.pptxSTERILITY TEST.pptx
STERILITY TEST.pptx
Anupkumar Sharma107 views
Industry4wrd.pptxIndustry4wrd.pptx
Industry4wrd.pptx
BC Chew157 views
Nico Baumbach IMR Media ComponentNico Baumbach IMR Media Component
Nico Baumbach IMR Media Component
InMediaRes1368 views

Taking the P out of PWA