travellingprog/GooglePrepackageApp.md

## GooglePrepackageApp.md

      
    Raw
  

              GooglePrepackageApp.md
            
          
Swig templates must be pre-compiled via command-line. The resulting *.js file must be given to the prepackaged app.


Inline scripting is not allowed.


The complete security restrictions are here: http://developer.chrome.com/apps/contentSecurityPolicy.html


You can get images with xhr.responseType='blob', and then assign them a BlobURL which stores the entire blob in a url that looks like this: blob:chrome-extension%3A//dabmgdknkbnloipddgldbcmngnacejkh/530e737b-63cf-4309-b526-74013259c4b2


You can store images in a sandboxed filesystem with the HTML5 FileSystem API, without needing to get any user permission. Have yet to try using this file as the image source.


There's a good tutorial on the HTML5 FileSystem API here.


Many online suggest using the wrapper library Filer instead of the direct FileSystem API methods.


Don't know if I'll be able to use the socket.io connection without any problem. But it does seem that other have been able to do so.


Able to launch/relaunch by command line with a command similar to this: google-chrome --load-and-launch-app=/home/erick/work/chromeApp/test


You can find a bunch of commandline switches here


Packaged Apps seem to be a relatively new thing. The documentation isn't all that great, lots of it seems to be just copy-pasted from the Chrome Extension docs, and the StackOverflow community is quite small.


Some of the Chrome APIs available to Packaged Apps are quite powerful, although we wouldn't use most of them.


There is a way to do auto-updates as detailed here.


## index.html
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <img style="max-height: 855px; max-width: 1280px;"></img>

    <script src="load.js"></script>
  </body>
</html>

## load.js
(function() {

  var blobContent;

  var loadImage = function(uri, callback) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      callback(xhr.response, uri);
    };
    xhr.open('GET', uri, true);
    xhr.send();
  };


  var errorHandler = function (e) {
    var msg = '';

    switch (e.code) {
      case FileError.QUOTA_EXCEEDED_ERR:
        msg = 'QUOTA_EXCEEDED_ERR';
        break;
      case FileError.NOT_FOUND_ERR:
        msg = 'NOT_FOUND_ERR';
        break;
      case FileError.SECURITY_ERR:
        msg = 'SECURITY_ERR';
        break;
      case FileError.INVALID_MODIFICATION_ERR:
        msg = 'INVALID_MODIFICATION_ERR';
        break;
      case FileError.INVALID_STATE_ERR:
        msg = 'INVALID_STATE_ERR';
        break;
      default:
        msg = 'Unknown Error';
        break;
    }

    console.log('Error: ' + msg);
  };


  var onInitFs = function onInitFs(fs) {

    fs.root.getFile('testFile.jpg', {create: true}, function(fileEntry) {

      fileEntry.createWriter(function(fileWriter) {

        fileWriter.onwriteend = function(e) {
          console.log('Write completed.');
        };

        fileWriter.onerror = function(e) {
          console.log('Write failed: ' + e.toString());
        };

        // var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});

        fileWriter.write(blobContent);

      }, errorHandler);

    }, errorHandler);

  };


  window.addEventListener('DOMContentLoaded', function() {
    var img = document.querySelector('img');
    var testURL = "http://fc07.deviantart.net/fs71/f/2013/264/6/a/6ab436b4f571638a8d06667477a635da-d6na2cu.jpg";
    window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

    loadImage(testURL, function(response, requested_uri) {
      blobContent = response;
      img.src = window.webkitURL.createObjectURL(blobContent);

      navigator.webkitPersistentStorage.requestQuota(20*1024*1024, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
      }, function(e) {
        console.log('Error', e);
      });
    });

  });

})();

## main.js
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'mainWindow',
    bounds: {
      width: 1280,
      height: 1000
    }
  });
});

## manifest.json
{
  "manifest_version": 2,
  "name": "My first app",
  "version": "1",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "permissions": ["<all_urls>", "unlimitedStorage"]
}
	<!doctype html>
	<html>
	<head>
	</head>
	<body>
	<img style="max-height: 855px; max-width: 1280px;"></img>

	<script src="load.js"></script>
	</body>
	</html>
	(function() {

	var blobContent;

	var loadImage = function(uri, callback) {
	var xhr = new XMLHttpRequest();
	xhr.responseType = 'blob';
	xhr.onload = function() {
	callback(xhr.response, uri);
	};
	xhr.open('GET', uri, true);
	xhr.send();
	};


	var errorHandler = function (e) {
	var msg = '';

	switch (e.code) {
	case FileError.QUOTA_EXCEEDED_ERR:
	msg = 'QUOTA_EXCEEDED_ERR';
	break;
	case FileError.NOT_FOUND_ERR:
	msg = 'NOT_FOUND_ERR';
	break;
	case FileError.SECURITY_ERR:
	msg = 'SECURITY_ERR';
	break;
	case FileError.INVALID_MODIFICATION_ERR:
	msg = 'INVALID_MODIFICATION_ERR';
	break;
	case FileError.INVALID_STATE_ERR:
	msg = 'INVALID_STATE_ERR';
	break;
	default:
	msg = 'Unknown Error';
	break;
	}

	console.log('Error: ' + msg);
	};


	var onInitFs = function onInitFs(fs) {

	fs.root.getFile('testFile.jpg', {create: true}, function(fileEntry) {

	fileEntry.createWriter(function(fileWriter) {

	fileWriter.onwriteend = function(e) {
	console.log('Write completed.');
	};

	fileWriter.onerror = function(e) {
	console.log('Write failed: ' + e.toString());
	};

	// var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});

	fileWriter.write(blobContent);

	}, errorHandler);

	}, errorHandler);

	};


	window.addEventListener('DOMContentLoaded', function() {
	var img = document.querySelector('img');
	var testURL = "http://fc07.deviantart.net/fs71/f/2013/264/6/a/6ab436b4f571638a8d06667477a635da-d6na2cu.jpg";
	window.requestFileSystem = window.requestFileSystem \|\| window.webkitRequestFileSystem;

	loadImage(testURL, function(response, requested_uri) {
	blobContent = response;
	img.src = window.webkitURL.createObjectURL(blobContent);

	navigator.webkitPersistentStorage.requestQuota(2010241024, function(grantedBytes) {
	window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
	}, function(e) {
	console.log('Error', e);
	});
	});

	});

	})();
	chrome.app.runtime.onLaunched.addListener(function() {
	chrome.app.window.create('index.html', {
	id: 'mainWindow',
	bounds: {
	width: 1280,
	height: 1000
	}
	});
	});
	{
	"manifest_version": 2,
	"name": "My first app",
	"version": "1",
	"app": {
	"background": {
	"scripts": ["main.js"]
	}
	},
	"permissions": ["<all_urls>", "unlimitedStorage"]
	}