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