Skip to Content

/wp-content/uploads/2015/07/sap_logo_750385.png

AppUpdate

The AppUpdate plugin is used to enable the contents under the www folder (HTML, JavaScript, CSS, images, etc.) of a deployed Kapsel app and its config.xml to be updated.  As an example, a new project named AppUpdateDemo will be created and used to demonstrate how to update a deployed app.  A Kapsel app with the AppUpdate plugin installed will check with the SMP 3.0 server on startup to see if there is a newer revision of the Kapsel app available.  The revision number of the Kapsel app is automatically incremented with each deployment to the SMP 3.0 server.  If the revision on the server is higher than the revision in the config.xml on the device or simulator, then a notification is shown asking the user if they wish to accept the update.
image1.PNG
For additional details see C:\SAP\MobileSDK3\KapselSDK\docs\api\sap.AppUpdate.html or Using the AppUpdate Plugin.

The following steps will demonstrate this plugin.

  • Follow the steps shown in Configuring a Kapsel App in the Management Cockpitto create an Application with the application ID of
    com.mycompany.appupdate

      This app does not use an OData endpoint so that can be set to a dummy URL such as

    http://www.mycompany.com

    and add the Basic SSO mechanism.

  • Create a new project named AppUpdateDemo, add Android or iOS or both and add the AppUpdate plugin and optionally the logger plugin if you wish to view the messages logged by the AppUpdate plugin.  The log level is set to debug if sap.Logger is detected on line 12 of index.html.
    cordova create C:\Kapsel_Projects\AppUpdateDemo com.mycompany.appupdate AppUpdateDemo
    cd AppUpdateDemo
    cordova platform add android
    cordova plugin add kapsel-plugin-appupdate --searchpath %KAPSEL_HOME%/plugins
    cordova plugin add kapsel-plugin-logger --searchpath %KAPSEL_HOME%/plugins
    
    cordova create ~/Documents/Kapsel_Projects/AppUpdateDemo com.mycompany.appupdate AppUpdateDemo
    cd ~/Documents/Kapsel_Projects/AppUpdateDemo
    cordova platform add ios
    cordova plugin add kapsel-plugin-appupdate --searchpath $KAPSEL_HOME/plugins
    cordova plugin add kapsel-plugin-logger --searchpath $KAPSEL_HOME/plugins
    
  • Replace the contents of  C:\Kapsel_Projects\AppUpdateDemo\www\index.html with index.html.

    Note the application ID is specified in index.html as

    var appId = "com.mycompany.appupdate";
    

    The user and password values do not matter in this example as an OData endpoint is not being used.

  • Optionally modify the AppUpdateDemo\config.xml and add
    <preference name="hybridapprevision" value="0" />
    <preference name="sap-development-version" value="1.2.3" />

    Also update the description and email fields if desired.

    Due to a long delay on Android while assets are being copied during the first app update, it is recommended to either not specify hybridapprevision or use value=”0″.  When hybridapprevision is not present or set to 0, during the first client update, the client will request the server to send the complete contents of the www folder rather than just the files that changed between the revision that is reported on the client and the revision on the server.

  • Prepare, build and deploy the app with the following command.
    cordova run android
    or
    cordova run ios
  • In the All Output tab in Xcode or in the Android Device Monitor under the LogCat view, the debug output from the AppUpdate plugin can be seen.  Note that the LogCat view provides a feature to filter messages.  The filter shown below is based on the Tag SMP_APP_UPDATE.
    image8.PNG
    Notice above that when the app starts, the AppUpdate plugin checks with the SMP server to see if there is a newer revision of the app.  The current revision of the app is revision 0.  We have not yet deployed a version of the app to the server so a 404 error is returned.
  • The Kapsel command line interface (CLI) provides a way to generate a zip file that contains the HTML files that make up the app.  This zip file can then either be uploaded to the SMP 3.0 server using the Management Cockpit or it can be uploaded using the Kapsel command line interface.  Open a command prompt or shell to the folder
    C:\SAP\MobileSDK3\KapselSDK\cli
    
     ~/SAP/MobileSDK3/KapselSDK/cli

    Run

    npm install -g

    On a Mac it may be necessary to run

    sudo npm -g install

    See the section Installing Apache Cordova with Node.js for additional details on setting proxy settings if your company uses a proxy server.

    Change directories to the directory containing the project and run the below commands to generate a zip file containing the HTML files that make up the application and then upload the zip file to the SMP 3.0 server.

    kapsel package
    kapsel deploy com.mycompany.appupdate localhost:8083 smpAdmin s3pAdmin
    

    The package command can optionally take a platform such as android or iOS.  The parameters to the deploy command are the SMP 3.0 server host name, the app ID, the user id, and password for the SMP 3.0 server.  After running this command the Management Cockpit will show that revision 1 has been uploaded to the server.
    image5.PNG

    Close and reopen the app. This time when the AppUpdate plugin will see that revision 1 is available.
    image7a.PNG

    Notice above that the response also indicates where to download the app from.  If you are using a reverse proxy server between the devices and the SMP server, you may need to include a rule for the reverse proxy to rewrite this address.  See also Apache Module mod_substitute.  In the below example the apache reverse proxy server is at smpqa12-03.sybase.com and the SMP server is installed on smpqa-win12-03.sybase.com:8080

    <Location />
       AddOutputFilterByType SUBSTITUTE application/json
       Substitute "s|smpqa-win12-03.sybase.com:8080|smpqa12-03.sybase.com|ni"
    </Location>
    

    The www folder on the Android device or simulator is read only and cannot be updated directly, so the first app update causes the entire contents of the www folder to be copied to a new location causing the size of the deployed application to increase. Updates after the first update should be proportional to the size of the new files being added.

    At this point the version of the application on the device is the same as the version on the server.
    image1.PNG

  • Update  C:\Kapsel_Projects\AppUpdateDemo\www\index.html and change the body’s background-color to some other color such as silver.
    <style type="text/css">  
    body {     background-color: silver;   } </style>
  • Copy the contents of the www folder to the platform specific www folder of the project using prepare.
    cordova prepare
    
  • Deploy a new version of app to the SMP 3.0 server.
    kapsel package
    kapsel deploy com.mycompany.appupdate localhost:8083 smpAdmin s3pAdmin

    image6.PNG

    Close and reopen the AppUpdateDemo app.
    image1.PNGimage2.PNG

    The debug output from the AppUpdate plugin shows that the client has revision 1 and the server has revision 2.  It also lists the changed files which in this case is index.html.
    image7.PNG

  • Note that only the changed index.html file is sent from the SMP server to the device.

    Note, rather than having the end user ok the update, the update can happen without the user being asked to ok it by overriding the sap.AppUpdate.onupdateready event.

    // Override default handler
    sap.AppUpdate.onupdateready = function(e) {
       // No notification just reload
       console.log("Apply update");
       sap.AppUpdate.reloadApp();
    }
    

    See comments in appupdate.js for further details.

