View
1.907
Download
0
Category
Preview:
DESCRIPTION
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/
Citation preview
Bartosz Olchówka31 March 2014
Smart Client:Installable web applications
Why install a web app?
● Access to low-level functions○ auto-away○ fullscreen mode○ file system○ …
Why install a web app?
● Access to low-level functions○ auto-away○ fullscreen mode○ file system○ …
● Login on system startup
Why install a web app?
● 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?
The good part is…
… you can still build a native app with HTML, CSS & JavaScript
Solution: Smart Client
● native container including your web app
Solution: Smart Client
● native container including your web app● WebKit rendering engine
Solution: Smart Client
● native container including your web app● WebKit rendering engine● web app ⇔ “smart client” communication
with a simple JavaScript API
Solution: Smart Client
Smart Client libraries
● Mac OS X: macgap● Windows/Linux: AppJS (no longer maintained)
Smart Client libraries
● Mac OS X: macgap● Windows/Linux: AppJS (no longer maintained)● Mobile: PhoneGap
Smart Client libraries
macgap - examples #1
// Display (10) badge on the Dock
macgap.dock.badge = "10";
macgap - examples #1
// 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
// Toggle fullscreen mode
macgap.window.toggleFullscreen();
macgap - examples #2
// Toggle fullscreen mode
macgap.window.toggleFullscreen();
// Play a sound
macgap.sound.play("./sounds/tadaaa.mp3")
macgap - examples #2
Real world example: LiveChat
Real world example: LiveChat
Advantages #1
● Smart Client users are more engaged
Advantages #2
● no need to maintain multiple apps
Windows Mac Web app
Advantages #3
● consistent user experience
Usage ideas
#1: Products used everyday
● communication (Gmail, Slack)
#1: Products used everyday
● communication (Gmail, Slack)● text editors (Atom.io)
#1: Products used everyday
#1: Products used everyday
● communication (Gmail, Slack)● text editors (Atom.io)● music (Spotify)
#2: Games
#2: Games
App = new Game()App.build(‘train’)App.pause()
#3: Mobile apps
● example:BBC Winter Olympics app
● shared CSS acrossweb & mobile apps
#3: Mobile apps
Questions?
Recommended