SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Downloaden Sie, um offline zu lesen
Introducing 
Chrome Apps
Our customer needs a PC version!
Requirements: 
"Port our iOS/Android app to Windows" 
"Just support Windows 7 and that's 
enough" 
But market demand changes very fast! 
We should expect Macs, Chromebooks also in 
future.
Our app to port from Android/iOS 
● Native framework + webview 
○ Popular architecture for smartphone apps 
○ UIWebView (iOS), WebView (Android) 
Native 
Framework 
webview 
OS service, 
Storage, etc. 
Interact with event callbacks, 
JavaScript injections, etc. 
Needed something like this, which works on a 
desktop client. Great if it works on multi-platform
Platforms we considered 
● Full-native 
● Full HTML5 on a browser 
● JavaFX 
● Native View + kind of a common backend 
● Chromium Embedded Framework 
● PhoneGap (Native WebView + common 
backend) 
● Titanium 
● Chrome App 
(formerly known as Chrome Packaged App)
Chrome Apps 
https://developer.chrome.com/apps/about_apps 
● HTML + JavaScript 
(PNaCL, Dart also available) 
● 90% normal HTML5 app 
○ Additional chrome.* APIs are loaded in JavaScript 
namespace 
○ <webview> tag to have another browser in the app, 
which runs in a separate context from its parent app 
● Launches its own window 
○ Not within any browser's tab 
● Launcher is bundled with Chrome 
○ The app runs on Windows/Mac/Linux/Chromebook
Chrome Apps User Experience 
● User Installs an app via Chrome Web Store 
● Update happens automatically 
● User launches the app when it's needed
So, looks great…! 
● Works on multi-platform 
● Don't have to worry about how to 
distribute/update 
● Programmer can use popular web 
technology. No need to learn any new 
framework or language 
● Has a webview
Let's take a look 
https://github.com/GoogleChrome/chrome-app-samples
Not just for calculators!
Interesting Features 
● APIs same as chrome extensions 
○ Local storage, etc. 
● Low-level system services 
○ USB 
○ Serial 
○ Network Communications (raw TCP/UDP sockets) 
○ Bluetooth
https://developer.chrome.com/apps/chrome_apps_on_mobile
Problems I faced (1) 
● No interface to access OS-level secure 
storage (like KeyChain) 
● CSP (Content Security Policy) 
○ No eval, no inline scripting. 
○ AngularJS already has a csp-mode which doesn't 
use evals 
● No easy way to interact with webview 
○ Can inject JavaScript but access limited to the DOM 
tree only. No access to the page's namespace (can't 
use jQuery for example) 
● No WebDriver yet 
○ Can't test it's automation… (still seeking how to do it, 
help is welcomed!)
Problems I faced (2) 
● Documents are not very much organized, 
and it's sometimes not accurate 
○ http://stackoverflow. 
com/questions/25883534/chrome-apps-webview-find- 
method-is-undefined 
● Not stable very much yet 
…But it's improving!
(Coming next, may be) 
● Chrome Apps WebView pitfalls 
● Testing Chrome Apps 
● Wrapping Chrome APIs as an AngularJS 
service

Weitere ähnliche Inhalte

Was ist angesagt?

Web development meetingup
Web development meetingupWeb development meetingup
Web development meetingup
PiTechnologies
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
Rasheed Waraich
 

Was ist angesagt? (20)

Mobileweb
MobilewebMobileweb
Mobileweb
 
How do we test nodejs apps?
How do we test nodejs apps?How do we test nodejs apps?
How do we test nodejs apps?
 
Web development meetingup
Web development meetingupWeb development meetingup
Web development meetingup
 
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
Unscrambling An Omelette - How Companies Can Use WordPress Better - Jeremy Ke...
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer
 
10 Useful Front End Development Tools for Web Apps | 2020
10 Useful Front End Development Tools for Web Apps | 202010 Useful Front End Development Tools for Web Apps | 2020
10 Useful Front End Development Tools for Web Apps | 2020
 
Silverlight 4 @ MSDN Live
Silverlight 4 @ MSDN LiveSilverlight 4 @ MSDN Live
Silverlight 4 @ MSDN Live
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
Modern web applications
Modern web applicationsModern web applications
Modern web applications
 
JavaScript Toolkit
JavaScript ToolkitJavaScript Toolkit
JavaScript Toolkit
 
Web Design And Development With Open Source
Web Design And Development With Open SourceWeb Design And Development With Open Source
Web Design And Development With Open Source
 
Polymer & PWA: Understanding the “why”
Polymer & PWA: Understanding the “why”Polymer & PWA: Understanding the “why”
Polymer & PWA: Understanding the “why”
 
