1-Develop Chrome Apps

Hi,

Here I summarized some important concepts that may help you before start developing Chrome developers Apps.

Important concepts as:

  1. Chrome Apps run offline by default
  2. Chrome apps run across all popular platforms: Mac, Windows, Linux, chrome OS, iOS and Android
  3. Access to platform capabilities and hardware:
    • You have access to the native hardware platform and the native OS, so you can do things like access the USB port, Bluetooth, the network.
  4. Rich, immersive, engaging user experiences, for example you able to build something like Sublime Text as a native app out of HTML5 and JavaScript…
  5. Distribution & Auto-updates via the Chrome Web Store
    • You update your code on the server, and then people just get the updated app. And the best thing is that Chrome Web Store handles distribution, it handles updates. So you write your app, you put it in the store, people download it, they’re using it, you ship an update. Notice that we use the same update mechanism that the Google servers and Chrome uses.

Offline by default:

What does offline really mean?

  1. No connection at all – airplane, metro, desert, Mars, etc.
  2. Bad connection – café, edge of UK bathroom, conference…

Native apps recover from this well because all those resources are stored locally. They’re packaged up in a package that you don’t have to generate UI on the fly. You don’t have some PHP script writing out HTML.

  1. All app resources are stored locally.
  2. Your app can be launched at any time.

Now, what this means is you have to plan for having a great offline experience:

  • Factor your app to store resources locally(separate JS, CSS, HTML)
    • Take the HTML, separate it from the JavaScript, and so on.
  • Abstract your app to talk to a data layer, which then uses specific APIs
    • Let’s take an example of how Sublime Text is working, you are working in your code, it’s simply working on the data, and then the data layer is handling the part of talking to the cloud or talking to local.storage or whatever it is. So if you can make that abstraction, things get a lot easier.
  • Figure out what your app’s offline features will be.
    • You have to think a little bit about what your app’s offline features are going to be. Some applications just don’t work very well when they’re offline, but that doesn’t mean they are useless. Think about an app like Skype. So 95% of the value of Skype is only there when I have a connection. But when I don’t have a connection, I shouldn’t be hosed. I should at least be able to manage my contact list, see my call history. So there’s still some value there.
  • Use navigator.online and related events to update the UI.
    • Working with navigator.online is not perfect, but it’s better than nothing. And the good news is that most users don’t plug their network cables into soil 😉
  • Store data with chrome.storage.local, IndexedDB, HTML5 Filesystem API

A simple usage of chrome.storage.local:
3_1_Chrome App Structure

What about Service Worker, what about app cache?
I (Joe Marini) agree, it solves a lot of these problems. There are things where Service Worker is great for. But think, it’s not just a technology problem. It’s a user behavior problem.

Note:

  • You can’t use window.localStorage, because it’s synchronous and that blocks the UX thread.
  • You can’t use synchronous XHR.
  • chrome.storage.local is an asynchronous version of window.localStorage

The way you build your Chrome app is basically like a normal web app , you’ve your HTML, you’ve got your JavaScript, you’ve got the other assets that make up your application.
And the next step you have to do is put a little infrastructure around that, using the manifest file, that defines what the app is and does(name, description, permissions it has, where the entry points are,….), then there’s a file that you get to define – main.js – ( you can call it whatever you want), you specify this in the manifest.
And that is the file that takes care of the entry points into your app.

So there’s an event for example, your app got launched, restarted, and a cloud message came in or an alarm went off.
You handle those kinds of events :

3_1_Chrome App Structure

In addition to being offline by default, chrome apps are cross-platform by default,so you don’t need to handle the installation, updating, cross-platform stuff. So that’s another great advantage of Chrome apps.

3_1_Chrome App Structure

In addition to being offline and cross-platform, we have a very heavy emphasis on being cloud-enabled by default.

Cloud by default:

Users increasingly expect their data to be everywhere, and your apps need to address that expectation.

Leverage Chrome’s cloud features:
  1. Use the chrome.storage.sync API to sync smaller data items
  2. Use the SyncFilesystem API to sync larger data files
    • Uses the Google Drive as the backend, but is extensible

    For larger data sets, there’s a sync version of the HTML5 file system. So you could store megabytes of data, and it’s backed by Google Drive.

  3. Use the Cloud Push Messaging API to send messages from your server
    • This is one of the cool things about Chrome apps. Let’s suppose your app isn’t even running, the user’s got their laptop open, they’re doing something, but they have not launched your app yet. The Chrome runtime is running, though, and it’s listening.
      So you could actually send a cloud message through Google servers to the Chrome runtime, and Chrome will wake your app up, tell it that it got a message, which is really cool. You can’t do that on the Open Web today, there’s no way for a web app to wake the browser up and say hey app, go to this URL.
  4. Use the Identity API to authenticate users.
    • One API function for Google services, another for all other 3rd party ones(like twitter,..).

To be continued….

This summary based on YouTube video ( by Google developer Joe Marini) called:
Develop Chrome Apps on desktop/mobile, distribute and profit – Chrome Dev Summit 2013
Here you can watch the entire talk at YouTube

Thanks and hoping this helped you understanding the Chrome apps structure.

mhmd

Hello, I'm Mohammad Daka, software engineer who love coding. In my spare time I blogs about JavaScript,PHP, Chrome Extensions, helpful resources and tools, I'm also working on my own projects. Don't hesitate to contact me at my twitter account: @mohammad_daka :)

1 Response

  1. backupbot says:

    The Chrome runtime is running, though, and it’s listening.mysql backup

Leave a Reply

Your email address will not be published. Required fields are marked *