Hybrid Apps – Android System WebView Updates

From Android Lollipop 5.0, Google started pushing an app called “Android System Web View”, which they periodically update the device web view. Since Apache Cordova / Adobe PhoneGap is well adopted for building cross platform Mobile apps, this will have significant impact on the apps we’ve already built!

If you’re a Hybrid app developer and supporting Android 5.0 Lollipop & above versions, it’s worth to keep an eye on these updates and test your apps often.

It’s highly recommended to subscribe Chrome Canary beta channel – Android System WebView beta to get the updates early and act accordingly.

You can join Google+ WebView beta community to get latest updates. Android System WebView is supported on Android Lollipop 5.0 & above versions.

How to uninstall the Web View update

  • Tap on the Settings icon.

  • Scroll down and tap on Apps or Application Manager.

  • Look for Android System WebView under Downloaded page.

  • Tap to open the info page.

  • Now click on UNINSTALL UPDATES button. This will reset the web view.

NOTE: It’s a temporary solution till you work out a fix for it. If any of your existing app is breaking in the production, you can quickly ask them to uninstall the Android System WebView update.

Hope it helps!

Get started with Web

Web is very powerful! It almost replaced the desktop environment. Here are the few resources to get started with Web development –

  1. Codecademy
  2. CodeSchool
  3. Google Web
  4. Mozilla Developer Network
  5. Microsoft Virtual Academy  – Lot of cool video courses available for FREE!
    1. Getting Started with Web Technologies
    2. The Modern Web Platform Jump Start

  6. Udacity Courses ( FREE )

 

Happy learning!!!

Bower – A Package Manager

Recently I blogged on Modern Web App development, in which I mentioned few tools which will ease the web development. Today, let’s explore one more tool – Bower, the package manager for Web.

As you may aware that modern web application development requires one to many libraries or frameworks, and maintaining all of them is really hard, especially while upgrading! Isn’t cool, if we have a tool to do this job! Let’s take a look at the tool –

Bower is a great tool which helps us to maintain the project or app dependencies in more elegant way!

How it works?

Bower uses bower.json manifest (similar to package.json) file to hold all the package information. You can easily edit this manifest file. Works like a configuration file for your packages. Using Bower commands you can install all those packages at once.

Installing Bower

You can install Bower using npm (Node Package Manager). If you don’t know what is npm, you can learn here – https://docs.npmjs.com/. So, if you don’t have npm installed on your machine. Install the Node.js, which will install Node as well as npm.

NOTE: Bower requires Git. So install Git before you proceed with Bower installation.

  1. Node.js 
  2. Git

You may have to open Terminal(on MAC OS) or PowerShell / Command Prompt (on Windows). [I recommend PowerShell on Windows than Command Prompt.]

Type the following command –

npm install -g bower

NOTE: You may get permission issues, so you run the above command using sudo in MAC. On Windows, run the PowerShell or Command Prompt with Administrator Privileges.

Once you are done installing Bower globally, now we are ready to play with it!

Now, we need to create bower.json manifest file. You can create this manifest file manually or through bower.

Manually creating bower.json – Create a file and rename it to bower.json. That’s it! Data included in this manifest file should adhere to the spec –  https://github.com/bower/bower.json-spec

A Sample bower.json for Angular app

{
 "name": "demo-app",
 "version": "1.0.0",
 "dependencies": {
 "angular": "^1.3.0",
  "bootstrap": "^3.2.0",
 "angular-animate": "^1.3.0",
 "angular-cookies": "^1.3.0",
 "angular-resource": "^1.3.0",
 "angular-route": "^1.3.0",
 "angular-sanitize": "^1.3.0",
 "angular-touch": "^1.3.0"
 },
 "devDependencies": {
 "angular-mocks": "~1.3.0",
 "angular-scenario": "~1.3.0"
 },
 
}

Interactively create bower.json – You can create the bower.json interactively using  –

bower init

Answer the questions popped by Bower and it will create the file for you.

How to add new packages?

Try the following command –

