Tweet
Tweet

Slide 1

Slide 1 text

Supercharging your web app By Koen Van den Wijngaert

Slide 2

Slide 2 text

LIE-FI

Slide 3

Slide 3 text

Progressive Web Apps

Slide 4

Slide 4 text

Progressive Web Apps ✓ What are they? ✓ Why should we use them? ✓ What can they do? ✓ Who uses them? ✓ How do I start?

Slide 5

Slide 5 text

What are they?

Slide 6

Slide 6 text

Progressive web apps use modern web APIs along with the traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.

Slide 7

Slide 7 text

Where did they come from?

Slide 8

Slide 8 text

The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. [...] And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. — Steve Jobs, at the WWDC °11/6/2017

Slide 9

Slide 9 text

Cool, right?!

Slide 10

Slide 10 text

Let me just say it: We want native third party applications on the iPhone, and we plan to have an SDK in developers hands in February. — Also Steve Jobs, 4 months later °17/10/2017

Slide 11

Slide 11 text

evolutionoftheweb.com

Slide 12

Slide 12 text

Why should we use them?

Slide 13

Slide 13 text

The State of Mobile ✓ As of May 2019, 49% of visitors are mobile ✓ Solving the distribution problem ✓ Capability vs. Reach

Slide 14

Slide 14 text

Advantages of PWA vs Website ✓ Reliable performance ✓ Worthy of being on homescreen ✓ Increased engagement ✓ Improved conversions developers.google.com/web/progressive-web-apps/

Slide 15

Slide 15 text

Are we ready now? Yes!

Slide 16

Slide 16 text

Web Share API

Slide 17

Slide 17 text

Web Bluetooth API

Slide 18

Slide 18 text

Web Crypto API

Slide 19

Slide 19 text

Web VR

Slide 20

Slide 20 text

Credential Management

Slide 21

Slide 21 text

Payment Request API

Slide 22

Slide 22 text

Gamepad API

Slide 23

Slide 23 text

Web Components

Slide 24

Slide 24 text

And many more. whatwebcando.today

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Who uses them? Progressive Web Apps in The Wild…

Slide 27

Slide 27 text

Pokedex.org

Slide 28

Slide 28 text

appsco.pe/toplist

Slide 29

Slide 29 text

RIP

Slide 30

Slide 30 text

offline-dino-game.firebaseapp.com Just kidding!

Slide 31

Slide 31 text

What can they do?

Slide 32

Slide 32 text

Progressive Web App Features DISCOVERABLE SAFE RESPONSIVE RE-ENGAGEABLE PROGRESSIVE NETWORK INDEPENDENT LINKABLE INSTALLABLE

Slide 33

Slide 33 text

Progressive Web Apps need to be… INSTALLABLE

Slide 34

Slide 34 text

manifest.webmanifest INSTALLABLE

Slide 35

Slide 35 text

DISCOVERABLE Progressive Web Apps need to be…

Slide 36

Slide 36 text

DISCOVERABLE PWA Directory Appsco.pe

Slide 37

Slide 37 text

Progressive Web Apps need to be… LINKABLE

Slide 38

Slide 38 text

Progressive Web Apps need to be… SAFE

Slide 39

Slide 39 text

Progressive Web Apps need to be… PROGRESSIVE

Slide 40

Slide 40 text

Progressive Web Apps need to be… RE-ENGAGEABLE

Slide 41

Slide 41 text

Web Push API RE-ENGAGEABLE Server Push service Client

Slide 42

Slide 42 text

Progressive Web Apps need to be… RESPONSIVE

Slide 43

Slide 43 text

Progressive Web Apps need to be… NETWORK INDEPENDENT

Slide 44

Slide 44 text

We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past. The Offline First Approach - offlinefirst.org

Slide 45

Slide 45 text

Enter Service Workers

Slide 46

Slide 46 text

Service Workers NETWORK INDEPENDENT

Slide 47

Slide 47 text

Service Worker Registration NETWORK INDEPENDENT

Slide 48

Slide 48 text

Service Worker Lifecycle NETWORK INDEPENDENT INSTALLED / WAITING ACTIVATING / ACTIVE INSTALLING

Slide 49

Slide 49 text

Lie-Fi? SaaM* To The Rescue! NETWORK INDEPENDENT * Superman as a Man in The Middle

Slide 50

Slide 50 text

Handling requests NETWORK INDEPENDENT

Slide 51

Slide 51 text

Caching strategies NETWORK INDEPENDENT Network or Cache Cache Only Cache and Update Cache, Update and Refresh Two sides of the scale: speed vs freshness

Slide 52

Slide 52 text

Network or Cache NETWORK INDEPENDENT You want to show the most up to date content but it’s preferable to load fast. jakearchibald.com

Slide 53

Slide 53 text

Cache Only NETWORK INDEPENDENT For a given version of your site, you have static content that never changes such as the shell around the content. jakearchibald.com

Slide 54

Slide 54 text

Cache and Update NETWORK INDEPENDENT Send cached version, but update caches for next time (staleWhileRevalidate) jakearchibald.com

Slide 55

Slide 55 text

Advanced usages NETWORK INDEPENDENT Streaming data Web Push API Architectural Patterns Queuing Requests Background Sync

Slide 56

Slide 56 text

How do I start?

Slide 57

Slide 57 text

What do I need? manifest.webmanifest (+link) ✓ Name ✓ Icon ✓ Start URL ✓ Display Mode != browser serviceworker.js ✓ Registered in client JS ✓ Installed & Active ✓ HTTPS ✓ Offline fallback

Slide 58

Slide 58 text

Useful Tools Lighthouse Polymer UpUp

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Workbox ✓ Precaching ✓ Routing ✓ Caching strategies ✓ Cache expiry ✓ Background Sync ✓ Offline Google Analytics ✓ Response-based caching ✓ Broadcast updates ✓ Streams ✓ Client module

Slide 61

Slide 61 text

In my ecosystem?

Slide 62

Slide 62 text

Resources ✓ Offline Cookbook ✓ Serviceworke.rs ✓ developers.google.com ✓ developer.mozilla.org ✓ jakearchibald.github.io/isserviceworkerready

Slide 63

Slide 63 text

Thanks for listening! @vdwijngaert Koen Van den Wijngaert SiteOptimo.com