Integrating
Android Apps
and Web Apps
    Copyright © 2013 CommonsWare, LLC
Objective: Add Value
●   App complements site, does not replace it
    –   Different roles, different scenarios
●   Support multiple screens
    –   Browser on desktop interacting with app on
        device
●   Single source
    –   App and site leverage same Web service back
        end
                       Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Objective
    –   User clicks on link in Web site from mobile
        browser
    –   App pops up in response to that click
●   Examples
    –   Wikipedia
    –   Barcode scanning

                       Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Strategy #1: Regular URL
    –   Site has link to:
        http://www.yourdomain.com/something
    –   What App Has
         ●   Activity to be displayed when that link is clicked
         ●   <intent-filter> advertising supporting VIEW action,
             BROWSABLE category, and that URL



                           Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Strategy #1: Regular URL
    –   What User Sees
         ●   If app not installed: whatever is at that URL
         ●   If app is installed: chooser to use browser or app to
             process the request (unless default already chosen)
    –   Passing Data
         ●   Additional path segments (with pathPrefix)
         ●   Query parameters

                           Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Strategy #1: Regular URL
    –   Limitation: Chooser appears
         ●   User can make your app be the default for this
             particular request, but still sees chooser the first time
         ●   No way to avoid allowing a Web browser to handle
             an HTTP link




                           Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Strategy #2: Custom Scheme
    –   Site has link to: yourscheme://something
    –   What App Has
         ●   Activity to be displayed when that link is clicked
         ●   <intent-filter> advertising supporting VIEW action,
             BROWSABLE category, and that URL complete with
             custom scheme



                           Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Strategy #2: Custom Scheme
    –   Pros
         ●   No chooser!
         ●   Alignment with other operating systems
    –   Cons
         ●   Link is useless without app
         ●   Possible scheme collision


                           Copyright © 2013 CommonsWare, LLC
Launching App from Web
●   Strategy #3: Custom MIME Type
    –   Site serves up content under distinct vendor
        MIME type, that your app handles
    –   Cons
         ●   Effects not immediate: download first, tap on
             notification, then get into your app
         ●   Possible MIME type collisions
●   Overall Con: Assumes Browsing from the
    Device
                          Copyright © 2013 CommonsWare, LLC
Launching App from Desktop Web
●   Strategy #1: QR Codes
    –   App displays QR code, user scans
    –   Requires QR code-scanning app
         ●   Barcode Scanner
         ●   Google Goggles
         ●   Etc.




                         Copyright © 2013 CommonsWare, LLC
Launching App from Desktop Web
●   Strategy #2: Push with GCM
    –   Google Cloud Messaging
    –   Push messages from your server to the device
         ●   In response to actions within your Web app
         ●   In response to other conditions (e.g., reminders)
    –   Free!
    –   Requires Android 2.2+, routing data through
        Google servers
                           Copyright © 2013 CommonsWare, LLC
Launching App from Desktop Web
●   Strategy #2: Push with GCM
    –   Client Side Steps
         ●   Get an API key
         ●   Add GCM JAR to your libs/ directory
         ●   Add permissions
         ●   Register a GCM-supplied BroadcastReceiver
         ●   Implement an IntentService that handles events
         ●   Register the app when run
         ●   Send registration ID to your server
                           Copyright © 2013 CommonsWare, LLC
Launching App from Desktop Web
●   Strategy #2: Push with GCM
    –   Server Side Steps
         ●   Find GCM server library
         ●   Create JSON of payload and other options
         ●   Send notification with payload and registration IDs




                          Copyright © 2013 CommonsWare, LLC
Getting to Web from App
●   Option #1: ACTION_VIEW
    –   Create an ACTION_VIEW Intent, with the URL
        you wish to visit
    –   Pass that to startActivity()
    –   Result: default/chosen browser launched




                      Copyright © 2013 CommonsWare, LLC
Getting to Web from App
●   Option #2: WebView
    –   Embed WebView widget in layout, used by
        activity or fragment
         ●   WebViewFragment available for API Level 11
             fragments
    –   Configure WebView
         ●   e.g., JavaScript disabled by default
    –   Call loadUrl() with your URL
    –   Result: your Web site in your app
                           Copyright © 2013 CommonsWare, LLC
Fancier Stuff
●   Common Web Service
    –   App plus “single page application” or equivalent
    –   Works best with REST-style APIs (vs. SOAP, XML-
        RPC, etc.)
●   OAuth
    –   Common authentication infrastructure for app,
        Web site
    –   App side tends to be a bit clunky
                       Copyright © 2013 CommonsWare, LLC
Fancier Stuff
●   Common Implementation
    –   Use same Web technologies on device as on
        desktop
    –   HTML5 app, PhoneGap, etc.
●   “Throwing” Between Screens
    –   Capture current session state, package up in way
        that other environment can continue

                      Copyright © 2013 CommonsWare, LLC
Speaker Contact
    Information




       SlideShare


       Copyright © 2013 CommonsWare, LLC

