How Chrome Apps look and behave
What technologies are used to build them
What really cool stuff you can build
How to build your own app
What we're still figuring out
No browser chrome
Lives outside the browser
Main focus on app tasks
Works offline by default
User controls app lifecycle
Network Sockets API: Fly a Parrot AR.Drone.
File System APIs: Import music from desktop to music player AND sync across clients using Google Drive.
Alarms and Notifications APIs: Set an alarm and send notifications to user's system tray.
Media Gallery API: Access media stored on a user's device (with user's permission, of course).
Serial API: Use Arduino to create an LED toggle.
{ "manifest_version": 2, "name": "My first app", "version": "1", "app": { "background": { "scripts": ["main.js"] } } }
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('index.html', {width: 500, height: 309}); });
<html> <head> <meta charset="utf-8"> <title>Hello DevFestW </head> <body> <h1>Hello, DevFestW!</h1> </body> </html>
function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ''; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; }
// Notice that chrome.storage.sync.get is asynchronous chrome.storage.sync.get('todolist', function(value) { // The $apply is only necessary to execute the function inside Angular scope $scope.$apply(function() { $scope.load(value); }); }); // If there is saved data in storage, use it. Otherwise, bootstrap with sample todos $scope.load = function(value) { if (value && value.todolist) { $scope.todos = value.todolist; } else { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; } } $scope.save = function() { chrome.storage.sync.set({'todolist': $scope.todos}); };
save()
whenever data changes.Let's change our app to save Todo items in storage only if the onRestarted event is fired.
onRestarted
event:chrome.app.runtime.onLaunched.addListener(function() { // normal launch initiated by the user, let's start clean. runApp(false); }); chrome.app.runtime.onRestarted.addListener(function() { // if restarted, try to get the transient saved state runApp(true); }); function runApp(readInitialState) { chrome.app.window.create('index.html', {id: 'mainwindow', width: 500, height: 309}, // the create callback gets a reference to the AppWindow obj function(win) { // when the callback is executed, the DOM is loaded but no script was // loaded yet. So, let's attach to the load event. win.contentWindow.addEventListener('load', function() { if (readInitialState) { win.contentWindow.setInitialState(); } else { win.contentWindow.clearInitialState(); } }); }); }
onRestarted
event fired.Now we will change our app to render the content of URLs in a WebView when a user clicks on a link.
First, we need to follow these codelab instructions to add drag-and-dropped support.
<!-- in TODO item: --> <a ng-show="todo.uri" href="" ng-click="showUri(todo.uri)">(view url) <!-- at the bottom, below the end of body: --> <webview></webview>
webview { width: 100%; height: 200px; }
$scope.showUri = function(uri) { var webview=document.querySelector("webview"); webview.src=uri; };
Create second view:
div
from index.html.<html ng-app ng-csp> <head> <script src="angular.min.js"> <script src="droparea.js"> <link rel="stylesheet" href="todo.css"> <title>File Drop </head> <body ng-controller="DropCtrl" ng-class="dropClass"> <h2>Drop Area <div>{{dropText}} </body> </html>
Update JavaScript:
chrome.app.window.create('droparea.html', {id: 'dropArea', width: 200, height: 200 }, function(dropWin) { dropWin.contentWindow.$parentScope = $scope; });
From then on, when anything went wrong with a computer, we said it had bugs in it.
Source: https://github.com/Meggin/devfestw
Public: http://chrome-apps-devfestw.appspot.com/#1