Testing Changes before Deploying

  • Note, it is important to test the changes before publishing them to the server.  If an error is introduced, it could cause the application to break and potentially prevent future updates from being downloaded.  You can also validate your JavaScript with tools like JSLint, or JSHint.  CSS can be validated with CSS Lint.  If you encounter a problem after an update has occurred and you are using an iOS simulator, the contents of the update can be viewed at the following location.
    /Users/user_name/Library/Developer/CoreSimulator/Devices/602C969F-F0CD-4043-AFBF-583C62F5A8BA/data/Containers/Data/Application/97CE6DBB-50F1-451E-A503-B5E79F4C7302/Documents/SMP/appupdate/app/www

    Note, the above location can be seen as the first line in the Xcode All Output window.

    If using an Android emulator, the updated files can be viewed at the following location.

    data\data\com.mycompany.appupdate\files\download\www
    

    One technique to aid with this problem is to open an error page that can check for new updates if an error is detected.
    Replace the contents of  C:\Kapsel_Projects\AppUpdateDemo\www\index.html with index2.html and add error.html.
    Line 12 can be uncommented which makes a call to a non-existent JavaScript method.  The app that now has an error in it can be packaged and deployed to the SMP 3.0 server.  When the app is reopened, the newer version is uploaded and the error handler detects an error and redirects to the error page.

    image9.PNGimage10.PNG
    Correct the error, package and deploy the app.
    Now press check for updates and notice that app has recovered from the error.
    image2.PNG

  • As of SP09 of the SMP server, there is now an ability to deploy a revision to a select set of test users before the revision is fully deployed to all users.

      This functionality is available in the SMP Management Cockpit and is not currently available when using the kapsel deploy command.

    image11.PNG
    As shown above once a zip file is uploaded, it can be either staged so it is available only to test users or it can be deployed so that the revision is pushed out to all users.

    image12.PNG
    As shown above, the Is Tester flag can be set for a user.

