[SalesForce] Which browser engine does the Salesforce1 native app use to render visualforce page content

I have created a Salesforce1 single page app with VisualForce page displaying HTML. The app uses HTML5 and CSS3. Some Android 4.2 and 4.3 devices will not display the HTML correctly inside the Salesforce1 native app. However, the page with HTML works perfectly when Salesforce1 runs in the Chrome browser on the mobile device.

So which browser am I building for in Salesforce1? Does it use the mobile device's default browser engine? If I update the device browser, will it also update the engine used by the Salesforce1 native app for rendering the visualforce HTML?

Best Answer

From what I understand, Salesforce1 is using the Salesforce Mobile SDK which is built on top of Phonegap (see Andrew's informative answer here for more on the technologies behind the Salesforce1 app).

So taking a look at what Phonegap has to say on the matter:

The web view used by PhoneGap is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView. Since there are differences in the web view rendering engines between operating systems, make sure that you account for this in your UI implementation.

Related Solutions

[SalesForce] Use Salesforce1 mobile app to access camera

You can access the camera from a Salesforce1 app, using the HTML <input> tag with accept="image/*" to access either the camera or photo library, for example

<input id="photoFile" type="file" accept="image/*"/>

You can then use the HTML5 File API to upload image data. Here's an example using the Force.com REST API - you would change this to process the QR code as necessary.

$(document).ready(function() {
  $("#photoFile").change(handlePhoto);
});

function handlePhoto(evt){
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      // Extract raw base64 data from data URL
      imageData = e.target.result.split(',')[1];

      forcetkClient.create('ContentVersion', {
        "Origin": "H",
        "PathOnClient": file.name;,
        "VersionData": imageData
      }, function(data) {
        $('#status').html("<p>Uploaded image</p>");
      }, function(error){
        alert(JSON.stringify(error));
      });
    };
  })(file);

  reader.readAsDataURL(file);
}

The Dreamforce 2013 session Only One Cure for the App Boogie Fever demonstrates this technique; the code from the session is on GitHub.

[SalesForce] Mobile view (/one/one.app) differs from native Salesforce1 view

How do you "open via Visualforce page" that record exactly?

If it's /{!record id here} or some kind of action method that returns PageReference (most likely with redirect?) - yep, it'll end up becoming a standard ("desktop") view of the record.

You should be detecting the S1 and using it's own navigation methods instead (like sforce.one.navigateToSObject('{!record id here}','detail').

Consult the S1 documentation and welcome to the world of pain ;) You might decide to have 2 separate VF pages rather than one that tries to work in both wo

I found these presentations quite useful:

Best Answer

Related Solutions

[SalesForce] Use Salesforce1 mobile app to access camera

[SalesForce] Mobile view (/one/one.app) differs from native Salesforce1 view

Related Topic