Apps RULE!

Enormous Downloads!

Mmm... Friction

Inflict it on your friends!

Personalized Version Management

Multiple versions of the same codebase!

More teams!

Pay Tribute!

Learn Patience!

Embrace Hope!

Apps rule?

How did this happen?

A brief history of apps

'07

'08

'09

'10

'11

'12

'13

'14

'15

'16

'17

"Apps have become nearly irrelevant on desktops because the web experience is close to perfect, while apps are vitally important on phones because the web experience is dismal."

-Nilay Patel, "The Mobile Web Sucks", 2015

Poorly understood stats

87% of the average users's time is in apps

Yes,

• 80% of that time is in 3 apps
• Average user installs 0 apps per month
• Average user visits 100 sites per month

Poorly understood stats

Average native app user is worth more revenue

• Mobile web's reach is 2.5x bigger
• Acquisition costs are 10x cheaper
• Conversion rate is much higher

Yes,

Poorly understood stats

40% of users bounce after 3 seconds of load

• Every click in the install process loses 20%
• 69% of users abandon your app altogether when you show them an interstitial

Yes,

Current Landscape

Browser Capabilities

2007

Browsers can do...

• Offline
• Push notifications
• Camera
• VR
• Work without the window open
• Talk to other web apps
• Battery Life
• Vibration
• Connection Quality
• Background sync

Why Web?

The Web Solves Distribution

Because Money

Because hybrids are a half-solution

What is a Progressive Web App?

PWA Concepts

• Progressive enhancement
• Responsiveness
• Connectivity-independent
• App-like
• Fresh
• Safe
• Discoverable
• Reengagable
• Installable
• Linkable

Getting more common!

The Weather Channel

The Washington Post

How do you build a PWA?

Service Worker

Cache & IndexedDB

Notifications

Push API

Manifests

AMP

Navigator

• Battery
• Network Connection
• Geolocation
• Number of processor cores
• VR devices
• Vibration
• Camera & Microphone

Styling

Coming Soon

• Server-Side Hydration
• Payments API
• Web Credentials API
• WASM
• WebGL
• Media Capture
• Stream Encoding

We need to talk about Apple.

"We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform. If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features. We cannot be at the mercy of a third party deciding if and when they will make our enhancements available to our developers."

Safari is the new Internet Explorer

That's a lot of grey on the right

"Becoming a more frequent request. We should do it."

WebKit minutes, 2015

• Every browser has to use WebKit- except Safari?
• No way to change the default browser
• One-Off Issues
  • Different manifest
  • Slow adoption of IndexedDB
  • Weird media rules
  • Own payment API
  • Not evergreen
  • No WASM support

Even still!

• It's a progressive web app
• iOS users still had higher engagement
• Still cheaper to develop than all-in native

Low-Hanging Fruit

• Move to HTTPS
• Add a manifest
• Start using caching strategies
• Go to app/shell architecture
• Client-Side Render your app

Overall Migration Strategies

• Ground-Up
• Simplified Version
• Single-Feature

Learning Resources

• Google's PWA developer site
• Google's PWA video course
• MDN API Docs for:
  • Service Worker
  • Cache API
  • IndexedDB
  • Notifications API
  • Navigator
  • Push API
  • Fetch
  • Channel Messaging

Lighthouse

Available Build Tools

• sw-precache
• sw-toolbox
• sw-offline-google-analytics

Objectives

• Describe:
  • The relevance of progressive web apps
  • What progressive web apps are
  • Their underlying technologies

Why?

• Native Apps were never that great

• Hybrids are a half-solution

• The web is the ultimate platform

What?

• Progressive

• Responsive

• Offline-able

• App-like

• Fresh

• Safe

• Discoverable

• Reengagable

• Installable

• Linkable

How?

• Service Worker

• Cache

• IndexedDB

• Notifications

• Push

• Manifests

• Navigator APIs

• Flexbox / Grid

• Web Workers

Progressive Web Apps Rule!