Are PWAs ready to Are PWAs ready to take over the world? take over - PowerPoint PPT Presentation

FOSDEM'20 Are PWAs ready to Are PWAs ready to take over the world? take over the world? Implementing main progressive Implementing main progressive web app features in practice web app features in practice Jarek Lipski: https://www.linkedin.com/in/loomchild/ Untitled Factory Studio, PARIS: https://studio.untitledfactory.com @untitledfactory 1

What are PWAs? What are PWAs? “ PWA is a set of technologies designed to make faster, more capable web sites. They load fast, are available offline, are secure, can be accessed from your home screen, have push notifications, and more. -- Luke Wroblewski, notes from Jason Grigsby's talk 2

PWA demo: Sojourner PWA demo: Sojourner https://fosdem.sojourner.rocks https://github.com/loomchild/sojourner-web 3

Sojourner Usage Sojourner Usage Unique visits Saturday (per 30 min) Active users (5+ bookmarks) 165 165 600 600 Other conferences: FlowCon 4

Selected PWA aspects Selected PWA aspects Offline-first Offline-first Installation Installation UX / UI UX / UI 5

Offline-first Offline-first Caching via Service Worker Caching via Service Worker Pre-caching static resources (shell, images, fonts) Using Stale-While-Revalidate strategy to handle schedule No-caching of real-time information (room full) 6

Offline-first Offline-first Search Search There are client-side full-text search libraries, such as Elasticlunr or Fuse.js 7

Installation Installation Happens automatically on first visit Add To Home Screen (A2HS) Offers almost universal support: Chrome (Android, Linux, MacOS, Windows) Firefox (Android) Safari (iOS) Update automatically on next visit, can invite the user to do immediately. 8

UX / UI UX / UI Nokia N900 app PWA Which design system: Material Design, Human Interface Guidelines? 9

So are PWAs ready to take So are PWAs ready to take over the world? over the world? 10

Thank you! Thank you! 11

Resources Resources 1. The Case for Progressive Web Apps by Jason Grigsby - An Event Apart: video 2. Progressive Web Apps book by Jason Grigsby: excerpt 3. The offline cookbook by Jake Archibald: article 4. Client-side full-text search: article Elasticlunr Fuse.js , , 5. PWAs on iOS: article 6. All powerful front-end developer talk by Chris Coyier, JAMStack: video 7. Why “Progressive Web Apps vs. native” is the wrong question to ask by Dan Dascalescu: article 8. Progressive Web Apps simply make sense by Jason Grigsby : article 12