Progressive web apps:a love story

View Github Repository Open presentation in a new window

nolanlawson

See all presentation from nolanlawson

Progressive web apps:a love story

0 0

webrebels-2016

On Github nolanlawson / webrebels-2016

Progressive web apps:a love story

@nolanlawson

Hi everybody.

@nolanlawson

I'm Nolan Lawson. Sometimes I make "here's how big of a sub sandwich I had for lunch" hands, or as Mariko taught me they're called in Japanese, "pottery hands" (ろくろ回す手).
I work at Squarespace, and I help maintain PouchDB.

A story about mobile

2010

Pokédroid

  • ≥ 440,000 downloads
  • ≥ 9,700 reviews
  • 4.8 stars
  • Top 50 in category "Entertainment"

Why was Pokédroid so popular?

Many alternatives on the web

  • Bulbapedia
  • Marriland
  • Serebii
  • GameFAQs

What made Pokédroid unique:

OFFLINE!

It's so nice to be able to be on the road playing Pokémon and having a quick reference without all the large guidebooks.
– Google Play Store review
Super awesome-o. I use this all the time for Pokémon instead of having to go online to Serebii.
– Google Play Store review

3.5MB SQLite database

2011: Pokédroid DMCA'd

Why DMCA?

  • Publishing to app store asserts IP ownership
  • Nintendo wary of apps
  • Web sites okay

In 2011, you could not build Pokédroid using web technology alone.

RIP Pokédroid 😢

The web? 🤔

The web! 😍

Bruce Lawson – Progressive web apps and the future of the web

Source: https://www.youtube.com/watch?v=YxQUxCsNomM
HTML [is] in direct competition with other technologies intended for applications deployed over the web, in particular Flash and Silverlight.
– Ian Hickson, 2009 (via Bruce Lawson)

Steve Jobs, "Thoughts on Flash" (2010)

Alex Russell – Progressive web apps

Source: https://www.youtube.com/watch?v=x7cfLDFVyHo
[The web] won on desktop, just in time for mobile to eat the world.
– Alex Russell, 2016

2016: Progressive Web Apps (PWAs)

Coined by Alex Russell

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

Profile of a PWA

  • Works offline
  • Launches from home screen
  • "Feels" like a native app
  • Push notifications (optional)
  • Background sync (optional)

What changed?

ApplicationCache → ServiceWorker LocalStorage/WebSQL → IndexedDB Touch icons → Web App Manifest Save to homescreen → Install banner

Putting it all together

How?

Server-side rendering

FLIP animations

Tips from a native mobile developer

Prefer offline Use background threads

Pokédex.org IDB: 4M Chrome, 5.6M FF

Galaxy Nexus (2011), Android 4.3

In 2011, you couldn't build a high-performance, immersive offline app with web technologies.

In 2016, you can.

https://pokedex.org

Thanks! 👋

@nolanlawson       bit.ly/1TPcgC8

  • http://stackoverflow.com/tags/progressive-web-apps/info
  • http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
  • http://nolanlawson.com/2016/02/08/how-to-think-about-databases/
  • http://nolanlawson.com/2016/02/29/high-performance-web-worker-messages/

Pokémon is © Nintendo, The Pokémon Company, and GameFreak