Building integrated desktop experiences with PWA

Slide 1

Slide 2

Slide 3

Slide 4

👋🏽 Hey, I’m Patrick! I’m a Product Manager at Microsoft. I’ve worked with the web and on browsers for 20 years. 🐥 @patrickbrosset 🕸️ patrickbrosset.com

Slide 5

Let’s talk about desktop apps!

Slide 6

Slide 7

Slide 8

Slide 9

Demo time! 🤞🏽

Slide 10

Slide 11

What makes a nice desktop app? 💾 It 💡 It 📂 It 🪟 It 🔗 It 🔗 It can be installed. just always works. can handle local files. controls the content of its entire window. integrates with other apps. integrates with the Operating System.

Slide 12

💾 1. Making it installable

Slide 13

Slide 14

Slide 15

💡 2. Making it always work

Slide 16

Slide 17

📂 3. Handling local files

Slide 18

Slide 19

🪟 4. Using the entire window

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

🔗 5. Integrating with other apps

Slide 28

protocol://

Slide 29

web+??://

Slide 30

Slide 31

sharing

Slide 32

Slide 33

Slide 34

Slide 35

🔗 6. Integrating with the operating system

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Let’s sum up! 💾 Installation ➡️ manifest/service worker/HTTPS ➡️ publish to stores with PWABuilder 💡 Always works ➡️ Caching resources on install of SW 📂 Local files ➡️ Register as a PWA file_handler 🪟 Draw in the entire window ➡️ Use the Window Controls Overlay 🔗 Integrate with other apps ➡️ Register as a protocol_handler ➡️ Register as a share_target ➡️ Share out with navigator.share() 🔗 Integrate with the OS ➡️ Display shortcuts ➡️ Insert widgets

Slide 41

Slide 42

Myth #1 PWA is old news…🧓🏽

Slide 43

“Service workers will soon control 20% of web traffic, and sites continue adding more capabilities each year” Web Almanac 2021 edition https://almanac.httparchive.org/en/2021/pwa

Slide 44

“~ 100% growth in PWA density between March and Sept 2021” PWAs… What’s going on? https://mobsted.com/world_state_of_pwa_2021

Slide 45

Myth #2 It’s a google thing only

Slide 46

Myth #3 It’s only on mobile📱

Slide 47

Myth #4 But it doesn’t work on iOS🍎

Slide 48

Myth #5 But the web can’t do native

Slide 49

“today we are extending Photoshop to the web as a beta” Photoshop updates https://blog.adobe.com/en/publish/2021/10/26/photoshop-ships-major…

Slide 50

Myth #6 APIs are not cross-browser