The majority of today’s applications are browser-based apps built with HTML, CSS and JavaScript. Why would anyone want to run a desktop app these days? It turns out, there are a number of reasons do to that. Read more on LiveChat Developers blog: http://developers.livechatinc.com/blog/installable-web-applications/

1. Bartosz Olchówka
31 March 2014
Smart Client:
Installable web applications

2. Why install a web app?

3. ● Access to low-level functions
○ auto-away
○ fullscreen mode
○ file system
○ …
Why install a web app?

4. ● Access to low-level functions
○ auto-away
○ fullscreen mode
○ file system
○ …
● Login on system startup
Why install a web app?

5. ● Access to low-level functions
○ auto-away
○ fullscreen mode
○ file system
○ …
● Login on system startup
● Easy access with ALT/⌘ + TAB
Why install a web app?

6. The good part is…
… you can still build a native app with HTML,
CSS & JavaScript

7. Solution: Smart Client

8. ● native container including your web app
Solution: Smart Client

9. ● native container including your web app
● WebKit rendering engine
Solution: Smart Client

10. ● native container including your web app
● WebKit rendering engine
● web app ⇔ “smart client” communication
with a simple JavaScript API
Solution: Smart Client

11. Smart Client libraries

12. ● Mac OS X: macgap
Smart Client libraries

13. ● Mac OS X: macgap
● Windows/Linux: AppJS (no longer maintained)
Smart Client libraries

14. ● Mac OS X: macgap
● Windows/Linux: AppJS (no longer maintained)
● Mobile: PhoneGap
Smart Client libraries

15. macgap - examples #1

16. // Display (10) badge on the Dock
macgap.dock.badge = "10";
macgap - examples #1

17. // Display (10) badge on the Dock
macgap.dock.badge = "10";
// Detect “wake” event
document.addEventListener('wake', function() {
console.log('Hello, world!')
}, true);
macgap - examples #1

18. // Toggle fullscreen mode
macgap.window.toggleFullscreen();
macgap - examples #2

19. // Toggle fullscreen mode
macgap.window.toggleFullscreen();
// Play a sound
macgap.sound.play("./sounds/tadaaa.mp3")
macgap - examples #2

20. Real world example: LiveChat

21. Real world example: LiveChat

22. Advantages #1
● Smart Client users are more engaged

23. Advantages #2
● no need to maintain multiple apps
Windows Mac Web app

24. Advantages #3
● consistent user experience

25. Usage ideas

26. #1: Products used everyday

27. ● communication (Gmail, Slack)
#1: Products used everyday

28. ● communication (Gmail, Slack)
● text editors (Atom.io)
#1: Products used everyday

29. #1: Products used everyday
● communication (Gmail, Slack)
● text editors (Atom.io)
● music (Spotify)

30. #2: Games

31. #2: Games
App = new Game()
App.build(‘train’)
App.pause()

32. #3: Mobile apps

33. ● example:
BBC Winter Olympics app
● shared CSS across
web & mobile apps
#3: Mobile apps

34. Questions?