Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gears User Guide


Published on

Google Gears User Guide

Published in: Technology, Business
  • If you are in chennai, you can drop in for an hands on training session ;)
    Are you sure you want to  Yes  No
    Your message goes here
  • can teach me ?
    is i wanna know where i add some code of gears
    and what upload to my server ?
    thank you again :)
    Are you sure you want to  Yes  No
    Your message goes here
  • Yes i like this but can explain to easy more than this
    Be causes i fix it but not work
    thank you so much
    Are you sure you want to  Yes  No
    Your message goes here

Gears User Guide

  1. 1. Google Gears <ul><li>Official Gears site: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Google Gears Discussion: </li></ul><ul><ul><li> </li></ul></ul> [email_address]
  2. 2. Gears - Introduction <ul><li>Google Gears is an open source browser extension that lets developers create web applications that can run offline. </li></ul><ul><li> </li></ul><ul><li>Google Gears consists of three modules that address the core challenges in making web applications work offline. </li></ul> [email_address]
  3. 3. Gears - Features <ul><li>LocalServer </li></ul><ul><ul><li>Cache and serve application resources (HTML, JavaScript, images, etc.) locally </li></ul></ul><ul><li>Database </li></ul><ul><ul><li>Store data locally in a fully-searchable relational database </li></ul></ul><ul><li>WorkerPool </li></ul><ul><ul><li>Make your web apps responsive by performing resource-intensive operations asynchronously </li></ul></ul> [email_address]
  4. 4. Resources and Tools <ul><li> </li></ul><ul><ul><li>The gears_init.js source file </li></ul></ul><ul><ul><ul><li>Always include the gears_init.js file in your application to get access to the Google Gears factory and APIs. </li></ul></ul></ul><ul><ul><li>Database Query Tool (dbquery.html) </li></ul></ul><ul><ul><ul><li>The database query tool allows you to run SQL queries interactively against a Gears database. Run from the same domain as the database to inspect. </li></ul></ul></ul><ul><ul><li>LocalServer Inspector (webcachetool.html) </li></ul></ul><ul><ul><ul><li>Inspect the contents of the LocalServer, capture URLs, and test ManagedResourceStores. </li></ul></ul></ul> [email_address]
  5. 5. Detecting and Installing <ul><li>Detect whether or not Google Gears is installed on a user's machine before calling the APIs, and also to display an installation prompt to the user if Gears not found. </li></ul><ul><li>Always initialize Google Gears using gears_init.js . If Gears is installed, then google.gears will be defined. </li></ul> [email_address]
  6. 6. Detecting and Installing <ul><li>If Gears isn't installed, you can direct the user to a customized installation page. </li></ul><ul><ul><ul><li><script src=&quot;gears_init.js&quot;></script> </li></ul></ul></ul><ul><ul><ul><li><script> </li></ul></ul></ul><ul><ul><ul><li>if (! || !google.gears) { </li></ul></ul></ul><ul><ul><ul><li>location.href = &quot;<your welcome message>&quot; + </li></ul></ul></ul><ul><ul><ul><li>&quot;&return=<your website url>&quot;; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul><ul><ul><li>The user will be directed back to ' return ' URL after installation. </li></ul></ul> [email_address]
  7. 7. Factory <ul><li>The Factory class is used to instantiate all other Google Gears objects. Using the create method, an application specifies the interface version it uses. </li></ul><ul><li>Use gears_init.js in your application for the easiest way to create a Factory object. The script defines google.gears.factory to refer to a Factory object. </li></ul> [email_address]
  8. 8. Factory <ul><li>API: Factory class </li></ul><ul><ul><li>Object create(className, version) </li></ul></ul><ul><ul><li>string getBuildInfo() </li></ul></ul><ul><ul><li>Supported class names are: </li></ul></ul><ul><ul><ul><li>beta.database Database </li></ul></ul></ul><ul><ul><ul><li>beta.localserver LocalServer </li></ul></ul></ul><ul><ul><ul><li>beta.workerpool WorkerPool </li></ul></ul></ul> [email_address] <ul><li>CODE: gears_init.js defines google.gears.factory </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;gears_init.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var db = google.gears.factory.create </li></ul><ul><ul><li>('beta.database', '1.0'); </li></ul></ul><ul><li></script> </li></ul><ul><li>If version is omitted, then create() returns the latest version of the object </li></ul>
  9. 9. Gears – Getting Started <ul><li>Going Offline </li></ul><ul><ul><li>The first thing you need to run a web application offline is the ability to start it without an Internet connection. This is the purpose of the LocalServer module. </li></ul></ul><ul><ul><li>LocalServer API and the manifest file, are the key components that cache your application's resources and make it available offline. </li></ul></ul> [email_address]
  10. 10. LocalServer <ul><li>The LocalServer module is a specialized URL cache that the web application controls. Requests for URLs in the LocalServer's cache are intercepted and served locally from the user's disk. </li></ul><ul><ul><li>Resource stores </li></ul></ul><ul><ul><ul><li>A resource store is a container of URLs. Using the LocalServer module, applications can create any number of resource stores, and a resource store can contain any number of URLs. </li></ul></ul></ul> [email_address]
  11. 11. Creating LocalServer <ul><li>localServer = google.gears.factory.create('beta.localserver', '1.0'); </li></ul><ul><li>API: LocalServer class </li></ul><ul><ul><li>boolean canServeLocally(string url) </li></ul></ul><ul><ul><li>ResourceStore createStore(string name, [string requiredCookie]) </li></ul></ul><ul><ul><li>ResourceStore openStore(string name, [string requiredCookie]) </li></ul></ul><ul><ul><li>void removeStore(string name, [string requiredCookie]) </li></ul></ul><ul><ul><li>ManagedResourceStore createManagedStore(string name, [string requiredCookie]) </li></ul></ul><ul><ul><li>ManagedResourceStore openManagedStore(string name, [string requiredCookie]) </li></ul></ul><ul><ul><li>void removeManagedStore(string name, [string requiredCookie]) </li></ul></ul> [email_address]
  12. 12. LocalServer – Resource Stores <ul><li>ResourceStore </li></ul><ul><ul><li>for capturing ad-hoc URLs using JavaScript. The ResourceStore allows an application to capture user data files that need to be addressed with a URL, such as a PDF file or an image. </li></ul></ul><ul><li>ManagedResourceStore </li></ul><ul><ul><li>for capturing a related set of URLs that are declared in a manifest file, and are updated automatically . </li></ul></ul> [email_address]
  13. 13. Creating ResourceStore <ul><li>localServer = google.gears.factory.create('beta.localserver'); </li></ul><ul><ul><li>store = localServer.openStore(STORE_NAME); </li></ul></ul><ul><ul><li>store.capture(filesToCapture, captureCallback); </li></ul></ul><ul><li>API: ResourceStore class </li></ul><ul><ul><li>int capture(urlOrUrlArray, callback) </li></ul></ul><ul><ul><li>readwrite attribute boolean enabled </li></ul></ul><ul><ul><li>void abortCapture(captureId) </li></ul></ul><ul><ul><li>void remove(url) </li></ul></ul><ul><ul><li>void copy(srcUrl, destUrl) </li></ul></ul><ul><ul><li>boolean isCaptured(url) </li></ul></ul><ul><ul><li>void captureFile(fileInputElement, url) </li></ul></ul><ul><ul><li>string getCapturedFileName(url) </li></ul></ul><ul><ul><li>string getHeader(url, name) </li></ul></ul><ul><ul><li>FileSubmitter createFileSubmitter() ... </li></ul></ul> [email_address]
  14. 14. ResourceStore – code snippets <ul><li>localServer = google.gears.factory.create </li></ul><ul><ul><ul><ul><ul><ul><ul><li>('beta.localserver', '1.0'); </li></ul></ul></ul></ul></ul></ul></ul><ul><li>store = localServer.openStore(STORE_NAME); </li></ul><ul><li>// If the store already exists, it will be opened </li></ul><ul><li>store = localServer.createStore(STORE_NAME); </li></ul><ul><li>store.capture (['sample.js', 'sample.css', 'gears_init.js'], captureCallback); </li></ul><ul><li>localServer.removeStore(STORE_NAME); </li></ul> [email_address]
  15. 15. ManagedResourceStore <ul><li>localServer = google.gears.factory.create('beta.localserver'); </li></ul><ul><ul><li>store = localServer.createManagedStore(STORE_NAME); </li></ul></ul><ul><ul><li>store.manifestUrl = 'manifest_v1.json'; </li></ul></ul><ul><ul><li>store.checkForUpdate(); </li></ul></ul><ul><li>API: ManagedResourceStore class </li></ul><ul><ul><li>readonly attribute string name </li></ul></ul><ul><ul><li>readonly attribute string requiredCookie </li></ul></ul><ul><ul><li>readwrite attribute boolean enabled </li></ul></ul><ul><ul><li>readwrite attribute string manifestUrl </li></ul></ul><ul><ul><li>readonly attribute int lastUpdateCheckTime </li></ul></ul><ul><ul><li>readonly attribute int updateStatus </li></ul></ul><ul><ul><li>readonly attribute string lastErrorMessage </li></ul></ul><ul><ul><li>readonly attribute string currentVersion </li></ul></ul><ul><ul><li>void checkForUpdate() </li></ul></ul> [email_address]
  16. 16. Manifest file <ul><ul><li>A manifest file lists all of the URLs to be captured by a ManagedResourceStore. It also contains the version for the manifest file format, the version of the contents of the manifest, and an optional redirection URL. </li></ul></ul><ul><ul><li>Using the ManagedResourceStore requires that you create a manifest file. </li></ul></ul><ul><ul><li>The manifest file is written in JavaScript Object Notation ( JSON ) format. </li></ul></ul> [email_address]
  17. 17. Manifest file <ul><ul><li>The manifest file and all the URLs listed in it must follow the &quot;same-origin policy&quot;, which means that all the URLs must originate from the same URI scheme, host, and port. </li></ul></ul><ul><ul><li>An application can have any number of manifest files and ManagedResourceStores. You specify which manifest file to use when you create an instance of ManagedResourceStore. </li></ul></ul> [email_address]
  18. 18. Manifest file <ul><li>{ </li></ul><ul><li>// version of the manifest file &quot;betaManifestVersion&quot;: 1, </li></ul><ul><li>// version of the set of resources described in this manifest file </li></ul><ul><li>&quot;version&quot;: &quot;my_version_string&quot;, </li></ul><ul><li>// optional.. // If the store specifies a requiredCookie, when a request would hit an entry contained in the manifest except the requiredCookie is not present, the local server responds with a redirect to this URL. </li></ul><ul><li>&quot;redirectUrl&quot;: &quot;login.html&quot;, </li></ul> [email_address] <ul><li>// URLs to be cached (URLs are given relative to the manifest URL) </li></ul><ul><li>&quot;entries&quot;: [ </li></ul><ul><li>{ &quot;url&quot;: &quot;main.html&quot;, &quot;src&quot;: &quot;main_offline.html&quot; }, </li></ul><ul><li>{ &quot;url&quot;: &quot;.&quot;, &quot;redirect&quot;: &quot;main.html&quot; }, </li></ul><ul><li>{ &quot;url&quot;: &quot;main.js&quot; } </li></ul><ul><li>{ &quot;url&quot;: &quot;formHandler.html&quot;, &quot;ignoreQuery&quot;: true }, </li></ul><ul><li>] </li></ul><ul><li>} </li></ul>
  19. 19. Gears – Getting Started <ul><li>Storing User's Data </li></ul><ul><ul><li>Applications that are more than just static files have data that is typically stored on the server. For the application to be useful offline, this data must be accessible locally. The Database module provides a relational database for storing data. </li></ul></ul> [email_address]
  20. 20. Storing User's Data <ul><ul><li>When an offline application reconnects, you will need to synchronize any changes made in the local database with the server. There are many different approaches to synchronizing data, and there is no single perfect approach. </li></ul></ul><ul><ul><li>An additional feature of the Google Gears database is Full-Text Search, providing a fast way to search text within a database file. </li></ul></ul> [email_address]
  21. 21. Gears Database Module <ul><li>The Database module provides browser-local relational data storage to your JavaScript web application. Google Gears uses the open source SQLite database system. </li></ul><ul><li>The Database module is used to persistently store an application user's data on the user's computer. </li></ul> [email_address]
  22. 22. Gears Database Module <ul><li>Data is stored using the same-origin security policy, meaning that a web application cannot access data outside of its domain (see Security). </li></ul><ul><li>Data is stored and retrieved by executing SQL statements. Google Gears includes SQLite's full-text search extension fts2. </li></ul> [email_address]
  23. 23. Gears Database Module <ul><li>To create a Database object, use the Gears Factory as follows: </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;gears_init.js&quot;></script> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><li>var db = google.gears.factory.create('beta.database', '1.0'); </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li>API: Database class </li></ul><ul><ul><li>void open([name]) </li></ul></ul><ul><ul><li>ResultSet execute(sqlStatement, [argArray]) </li></ul></ul><ul><ul><li>void close() </li></ul></ul><ul><ul><li>readonly attribute int lastInsertRowId </li></ul></ul> [email_address]
  24. 24. Database ResultSet <ul><li>A ResultSet is returned from a successful call to Database.execute(). It contains the results of executing the SQL statement. </li></ul><ul><li>A ResultSet is immutable, subsequent changes to the underlying database do not affect the contents. </li></ul> [email_address]
  25. 25. Database ResultSet <ul><li>Iterate over the rows of the result set using isValidRow(), next(), and close(), calling data extraction methods for valid rows. </li></ul><ul><ul><ul><li>while (rs.isValidRow()) { </li></ul></ul></ul><ul><ul><ul><li>console.log(rs.fieldName(0) + &quot; == &quot; + rs.field(0)); </li></ul></ul></ul><ul><ul><ul><li>; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>rs.close(); </li></ul></ul></ul> [email_address]
  26. 26. ResultSet API & DB location <ul><li>API: ResultSet class </li></ul><ul><li>boolean isValidRow() </li></ul><ul><li>void next() </li></ul><ul><li>void close() </li></ul><ul><li>int fieldCount() </li></ul><ul><li>string fieldName(int fieldIndex) </li></ul><ul><li>variant field(int fieldIndex) </li></ul><ul><li>variant fieldByName(string fieldName) </li></ul> [email_address] <ul><li>Linux - Firefox - Database files are stored in the user home directory. </li></ul><ul><li>Location: ~bob/.mozilla/firefox/<firefox's profile id>/Google Gears for Firefox </li></ul><ul><li>Example: ~bob/.mozilla/firefox/08ywpi3q.default/Google Gears for Firefox </li></ul>
  27. 27. Database – code snippets <ul><li>db = google.gears.factory.create('beta.database', '1.0'); </li></ul><ul><li>'database-demo'); </li></ul><ul><li>db.execute('create table if not exists Demo' + </li></ul><ul><li>' (Phrase varchar(255), Timestamp int)'); </li></ul><ul><li>db.execute('insert into Demo values (?, ?)', [phrase, currTime]); </li></ul><ul><li>var rs = db.execute('select * from Demo order by Timestamp desc'); </li></ul><ul><li>db.execute('delete from Demo where Timestamp=?', [rs.field(1)]); </li></ul> [email_address]
  28. 28. Gears – Performance Module <ul><ul><li>When synchronizing large amounts of data, you may find that the database operations begin to affect the responsiveness of the browser. The WorkerPool allows you to move your database operations to the background to keep the browser responsive. </li></ul></ul><ul><ul><li>The WorkerPool is useful for any expensive operations that slow down the UI. </li></ul></ul> [email_address]
  29. 29. Performance - WorkerPool <ul><li>In web browsers a single time-intensive operation, such as I/O or heavy computation, can make the UI unresponsive. The WorkerPool module runs operations in the background, without blocking the UI. Scripts executing in the WorkerPool will not trigger the browser's &quot;unresponsive script&quot; dialog. </li></ul> [email_address]
  30. 30. Code and Data Isolation <ul><li>The WorkerPool behaves like a collection of processes, rather than threads. Workers do not share any execution state. Changing a variable in one worker has no effect in any other worker. And created workers do not automatically inherit script code from their parents. </li></ul> [email_address]
  31. 31. Code and Data Isolation <ul><li>Members of a WorkerPool interact with each other only by sending message strings. Workers can also pass richer data types, by first converting objects to strings using JSON. </li></ul> [email_address]
  32. 32. WorkerPool Limitations <ul><li>A created worker does not have access to the DOM; objects like document and window exist only on the main page. </li></ul><ul><ul><li>However, workers do have access to all JavaScript built-in functions. Most Gears methods can also be used, through google.gears.factory. (One exception is LocalServer file submitter, which requires DOM.) Workers can delegate requests to main page. </li></ul></ul> [email_address]
  33. 33. WorkerPool Initialization <ul><li>JavaScript code (the &quot;parent&quot; worker) uses google.gears.factory to create a WorkerPool wp. </li></ul><ul><li>The parent indicates where incoming messages should go by setting wp.onmessage. It does this before calling createWorker() to ensure that no messages will be lost. </li></ul> [email_address]
  34. 34. Initialization Sequence <ul><li>For each new worker (a &quot;child&quot; worker): </li></ul><ul><ul><li>The parent calls wp.createWorker() with the full body of script that the child will contain. </li></ul></ul><ul><ul><li>Before wp.createWorker() returns, the child runs through its script once. During this time the child must set its onmessage handler, on the predefined global variable google.gears.workerPool. </li></ul></ul><ul><ul><li>When the child returns, the parent and child begin running in parallel. </li></ul></ul> [email_address]
  35. 35. WorkerPool Communication <ul><li>Workers send strings to each other using sendMessage(). Any member of a particular WorkerPool can communicate with any other member. </li></ul><ul><li>Each sent message triggers the receiver's onmessage handler. Message events are handled like all other JavaScript events. </li></ul> [email_address]
  36. 36. WorkerPool Communication <ul><li>The WorkerPool is not a singleton. A page can create multiple WorkerPool instances, and these pools are isolated from each other. This enables multiple gadgets on a page, for example, to use the WorkerPool module without fear of collision. </li></ul> [email_address]
  37. 37. WorkerPool Communication <ul><li>There are two common ways for the script to know which worker ID to send messages to: </li></ul><ul><ul><li>Use the second parameter to onmessage, which contains the sender's worker ID. A &quot;grunt&quot; worker whose purpose is to execute requests asynchronously will often use this method, blindly responding to whichever worker made the request. </li></ul></ul> [email_address]
  38. 38. WorkerPool Communication <ul><li>The second way </li></ul><ul><ul><li>Use the value returned by createWorker(), which is the ID of the newly created worker. A worker whose purpose is to coordinate tasks (usually the application's &quot;main&quot; JavaScript code) will often use this method. The ID can be sent to, and used by, any member of the WorkerPool, but this is seldom necessary. </li></ul></ul> [email_address]
  39. 39. WorkerPool API <ul><li>API: WorkerPool Class </li></ul><ul><li>callback onmessage(messageString, srcWorkerId) </li></ul><ul><li>int createWorker(fullScript) </li></ul><ul><li>void sendMessage(messageString, destWorkerId) </li></ul> [email_address] <ul><li>Code: </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;gears_init.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var workerPool = google.gears.factory.create('beta.workerpool'); </li></ul><ul><li></script> </li></ul>
  40. 40. WorkerPool Code snippets <ul><li>workerPool = google.gears.factory.create('beta.workerpool'); </li></ul><ul><li>// set the parent's message handler </li></ul><ul><li>workerPool.onmessage = parentHandler; </li></ul><ul><li>// setup the entire body of JavsScript code to run in the worker </li></ul><ul><li>var childCode = String(childInit) + </li></ul><ul><li>// childInit & childHandler are javascript function defined elsewhere </li></ul><ul><li>String(childHandler) + 'childInit();'; // runs init function </li></ul><ul><li>// create the worker </li></ul><ul><li>childId = workerPool.createWorker(childCode); </li></ul> [email_address]
  41. 41. Offline Application Architecture <ul><li>Architecting with a Data layer </li></ul><ul><ul><li>When you add a local datastore to your app, you will have a single place through which all data storage and retrieval requests pass. </li></ul></ul> [email_address]
  42. 42. Background Sync Architecture <ul><ul><li>Data is ready at all times, whenever the user goes offline, or is accidentally disconnected. </li></ul></ul><ul><ul><li>The performance is enhanced when using a slow Internet connection. </li></ul></ul> [email_address]
  43. 43. Gears - Security <ul><li>Gears uses the same origin policy as its underlying security model. A web page with a particular scheme, host, and port can only access resources with the same scheme, host, and port. </li></ul><ul><ul><li>Database: Can only open databases created for that site's origin. </li></ul></ul><ul><ul><li>LocalServer: Can only capture URLs and use manifests from the site's origin. </li></ul></ul> [email_address]
  44. 44. Database Security <ul><li>Best Practice : Avoid SQL injection attacks. Never insert user input directly into a SQL statement. Instead, use substitution parameters in Database.execute() . </li></ul><ul><li>DO this : </li></ul><ul><ul><li>db.execute('insert into MyTable values (?)', data); </li></ul></ul><ul><li>NOT this: </li></ul><ul><ul><li>db.execute('insert into MyTable values (' + data + ')'); </li></ul></ul> [email_address]
  45. 45. Where Gears useful? <ul><li>Gmail </li></ul><ul><ul><li>Perfect application for Gears. </li></ul></ul><ul><ul><li>Can work offline most of the time, reading and writing emails and can connect online only for send/receive messages. </li></ul></ul><ul><li>Stock Trading Application </li></ul><ul><ul><li>NOT good for Gears. </li></ul></ul><ul><ul><li>Online connectivity is an absolute must since this would require realtime quotes. </li></ul></ul> [email_address]
  46. 46. Gears – To remember <ul><li>Always include gears_init.js </li></ul><ul><li>Use ( ! || !google.gears ) to check if gears has been installed. </li></ul><ul><li>Use Gears Factory to create Gears Objects </li></ul><ul><ul><li>google.gears.factory.create('beta.database'); </li></ul></ul><ul><li>Write your application code. </li></ul><ul><li>Think Gears as an client Ajax framework with database support on the client. </li></ul> [email_address]
  47. 47. Gears - Summary <ul><li>Google Gears lets developers create web applications that can run offline. </li></ul><ul><li>LocalServer used to serve URL's stored in client using 2 kind of ResourceStore. </li></ul><ul><li>Database used to store client state. </li></ul><ul><li>Workerpool used to create asynchronous process for responsive UI. </li></ul> [email_address]
  48. 48. Resources <ul><li>Official Gears site: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Google Gears Discussion: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Gears Tutorial: </li></ul><ul><ul><li> </li></ul></ul><ul><li>Gears Sample Applications: </li></ul><ul><ul><li> </li></ul></ul> [email_address]
  49. 49. About IntelliBitz Technologies <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><ul><li>168, Medavakkam Main Road, Madipakkam </li></ul></ul><ul><ul><li>Chennai, 600091, India. </li></ul></ul><ul><ul><li>+91 44 2247 5106 </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul> [email_address]
  50. 50. Gears says Good Bye! [email_address] <ul><ul><li>Thank You! </li></ul></ul>