1. Airship Support
  2. Web
  3. Web Notification

How do I find a Channel ID for Chrome mobile web browser on Android device?

Overview

This document outlines the steps required to determine a Channel ID for web notifications sent to a mobile Chrome web browser on Android devices. 

Airship uses unique Channel ID's to identify specific devices for your app.  The Channel ID is often the most important piece of information that you will need to track push delivery to a specific device.

Knowing your Channel ID is important for troubleshooting as well as sending test notifications on your project.

This process will involve setting up your Android Device for Remote Debugging as well as how to obtain your Web Channel ID through Chrome's DevTools.

Turning on Debugger Mode can expose your mobile device to certain security vulnerabilities. We recommend performing these steps only on a computer you trust and turning off Debugger Mode once you complete these activities.

Requirements

  • Your Android Device
  • Computer running Chrome
  • USB cord to connect your Android device to computer and any adapters needed. (You will need to make sure this USB cord is data-transfer capable)
  • Website which implements Airship Web Notifications. 

Steps

This process will be split into two basic sub-processes:

  1. Setup your device for Remote Debugging
  2. Run code in remote debugger to log your Channel ID.

Part 1: Setup Remote Debugging

Remote Debugging is a tool developed by Google to allow a computer direct access to live content on a Mobile Device through the Chrome browser.

It also allows access to the JavaScript Inspector and other DevTools for websites opened in the Chrome Browser on your mobile device, which is useful for us here.

We will follow the basic process outlined in Google's Documentation:

  1. Open the Developer Options screen on your Android. See Configure On-Device Developer Options | Google.
  2. Select Enable USB Debugging.
  3. On your development machine, open Chrome.
  4. Open DevTools | Google.

  5. In DevTools, click the Main Menu then select More tools > Remote devices.

    Screen_Shot_2019-01-09_at_12.24.30_PM.png

  6. In DevTools, open the Settings tab.

  7. Make sure that the Discover USB devices checkbox is enabled.

    Screen_Shot_2019-01-09_at_12.25.59_PM.png

  8. Connect your Android device directly to your development machine using a USB cable. The first time you do this, you usually see that DevTools has detected an unknown device. If you see a green dot and the text Connected below the model name of your Android device, then DevTools has successfully established the connection to your device. 
  9. If your device is showing up as Unknown, accept the Allow USB Debugging permission prompt on your Android device.

    debugger_prompt.png

 

Checkout the Troubleshooting Section of Google's Get Started with Remote Debugging Android Devices guide for help if you are unable to get your Device to show in the Remote Devices view, or if you are unable to get the green dot and the Connected text next to your device model.

Part 2: Run Channel ID code in Remote Debugger

With your device connected, you should now be able to run the code needed in your debugger to expose your Channel ID for your mobile browser.

  1. Open Chrome on your Android device.

  2. In the Remote Devices tab on your computer, click the tab that matches your Android device model name. At the top of this page, you see your Android device's model name, followed by its serial number. Below that, you can see the version of Chrome that's running on the device, with the version number in parentheses. Each open Chrome tab gets its own section. You can interact with that tab from this section.

    Screen_Shot_2019-01-09_at_12.43.02_PM.png

  3. Type in the url ("address") of the website where you have implemented Web Notifications. For example: "https://www.airship.com". Click Open
  4. You should see the website open up on your device within Chrome and now see it listed in the Open Tabs list
    Screen_Shot_2019-01-09_at_12.59.51_PM.png
  5. Click Inspect next to the tab containing your desired url.
  6. This should open a new Remote Debugging window on your computer, which mimics the screen on your device as well as has the Javascript Inspector open.Screen_Shot_2019-01-09_at_12.48.39_PM.png
  7. Within the "Console" section, copy and paste the following code:
    UA.then(sdk => {console.log(sdk.channel.id)})
  8. Provided the site has implemented Web Notify you should see something like the following output:

    channel_id_mobile.png
  9. If the Channel ID is not returned:
    • The SDK will return null if the browser is unregistered. Only registered browsers will have a Channel ID. See our documentation on how to Register. 
    • A UA is not defined error can indicate that the SDK snippet is not present within the page. Navigate to a different page on your site and repeat the steps above. 

Further Resources:

Was this article helpful?
0 out of 0 found this helpful
Submit a request