Are PWAs ready toAre PWAs ready totake over the world?take over the world?

Implementing main progressiveImplementing main progressiveweb app features in practiceweb 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 makefaster, more capable web sites. They load fast, areavailable 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: SojournerPWA demo: Sojourner

https://fosdem.sojourner.rockshttps://github.com/loomchild/sojourner-web

3

Sojourner UsageSojourner UsageUnique visits Saturday (per 30 min)

Other conferences: FlowCon

Active users (5+ bookmarks)

600600 165165

4

Selected PWA aspectsSelected PWA aspects

Offline-firstOffline-first

InstallationInstallation

UX / UIUX / UI

5

Offline-firstOffline-firstCaching via Service WorkerCaching 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-firstOffline-firstSearchSearch

There are client-side full-text searchlibraries, such as Elasticlunr or Fuse.js

7

InstallationInstallation

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 / UIUX / UI

Which design system: Material Design, Human Interface Guidelines?

Nokia N900 app

PWA

9

So are PWAs ready to takeSo are PWAs ready to takeover the world?over the world?

10

Thank you!Thank you!

11

ResourcesResources1. 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 wrongquestion to ask by Dan Dascalescu:

8. Progressive Web Apps simply make sense by JasonGrigsby:

video

excerptarticle

article Elasticlunr Fuse.jsarticle

video

article

article 12