are pwas ready to take over the world? · 2020-02-03 · progressive web apps book b y jason grigsb...
TRANSCRIPT
![Page 1: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/1.jpg)
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
![Page 2: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/2.jpg)
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
![Page 3: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/3.jpg)
PWA demo: SojournerPWA demo: Sojourner
https://fosdem.sojourner.rockshttps://github.com/loomchild/sojourner-web
3
![Page 4: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/4.jpg)
Sojourner UsageSojourner UsageUnique visits Saturday (per 30 min)
Other conferences: FlowCon
Active users (5+ bookmarks)
600600 165165
4
![Page 5: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/5.jpg)
Selected PWA aspectsSelected PWA aspects
Offline-firstOffline-first
InstallationInstallation
UX / UIUX / UI
5
![Page 6: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/6.jpg)
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
![Page 7: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/7.jpg)
Offline-firstOffline-firstSearchSearch
There are client-side full-text searchlibraries, such as Elasticlunr or Fuse.js
7
![Page 8: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/8.jpg)
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
![Page 9: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/9.jpg)
UX / UIUX / UI
Which design system: Material Design, Human Interface Guidelines?
Nokia N900 app
PWA
9
![Page 10: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/10.jpg)
So are PWAs ready to takeSo are PWAs ready to takeover the world?over the world?
10
![Page 11: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/11.jpg)
Thank you!Thank you!
11
![Page 12: Are PWAs ready to take over the world? · 2020-02-03 · Progressive Web Apps book b y Jason Grigsb y: 3. The offline cookbook b y Jake Archibald: 4. Client-side full-t ext search:](https://reader034.vdocuments.site/reader034/viewer/2022042219/5ec5576c13b08355f20a9ed9/html5/thumbnails/12.jpg)
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