taking the p out of pwa

Taking the P out of PWA…

Chris Heilmann (@codepo8) January 2018

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

NetworkIndependent

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.


A PWA has a unique URL. This can be used as a distribution model. The link.


PWAs are progressive.They don’t work and behave the same everywhere.


PWAs are progressive. They improve over time and with the ability of the host environment.


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.

WebManifest

Service Workers

We talk far too much about the nuts and bolts.

EEngaging

Let’s concentrate on how our apps appear

to the user.

FFast

IIntegrated

RReliable

Where’s the fire?

EEngaging

FFast

IIntegrated

RReliable

Where’s the fire?

WTF?

EEngaging

FFast

IIntegrated

RReliable

Let’s talk about things that need work…

EEngaging

FFast

IIntegrated

RReliable

Empty shells are fast, but not useful...

twitter.com/codepo8/status/954308397809184768

EEngaging

FFast

IIntegrated

RReliable

PWAs should be faster, not slower...

Integration

EEngaging

FFast

IIntegrated

RReliable

PWAs should play well with the OS…

EEngaging

FFast

IIntegrated

RReliable

Alas, it is the web and user choice...

EEngaging

FFast

IIntegrated

RReliable

We have some work to do...

EEngaging

FFast

IIntegrated

RReliable

Great integration we don‘t mention...

EEngaging

FFast

IIntegrated

RReliable

From web to app store via manifest...

EEngaging

FFast

IIntegrated

RReliable

Yes, the manifest matters...

Reliability

EEngaging

FFast

IIntegrated

RReliable

Embracing the web shareability...

EEngaging

FFast

IIntegrated

RReliable

Avoiding known annoyances

EEngaging

FFast

IIntegrated

RReliable

Availability in the worst scenarios...

EEngaging

FFast

IIntegrated

RReliable

Let’s be mindful of Service Workers…

homebrewery.naturalcrit.com/share/SyZ4Sxms5b

Engagement

EEngaging

FFast

IIntegrated

RReliable

Engaging, not annoying…

EEngaging

FFast

IIntegrated

RReliable

Not all re-use is advisable...

EEngaging

FFast

IIntegrated

RReliable

Going too basic isn‘t helping either...

EEngaging

FFast

IIntegrated

RReliable

Let’s build progressive interfaces…

EEngaging

FFast

IIntegrated

RReliable

Same app, different environment…

This isn’t new - our web best practices apply…

EEngaging

FFast

IIntegrated

RReliable

PWA tooling is great!(as always, it is tough to build tools for an open stack)

ServiceWorkerCookbook

(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

Why is it hard to find great examples?

Why indeed?

Our PWA messaging is at times awful and

short-sighted

EEngaging

FFast

IIntegrated

RReliable

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

EEngaging

FFast

IIntegrated

RReliable

Give feedback and take part in tools and docs

EEngaging

FFast

IIntegrated

RReliable

Keep up-to-date before telling people about PWAs.

EEngaging

FFast

IIntegrated

RReliable

Promote and celebrate great examples.

EEngaging

FFast

IIntegrated

RReliable

I try to stop people to package awful websites into containers - again.

Please, help!

Thanks!Chris Heilmann@codepo8

taking the p out of pwa

Education