Integrate Android Apps and Web Apps

  • 1.
    Integrating Android Apps and WebApps Copyright © 2013 CommonsWare, LLC
  • 2.
    Objective: Add Value ● App complements site, does not replace it – Different roles, different scenarios ● Support multiple screens – Browser on desktop interacting with app on device ● Single source – App and site leverage same Web service back end Copyright © 2013 CommonsWare, LLC
  • 3.
    Launching App fromWeb ● Objective – User clicks on link in Web site from mobile browser – App pops up in response to that click ● Examples – Wikipedia – Barcode scanning Copyright © 2013 CommonsWare, LLC
  • 4.
    Launching App fromWeb ● Strategy #1: Regular URL – Site has link to: http://www.yourdomain.com/something – What App Has ● Activity to be displayed when that link is clicked ● <intent-filter> advertising supporting VIEW action, BROWSABLE category, and that URL Copyright © 2013 CommonsWare, LLC
  • 5.
    Launching App fromWeb ● Strategy #1: Regular URL – What User Sees ● If app not installed: whatever is at that URL ● If app is installed: chooser to use browser or app to process the request (unless default already chosen) – Passing Data ● Additional path segments (with pathPrefix) ● Query parameters Copyright © 2013 CommonsWare, LLC
  • 6.
    Launching App fromWeb ● Strategy #1: Regular URL – Limitation: Chooser appears ● User can make your app be the default for this particular request, but still sees chooser the first time ● No way to avoid allowing a Web browser to handle an HTTP link Copyright © 2013 CommonsWare, LLC
  • 7.
    Launching App fromWeb ● Strategy #2: Custom Scheme – Site has link to: yourscheme://something – What App Has ● Activity to be displayed when that link is clicked ● <intent-filter> advertising supporting VIEW action, BROWSABLE category, and that URL complete with custom scheme Copyright © 2013 CommonsWare, LLC
  • 8.
    Launching App fromWeb ● Strategy #2: Custom Scheme – Pros ● No chooser! ● Alignment with other operating systems – Cons ● Link is useless without app ● Possible scheme collision Copyright © 2013 CommonsWare, LLC
  • 9.
    Launching App fromWeb ● Strategy #3: Custom MIME Type – Site serves up content under distinct vendor MIME type, that your app handles – Cons ● Effects not immediate: download first, tap on notification, then get into your app ● Possible MIME type collisions ● Overall Con: Assumes Browsing from the Device Copyright © 2013 CommonsWare, LLC
  • 10.
    Launching App fromDesktop Web ● Strategy #1: QR Codes – App displays QR code, user scans – Requires QR code-scanning app ● Barcode Scanner ● Google Goggles ● Etc. Copyright © 2013 CommonsWare, LLC
  • 11.
    Launching App fromDesktop Web ● Strategy #2: Push with GCM – Google Cloud Messaging – Push messages from your server to the device ● In response to actions within your Web app ● In response to other conditions (e.g., reminders) – Free! – Requires Android 2.2+, routing data through Google servers Copyright © 2013 CommonsWare, LLC
  • 12.
    Launching App fromDesktop Web ● Strategy #2: Push with GCM – Client Side Steps ● Get an API key ● Add GCM JAR to your libs/ directory ● Add permissions ● Register a GCM-supplied BroadcastReceiver ● Implement an IntentService that handles events ● Register the app when run ● Send registration ID to your server Copyright © 2013 CommonsWare, LLC
  • 13.
    Launching App fromDesktop Web ● Strategy #2: Push with GCM – Server Side Steps ● Find GCM server library ● Create JSON of payload and other options ● Send notification with payload and registration IDs Copyright © 2013 CommonsWare, LLC
  • 14.
    Getting to Webfrom App ● Option #1: ACTION_VIEW – Create an ACTION_VIEW Intent, with the URL you wish to visit – Pass that to startActivity() – Result: default/chosen browser launched Copyright © 2013 CommonsWare, LLC
  • 15.
    Getting to Webfrom App ● Option #2: WebView – Embed WebView widget in layout, used by activity or fragment ● WebViewFragment available for API Level 11 fragments – Configure WebView ● e.g., JavaScript disabled by default – Call loadUrl() with your URL – Result: your Web site in your app Copyright © 2013 CommonsWare, LLC
  • 16.
    Fancier Stuff ● Common Web Service – App plus “single page application” or equivalent – Works best with REST-style APIs (vs. SOAP, XML- RPC, etc.) ● OAuth – Common authentication infrastructure for app, Web site – App side tends to be a bit clunky Copyright © 2013 CommonsWare, LLC
  • 17.
    Fancier Stuff ● Common Implementation – Use same Web technologies on device as on desktop – HTML5 app, PhoneGap, etc. ● “Throwing” Between Screens – Capture current session state, package up in way that other environment can continue Copyright © 2013 CommonsWare, LLC
  • 18.
    Speaker Contact Information SlideShare Copyright © 2013 CommonsWare, LLC