//install the package and add it to bower.json dependencies
bower install <package-name> --save
//Ex: bower install jquery --save

You can search for available packages  – http://bower.io/search/

Update the bower package  –

bower update <package-name> <package-name> [options]

//-F: Force latest version on conflict

//Ex: bower update jquery -F

Uninstall the bower package  –

bower uninstall <package-name> [options]

//-S: Remove uninstalled packages from the project’s bower.json dependencies

//Ex: bower uninstall jquery -S

More Bower API’s – http://bower.io/docs/api/

Can I register my own package or library?

Yep, you can do that using bower register – 

bower register <your-package-name> <git-endpoint>

//Ex: bower register mylibrary git://github.com/user/example.git

You can also unregister – http://bower.io/docs/creating-packages/#unregister

Bower comes with lot of tools, which allows you to integrate the Bower with other IDE’s and tools. More info – http://bower.io/docs/tools/

Hope you have got quick overview of Bower package manager and usage of the tool.

Happy Web Programming!

Quick look of Keyboard events on Mobile browsers

As part of the project, we were working on the forcing the user to enter correct information while keying in. We tried leveraging the keyCode, charCode & which properties on event object.

We did a quick trial by creating a demo Hybrid App and tested the same on the Android and iOS devices. The results were surprising!

Google Chrome to be the future rich browser which is FAILING and Apple’s Mobile Safari is WINNING. Google Chrome browser is failing to return the correct key codes from Android OS KitKat 4.4 and above.

So, it’s better to have the validation check while submitting the form instead of keying in!

I have created a demo page to test the same – KeyEvents

Below are the quick analysis on different Android and iOS devices –

Device & OS Status
Samsung Galaxy NOTE 8000 (4.1.2)      √
Samsung Galaxy S3 (4.3)      √
Samsung Galaxy S4 (4.4.2)      ×
Nexus 7 (4.4.4)      ×
Nexus 7 (5.1)      ×
Nexus 9 (5.1)      ×
Nexus 4 (5.1)      ×
Nexus 5 (5.1)      ×
Nexus 6 (5.0)      ×
Apple iPhone 6 Plus (8.0.2)      √
Apple iPhone 6 (8.1)      √
Apple iPhone 5S (8.0.2)      √
Apple iPhone 5 (7.1.2)      √
Apple iPhone 4S (8.0.2)      √
Apple iPad mini (8.0.2)      √
Apple iPad (6.1.3)      √
Apple iPad Air (7.1.1)      √

Happy Mobile programming!

Ripple Emulator for testing Mobile web apps

I have already blogged about different emulators available to test mobile web apps, and links for those –

Apple iPhone/iPad Setup

Android Emulator Setup

Windows Phone Emulator Setup

How it would be, if we have one tool to test our web app in all kinds of devices with different resolutions. Great, right! Ripple extension for

Google Chrome browser makes this possible. Installation is pretty easy and it’s the same process, how you install an Chrome extension.

Download – Ripple Emulator extension for Google Chrome [Make sure you access this link from Chrome browser, so that it will install automatically!]

Once, you are done with the installation, Ripple icon will be visible on the right top corner of the Chrome browser.

Ripple icon

Now, we are ready to test our web apps. Now type the URL in the browser, and click on Ripple icon. It will display Ripple Mission Control dialog.

Click on Enable button in that dialog.

Riple Mission Control

It will display bunch of options to test with different mobile application frameworks. Choose the right one for you. Since we are

testing mobile web application, will choose Mobile Web(default).

options

Now we are in Mobile mode!

mobile mode

We can test our web application. By default our web app will be displayed in a generic device. We change this and test in the appropriate

device. To do that, click on the Devices option in the left corner, and choose the appropriate device!

devices

You can also test the Orientation – Portrait / Landscape.

Few options available to simulate – Accelerometer, Geo location. These options will be handy when you are developing Hybrid

apps using Phone Gap / BlackBerry Web Works!

CAUTION: It’s always recommended to test your on physical device. Some times results may vary!

Thanks!