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

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

FOSDEM'20

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) Other conferences: FlowCon Active users (5+ bookmarks)

600 600 165 165

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

Using Stale-While-Revalidate strategy to handle schedule Pre-caching static resources (shell, images, fonts) 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

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

8

UX / UI UX / UI

Which design system: Material Design, Human Interface Guidelines?

Nokia N900 app PWA

9

So are PWAs ready to take So are PWAs ready to take

• ver the world?
• ver the world?

10

Thank you! Thank you!

11

Resources Resources

• 1. The Case for Progressive Web Apps by Jason Grigsby - An

Event Apart:

• 2. Progressive Web Apps book by Jason Grigsby:
• 3. The offline cookbook by Jake Archibald:
• 4. Client-side full-text search:

,

,

• 5. PWAs on iOS:
• 6. All powerful front-end developer talk by Chris Coyier,

JAMStack:

• 7. Why “Progressive Web Apps vs. native” is the wrong

question to ask by Dan Dascalescu:

• 8. Progressive Web Apps simply make sense by Jason

Grigsby: video

excerpt article

article Elasticlunr Fuse.js article

video article article

12