Backend Programming
Backend ProgrammingBackend Programming
Backend Programming
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.org
 
Productive Android developers (Meetup slides)
Productive Android developers (Meetup slides)Productive Android developers (Meetup slides)
Productive Android developers (Meetup slides)
 
Visual Studio Productivity Tools
Visual Studio Productivity ToolsVisual Studio Productivity Tools
Visual Studio Productivity Tools
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end
 
Javascript cheatsheet
Javascript cheatsheetJavascript cheatsheet
Javascript cheatsheet
 
Polymer
PolymerPolymer
Polymer
 

Andere mochten auch

Implementation of gui framework part1
Implementation of gui framework part1Implementation of gui framework part1
Implementation of gui framework part1
masahiroookubo
 
Studying Abroad in Cebu
Studying Abroad in CebuStudying Abroad in Cebu
Studying Abroad in Cebu
etgjsv
 
First impressions of Go
First impressions of GoFirst impressions of Go
First impressions of Go
Yusaku OGAWA
 
Jun.27 fukutomi
Jun.27 fukutomiJun.27 fukutomi
Jun.27 fukutomi
iyo16
 
Garbled text in email
Garbled text in emailGarbled text in email
Garbled text in email
tas-hiro
 
The language barrier.
The language barrier.The language barrier.
The language barrier.
pumpkin_brownies
 

Andere mochten auch (20)

Implementation of GUI Framework part3
Implementation of GUI Framework part3Implementation of GUI Framework part3
Implementation of GUI Framework part3
 
Implementation of gui framework part2
Implementation of gui framework part2Implementation of gui framework part2
Implementation of gui framework part2
 
Implementation of gui framework part1
Implementation of gui framework part1Implementation of gui framework part1
Implementation of gui framework part1
 
Studying Abroad in Cebu
Studying Abroad in CebuStudying Abroad in Cebu
Studying Abroad in Cebu
 
First impressions of Go
First impressions of GoFirst impressions of Go
First impressions of Go
 
DockerCon 14
DockerCon 14DockerCon 14
DockerCon 14
 
Jun.27 fukutomi
Jun.27 fukutomiJun.27 fukutomi
Jun.27 fukutomi
 
Ui testing with splinter - Fri, 30 May 2014
Ui testing with splinter - Fri, 30 May 2014Ui testing with splinter - Fri, 30 May 2014
Ui testing with splinter - Fri, 30 May 2014
 
How to study english
How to study englishHow to study english
How to study english
 
A brief introduction to CentOS 7
A brief introduction to CentOS 7A brief introduction to CentOS 7
A brief introduction to CentOS 7
 
Overview pcidss
Overview pcidssOverview pcidss
Overview pcidss
 
Hello pivotal tracker
Hello pivotal trackerHello pivotal tracker
Hello pivotal tracker
 
Introduction to bioinformatics
Introduction to bioinformaticsIntroduction to bioinformatics
Introduction to bioinformatics
 
Do not rm_log_files
Do not rm_log_filesDo not rm_log_files
Do not rm_log_files
 
Implement server push in flask framework
Implement server push in flask frameworkImplement server push in flask framework
Implement server push in flask framework
 
Introduction to systemd
Introduction to systemdIntroduction to systemd
Introduction to systemd
 
Garbled text in email
Garbled text in emailGarbled text in email
Garbled text in email
 
AWS Cost Visualizer
AWS Cost VisualizerAWS Cost Visualizer
AWS Cost Visualizer
 
20131213 jawsugソフトウェアベンダーがAWSを活用して
急にSaaSをはじめた話
20131213 jawsugソフトウェアベンダーがAWSを活用して
急にSaaSをはじめた話20131213 jawsugソフトウェアベンダーがAWSを活用して
急にSaaSをはじめた話
20131213 jawsugソフトウェアベンダーがAWSを活用して
急にSaaSをはじめた話
 
The language barrier.
The language barrier.The language barrier.
The language barrier.
 

Ähnlich wie Introducing chrome apps (ogura)

Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
Rodrigo Gil
 
Android App Development 01 : Getting Start
Android App Development 01 : Getting StartAndroid App Development 01 : Getting Start
Android App Development 01 : Getting Start
Anuchit Chalothorn
 

Ähnlich wie Introducing chrome apps (ogura) (20)

Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02Hybridmobileapps 130130213844-phpapp02
Hybridmobileapps 130130213844-phpapp02
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
APIs for mobile
APIs for mobileAPIs for mobile
APIs for mobile
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWT
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
Chrome Operating System
Chrome Operating System Chrome Operating System
Chrome Operating System
 
