Installable web applications
3 likes3,646 views
The document discusses the benefits of installing web applications as smart clients, which provide access to low-level functions such as fullscreen mode and file system access. It outlines solutions like MacGap for macOS and AppJS for Windows/Linux to create these smart clients, enhancing user engagement and ensuring a consistent experience across platforms. Real-world usage examples include everyday communication tools, text editors, and games.
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
- 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
- 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?