Installable web applications

2,899 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,899
On SlideShare
0
From Embeds
0
Number of Embeds
1,120
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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?

×