Developers
Native Apps in HTML5
Joe Marini - Chrome Developer Advocate
The Chrome Packaged Apps Platform
About Me
Joe Marini
Developer Advocate - Google Chrome
google.com/+JoeMarini
@joemarini
github.com/joemarini
Agenda
● Demos
● Why build a packaged app?
● Structure of a packaged app
● Things you will encounter when going from Web A...
Demos!
Why build a packaged app?
Web Apps are Great!
... Until they're not!
Playing Games on the Web is Great!
... Until it’s not!
Why build a packaged app?
Packaged Apps run offline by default
Access to platform capabilities and hardware
Rich, immersiv...
From Web App to “Native” Chrome App
Infrastructure
Packaged App Structure
HTML
.CSS
.JS
manifest.json
main.js
background.html
Other
Assets
< />
App Content
Offline by default
All app resources are stored locally, and your app can
be launched at any time
Implications:
● Disconne...
Offline by default
Plan for a great offline experience:
- Factor your app to store resources locally (separate JS, CSS, HT...
Example: chrome.storage API
JS
function saveChanges() {
// Get a value saved in a form.
var theValue = textarea.value;
// ...
Cloud by default
Users increasingly expect their data to be everywhere, and your
apps need to address that expectation
Imp...
Cloud by default
Leverage Chrome's cloud features:
- Use the chrome.storage.sync API to sync smaller data items
- Use the ...
Packaged App Cloud APIs
JS
chrome.syncFileSystem.setConflictResolutionPolicy('last_write_win'); // or 'manual'
chrome.sync...
Immersive user experience
Packaged Apps live outside the browser, and can thus have richer
user interfaces and experiences...
Immersive user experience
Build a great user experience:
- Use the windowing API to manage your app's windows
- Use the sc...
Access to platform and hardware
Chrome Packaged Apps are able to get access to the native
hardware platform - files, USB, ...
Application security and CSP
Chrome Apps implement Content Security Policy, which has a
direct impact on common Web app pa...
Example: Use separate JS files and event handlers
JS
<script src="myjscode.js"></script>
window.addEventListener("load", o...
Application Security, External Content, and CSP
Embedding Web content
● Use the <webview> control to embed content
Accessi...
Summary
Offline
● Factor your app's features
● Identify offline capabilities
● Store resources locally
Cloud
● Use chrome'...
<Thank You!>
google.com/+joemarini
@joemarini
github.com/joemarini
Developers
Upcoming SlideShare
Loading in …5
×

Native apps in html5 with chrome packaged apps

3,673 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,673
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Native apps in html5 with chrome packaged apps

  1. 1. Developers
  2. 2. Native Apps in HTML5 Joe Marini - Chrome Developer Advocate The Chrome Packaged Apps Platform
  3. 3. About Me Joe Marini Developer Advocate - Google Chrome google.com/+JoeMarini @joemarini github.com/joemarini
  4. 4. Agenda ● Demos ● Why build a packaged app? ● Structure of a packaged app ● Things you will encounter when going from Web App to Packaged App ○ Working offline ○ Using the cloud ○ Rich platform capabilities ○ Immersive UX ○ Application security
  5. 5. Demos!
  6. 6. Why build a packaged app?
  7. 7. Web Apps are Great!
  8. 8. ... Until they're not!
  9. 9. Playing Games on the Web is Great!
  10. 10. ... Until it’s not!
  11. 11. Why build a packaged app? Packaged Apps run offline by default Access to platform capabilities and hardware Rich, immersive user experience Distribution & updates via the Chrome Web Store
  12. 12. From Web App to “Native” Chrome App
  13. 13. Infrastructure Packaged App Structure HTML .CSS .JS manifest.json main.js background.html Other Assets < /> App Content
  14. 14. Offline by default All app resources are stored locally, and your app can be launched at any time Implications: ● Disconnected experience, including first-run - resources (except video/audio) must be local ● Determining disconnected features ● Handling stale data and synchronization ● Storing data locally - window.localStorage not supported ○ Synchronous APIs in general not supported - they block the UX thread
  15. 15. Offline by default Plan for a great offline experience: - Factor your app to store resources locally (separate JS, CSS, HTML) - Figure out what your app's offline features will be - Use navigator.onLine and related events to update the UI - Store data with chrome.storage.local or IndexedDB - Use the HTML5 Filesystem API - Set the offline_enabled flag in your manifest file
  16. 16. Example: chrome.storage API JS function saveChanges() { // Get a value saved in a form. var theValue = textarea.value; // Save it using the Chrome extension storage API. chrome.storage.local.set({'value': theValue}, function() { // Notify that we saved. message('Settings saved'); }); }
  17. 17. Cloud by default Users increasingly expect their data to be everywhere, and your apps need to address that expectation Implications: ● Users will expect that their settings and data will sync ● Your app is responsible for handling conflicts ● Your app may be used across multiple OSes / form factors
  18. 18. Cloud by default Leverage Chrome's cloud features: - Use the chrome.storage.sync API to sync smaller data items - Use the SyncFilesystem API to sync larger data files - Uses the Google Drive API as the backend, but is extensible - Use the Push Messaging API to send messages from your server - Use the Identity API to authenticate users - API specifically for Google services, another for 3rd party sites
  19. 19. Packaged App Cloud APIs JS chrome.syncFileSystem.setConflictResolutionPolicy('last_write_win'); // or 'manual' chrome.syncFileSystem.requestFileSystem(function (fs) { if (chrome.runtime.lastError) { // handle any error } onFileSystemOpened(fs, true); }); JS chrome.experimental.identity.getAuthToken({ 'interactive': true }, onGetAuthToken); chrome.experimental.identity.launchWebAuthFlow( {‘url’: ‘<url-to-do-auth>’, ‘interactive’: true}, function(redirect_url) { /* Extract token from redirect_url */ });
  20. 20. Immersive user experience Packaged Apps live outside the browser, and can thus have richer user interfaces and experiences Implications: ● Your app is responsible for things that it wasn't before ● Users have different expectations of apps vs. web sites
  21. 21. Immersive user experience Build a great user experience: - Use the windowing API to manage your app's windows - Use the screen size to determine initial window size/position - Remember window location/size for the next time the app is run - Your app can control whether the default OS title bar is shown - Use "-webkit-app-region: drag" to define custom drag regions - Use chrome.contextMenus API to implement context menus
  22. 22. Access to platform and hardware Chrome Packaged Apps are able to get access to the native hardware platform - files, USB, Bluetooth, Sockets Implications: ● Privacy and security are even more important ● Be clear to the user about when you are using platform resources ● Remember to release resources that you are done with
  23. 23. Application security and CSP Chrome Apps implement Content Security Policy, which has a direct impact on common Web app patterns - Don't be eval() - You can't use new Function() - All JavaScript code must be in separate .js files - No inline event handlers or embedding content in <iframe> tags - You need to declare where your content comes from, if not local
  24. 24. Example: Use separate JS files and event handlers JS <script src="myjscode.js"></script> window.addEventListener("load", onWindowLoad) function onWindowLoad(evt) { // perform some initialization } HTML <script> function onWindowLoad() { ... } </script> <body onload="onWindowLoad"> </body>
  25. 25. Application Security, External Content, and CSP Embedding Web content ● Use the <webview> control to embed content Accessing Remote Resources ● Fetch remote resources with XHR, then use blob:, data:, filesystem: URLs Using Templating Libraries ● Use libraries that precompile templates ● Use a sandboxed page to host code that uses eval or new function()
  26. 26. Summary Offline ● Factor your app's features ● Identify offline capabilities ● Store resources locally Cloud ● Use chrome's sync features ● SyncFilesystem, chrome.storage.sync Immersive UX ● Your app controls its own windows and UX ● Remember your window position, app state, etc Platform Access ● A Real API for USB, Bluetooth, Sockets Security ● Understand the Content Security Policy ● Separate JS from HTML, no inline event handlers ● Use Sandboxed pages for unsafe operations
  27. 27. <Thank You!> google.com/+joemarini @joemarini github.com/joemarini
  28. 28. Developers

×