Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Installable web applications

3,233 views

Published on

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/

Published in: Software
  • Be the first to comment

Installable web applications

  1. 1. Bartosz Olchówka 31 March 2014 Smart Client: Installable web applications
  2. 2. Why install a web app?
  3. 3. ● Access to low-level functions ○ auto-away ○ fullscreen mode ○ file system ○ … Why install a web app?
  4. 4. ● Access to low-level functions ○ auto-away ○ fullscreen mode ○ file system ○ … ● Login on system startup Why install a web app?
  5. 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. 6. The good part is… … you can still build a native app with HTML, CSS & JavaScript
  7. 7. Solution: Smart Client
  8. 8. ● native container including your web app Solution: Smart Client
  9. 9. ● native container including your web app ● WebKit rendering engine Solution: Smart Client
  10. 10. ● native container including your web app ● WebKit rendering engine ● web app ⇔ “smart client” communication with a simple JavaScript API Solution: Smart Client
  11. 11. Smart Client libraries
  12. 12. ● Mac OS X: macgap Smart Client libraries
  13. 13. ● Mac OS X: macgap ● Windows/Linux: AppJS (no longer maintained) Smart Client libraries
  14. 14. ● Mac OS X: macgap ● Windows/Linux: AppJS (no longer maintained) ● Mobile: PhoneGap Smart Client libraries
  15. 15. macgap - examples #1
  16. 16. // Display (10) badge on the Dock macgap.dock.badge = "10"; macgap - examples #1
  17. 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. 18. // Toggle fullscreen mode macgap.window.toggleFullscreen(); macgap - examples #2
  19. 19. // Toggle fullscreen mode macgap.window.toggleFullscreen(); // Play a sound macgap.sound.play("./sounds/tadaaa.mp3") macgap - examples #2
  20. 20. Real world example: LiveChat
  21. 21. Real world example: LiveChat
  22. 22. Advantages #1 ● Smart Client users are more engaged
  23. 23. Advantages #2 ● no need to maintain multiple apps Windows Mac Web app
  24. 24. Advantages #3 ● consistent user experience
  25. 25. Usage ideas
  26. 26. #1: Products used everyday
  27. 27. ● communication (Gmail, Slack) #1: Products used everyday
  28. 28. ● communication (Gmail, Slack) ● text editors (Atom.io) #1: Products used everyday
  29. 29. #1: Products used everyday ● communication (Gmail, Slack) ● text editors (Atom.io) ● music (Spotify)
  30. 30. #2: Games
  31. 31. #2: Games App = new Game() App.build(‘train’) App.pause()
  32. 32. #3: Mobile apps
  33. 33. ● example: BBC Winter Olympics app ● shared CSS across web & mobile apps #3: Mobile apps
  34. 34. Questions?

×