Building desktop apps in the age of the web

Slide 1

Building desktop apps in the age of the web Patrick Brosset - @patrickbrosset 2022

Slide 2

👋🏽 Hey, I’m Patrick! I’m a Product Manager at Microsoft. I work on Edge. 🐥 @patrickbrosset 🐘 @patrickbrosset@mas.to 🕸️ patrickbrosset.com

Slide 3

Slide 4

Let’s talk about desktop apps!

Slide 5

Who here remembers winamp?

Slide 6

Slide 7

Slide 8

Demo time! 🤞🏽

Slide 9

Slide 10

What’s a desktop app exactly?

Slide 11

Slide 12

Slide 13

Desktop apps … 💾 Can be installed. 💡 Always works, whether you’re connected or not. 📂 Can handle local files. 🪟 Control the content of their entire windows. 🔗 Usually integrate with other apps. 🔗 Usually integrate with the Operating System.

Slide 14

Slide 15

💾 1. Making it installable

Slide 16

Web app manifest Service Worker HTTPS

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

💡 2. Making it always work

Slide 24

Slide 25

Slide 26

📂 3. Handling local files

Slide 27

Slide 28

Slide 29

🪟 4. Using the entire window

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

🔗 5. Integrating with other apps

Slide 38

protocol://

Slide 39

web+??://

Slide 40

Slide 41

Slide 42

sharing

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

🔗 6. Integrating with the operating system

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

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