Electron JS | Build cross-platform desktop applications with web technologies
Electron JS | Build cross-platform desktop applications with web technologiesElectron JS | Build cross-platform desktop applications with web technologies
Electron JS | Build cross-platform desktop applications with web technologies
 
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersMaking sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developers
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Tools
 
Introduce native client
Introduce native clientIntroduce native client
Introduce native client
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Cross-platform Desktop application with AngularJS and build with Node-webkit
Cross-platform Desktop application with AngularJS and build with Node-webkitCross-platform Desktop application with AngularJS and build with Node-webkit
Cross-platform Desktop application with AngularJS and build with Node-webkit
 
Serverless computing with Google Cloud
Serverless computing with Google CloudServerless computing with Google Cloud
Serverless computing with Google Cloud
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud RunDesigning flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
Designing flexible apps deployable to App Engine, Cloud Functions, or Cloud Run
 
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 Anton Sakharov: The risks you take when develop cross-platform apps using HT... Anton Sakharov: The risks you take when develop cross-platform apps using HT...
Anton Sakharov: The risks you take when develop cross-platform apps using HT...
 
Android App Development 01 : Getting Start
Android App Development 01 : Getting StartAndroid App Development 01 : Getting Start
Android App Development 01 : Getting Start
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 

Kürzlich hochgeladen

The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
shinachiaurasa2
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
 

Kürzlich hochgeladen (20)

The title is not connected to what is inside
The title is not connected to what is insideThe title is not connected to what is inside
The title is not connected to what is inside
 
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
Chinsurah Escorts ☎️8617697112  Starting From 5K to 15K High Profile Escorts ...Chinsurah Escorts ☎️8617697112  Starting From 5K to 15K High Profile Escorts ...
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 

Introducing chrome apps (ogura)

  • 2.
  • 3. Our customer needs a PC version!
  • 4. Requirements: "Port our iOS/Android app to Windows" "Just support Windows 7 and that's enough" But market demand changes very fast! We should expect Macs, Chromebooks also in future.
  • 5. Our app to port from Android/iOS ● Native framework + webview ○ Popular architecture for smartphone apps ○ UIWebView (iOS), WebView (Android) Native Framework webview OS service, Storage, etc. Interact with event callbacks, JavaScript injections, etc. Needed something like this, which works on a desktop client. Great if it works on multi-platform
  • 6. Platforms we considered ● Full-native ● Full HTML5 on a browser ● JavaFX ● Native View + kind of a common backend ● Chromium Embedded Framework ● PhoneGap (Native WebView + common backend) ● Titanium ● Chrome App (formerly known as Chrome Packaged App)
  • 7. Chrome Apps https://developer.chrome.com/apps/about_apps ● HTML + JavaScript (PNaCL, Dart also available) ● 90% normal HTML5 app ○ Additional chrome.* APIs are loaded in JavaScript namespace ○ <webview> tag to have another browser in the app, which runs in a separate context from its parent app ● Launches its own window ○ Not within any browser's tab ● Launcher is bundled with Chrome ○ The app runs on Windows/Mac/Linux/Chromebook
  • 8. Chrome Apps User Experience ● User Installs an app via Chrome Web Store ● Update happens automatically ● User launches the app when it's needed
  • 9. So, looks great…! ● Works on multi-platform ● Don't have to worry about how to distribute/update ● Programmer can use popular web technology. No need to learn any new framework or language ● Has a webview
  • 10. Let's take a look https://github.com/GoogleChrome/chrome-app-samples
  • 11. Not just for calculators!
  • 12. Interesting Features ● APIs same as chrome extensions ○ Local storage, etc. ● Low-level system services ○ USB ○ Serial ○ Network Communications (raw TCP/UDP sockets) ○ Bluetooth
  • 14. Problems I faced (1) ● No interface to access OS-level secure storage (like KeyChain) ● CSP (Content Security Policy) ○ No eval, no inline scripting. ○ AngularJS already has a csp-mode which doesn't use evals ● No easy way to interact with webview ○ Can inject JavaScript but access limited to the DOM tree only. No access to the page's namespace (can't use jQuery for example) ● No WebDriver yet ○ Can't test it's automation… (still seeking how to do it, help is welcomed!)
  • 15. Problems I faced (2) ● Documents are not very much organized, and it's sometimes not accurate ○ http://stackoverflow. com/questions/25883534/chrome-apps-webview-find- method-is-undefined ● Not stable very much yet …But it's improving!
  • 16. (Coming next, may be) ● Chrome Apps WebView pitfalls ● Testing Chrome Apps ● Wrapping Chrome APIs as an AngularJS service