Back to Getting Started With Kapsel

To report this post you need to login first.

20 Comments

You must be Logged on to comment or reply to a post.

  1. Christian Kreuzer

    Hi Daniel,

    Thanks for the great blog!

    Our SMP is only available over https protocol (https://<server&gt;:443). I could logon via logon module on ios and androis devices (https). AppUpdate is working fine on ios. But with the android version the plugin is trying to get the update via http://<server&gt;:80.

    This is not possible in our environment.

    /wp-content/uploads/2015/09/2015_09_14_17_37_01_789840.png

    Where do I have to maintain, that it should use the https address?

    Best Regards

    Christian

    (0) 
    1. Daniel Van Leeuwen Post author

      Can you provide a few more details on the version of the SMP server and of the SDK that you are using.  I tried this quickly here and was not able to reproduce the problem.  At the moment I am using an SP08 of the server and SP08 of the SDK.  Here is the fiddler trace of the request.

      POST https://YKFN00528072A.amer.global.corp.sap/odata/lcm/v1/ListApps HTTP/1.1

      Accept: application/json

      Content-Type: application/json

      X-SMP-APPCID: ff0174be-29e2-4947-bf38-658be654a8f5

      User-Agent: Dalvik/1.6.0 (Linux; U; Android 4.4.4; Nexus 7 Build/KTU84P)

      Host: YKFN00528072A.amer.global.corp.sap

      Connection: Keep-Alive

      Accept-Encoding: gzip

      Cookie: X-SMP-SESSID=1D1F2BC221421723F18AF6D38D150753C1DBE6FB534A2A10FB5E1804070C01DF; X-SMP-SESSIDSSO=D26B98E6CB063A095E56FAB00AE9055E; X-SMP-APPCID=ff0174be-29e2-4947-bf38-658be654a8f5; X-SUP-APPCID=ff0174be-29e2-4947-bf38-658be654a8f5

      Content-Length: 118

      {“installedFeatures”:[],”osVersion”:”4.4.4″,”clientVersion”:”3.0″,”appRevision”:0,”osName”:”Android”,”locale”:”en_US”}

      Here is the response.  Notice that it is using HTTPS.

      HTTP/1.1 200 OK

      Server: Apache-Coyote/1.1

      Date: Mon, 14 Sep 2015 16:35:05 GMT

      Content-Length: 933

      {

      “d” : {

      “results” : [

      {

      “__metadata” : {

      “uri” : “https://YKFN00528072A.amer.global.corp.sap/odata/lcm/v1/Apps(AppId='com.sapteched.hybrid‘,Platform=’android‘)”, “type” : “lcm.Apps”

      }, “UpdateType” : “complete”, “MimeType” : “application/octet-stream”, “AppId” : “com.sapteched.hybrid”, “Id” : “9aa041f81bdf46df86f83b52b5e089e6”, “Revision” : 4, “InstallType” : “silent”, “LastModified” : “1442248282995”, “Platform” : “android”, “Path” : “https://YKFN00528072A.amer.global.corp.sap:443/resources/lcm/apps?appKey=ced398beaeb74e4d95141f4b52599624&revision=4“, “Size” : 4427, “FeaturesRequired” : {

      “results” : [

      {

      “FeatureName” : “BarcodeScanner”

      }, {

      “FeatureName” : “MAFLogonCoreCDVPluginJS”

      }, {

      “FeatureName” : “Notification”

      }, {

      “FeatureName” : “AppUpdate”

      }, {

      “FeatureName” : “i18n”

      }, {

      “FeatureName” : “OData”

      }, {

      “FeatureName” : “AuthProxy”

      }, {

      “FeatureName” : “InAppBrowser”

      }, {

      “FeatureName” : “Device”

      }

      ]

      }

      }

      ]

      }

      }

      Regards,

      Dan van Leeuwen

      (0) 
      1. Christian Kreuzer

        Because of the error I updated my development sytem to

        SDK 3.9.8

        SMP 3.0.8.3

        When I do the same via fiddler (https) I do get the URL with http. We have a component simmular to a reverse proxy which comunicates to the SMP via http this may be the reason for that.

        (0) 
  2. Manuel Ramirez

    Hi Daniel.

    We have an app on production that we want to update, but the problem is only the HTML and js files are updated, Kapsel plugins are not updated, and we need to update one of them to include a bugfix released by SAP.

    There is any way to manually edit the zip file to include the plugin to update or something like that?

    Thank you in advance.

    (0) 
    1. Daniel Van Leeuwen Post author

      Unfortunately the AppUpdate plugin only updates the files under the www folder so unless the bug fix was just to a plugin’s .js file, you will need to have your users manually update the app or if available push out the new update using a mobile device management solution.

      Regards,

      Dan van Leeuwen

      (0) 
      1. Manuel Ramirez

        Ok, thank you for your reply.

        If I’m not wrong, SAP Afaria doesn’t support pushing apps to Android devices, so I think manually install will be the only option in this case.

        Reagrds.

        (0) 
        1. Midhun VP

          Hi Manuel,

          Afaria supports pushing apps to the android devices. You need to create an application policy and later you could update the apk file.

          Regards, Midhun

          SAP Technology RIG

          (0) 
            1. Midhun VP

              Well, if you want to update the app automatically you have to use scheduling in Afaria. Otherwise run afaria app and update.

              Regards, Midhun

              SAP Technology RIG

              (0) 
    1. Daniel Van Leeuwen Post author

      Yes, that table is showing the plugins available in the Fiori Client available from the App Stores as of Fiori Client 1.3.  I believe the current version is now 1.5. 

      I do not know of any reason why you would not be able to add the appupdate plugin to your custom SAP Fiori Client but realize that the default Fiori Client typically does not package up the Fiori apps HTML, JavaScript, CSS, etc files in the app.  I assume you are creating a packaged custom Fiori app where these resources are included in the app?

      Regards,

      Dan van Leeuwen

      (0) 
      1. Notes OSS PPS

        By the moment we don’t use the prepackage Fiori Client, but we can think about change to it if AppUpdate give us a good behaviour.

        Regards,

                          Jose

        (0) 
        1. Daniel Van Leeuwen Post author

          The documentation covering the packager appears to imply that Mobile Secure is required but that it is possible to use the packager without using Mobile Secure. 

          http://help.sap.com/saphelp_smp3010sdkmfadev/helpdata/en/ca/b7a87eba614c6b84f70bb9f0bfd59d/content.htm

          The packager pulls down the HTML/JavaScript assets from the front end server.  These can be placed in a Cordova/Kapsel project that you create which could include the AppUpdate plugin.  Of course if you use Mobile Secure, it will create the project for you automatically and will build the project using the cloud build service as well as other benefits such as being able to provision and deploy the app.

          I hope to add some content on the packager in the future.

          Regards,

          Dan van Leeuwen

          (0) 
          1. Mark Anthony Abarintos

            Thanks for the feedback Daniel.

            Additional guides about the packager would be really great. I am able to download the resources from our FES. However, I’m not sure what to do next. Do I just copy the resources folder to the www folder of the main project? Then just manually build the project via Xcode/Android studio or CLI?

            (0) 
  3. Arshad Feeroz MD

    Hi,
    I am trying to use AppUpdate plugin in my app. I was trying to refer to the code. But when I am trying to download the index2.html and error.html for reference, it is giving page not found error. Kindly tell me from where I can download them.

    thanks and regards,
    Arshad

    (0) 

Leave a Reply