With the Mobile Apps feature of Azure App Service, it’s easy to rapidly build engaging Cordova apps. Azure mobile apps helps you to easily authenticate users, access the cloud data, add offline sync capabilities, and send push notifications. You can create a no-code backend in minutes and extend it to add custom logic C# or Node.js as you would like.
The tasks in this article show you how to create an Azure Mobile App that uses an Azure Easy table for data storage, offline data sync, authentication, and supports push notifications for Android, iOS, and Windows.
To get the sample, find the Azure connected services sample on GitHub.
Download the sample and open it in Visual Studio.
On the Azure portal, create an Azure Mobile App backend. Follow steps in this video to create the Azure Mobile App backend. You will need to create an Azure account if you don't have one.
For documentation that shows similar steps, see the Getting Started Tutorial. You can skip the section on downloading the client app.
Note: You can follow steps described in the Getting Started Tutorial to download the Azure sample, but if you use the getting started sample instead of the Azure connected services sample, you must take extra steps to add required plugins, to add offline sync and push notification code, and to update the Cordova version in your app.
The Azure connected services sample uses an Azure Easy table to store todolist items.
To use the sample, update your Cordova app in Visual Studio:
<meta>element in index.html.
html <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://yourmobileapp.azurewebsites.net; style-src 'self'; media-src *">
To use offline sync:
To use push notifications:
In Azure, update your server project by following steps in Update the server project.
The client app uses push notification templates to register devices for push notification service. This allows you to use platform-agnostic backend code in your Azure Mobile App.
If you are using the Azure connected services sample, you can skip the steps in Modify your Cordova app
To use push notifications, follow the other tasks in this article to create an Azure notification hub and to configure platform-specific notification services (GCM, APNS, and WNS) for the devices that you are targeting.
To use authentication:
registerForPushNotificationsfunction in index.js and then skip to Task 8: Add authentication.
If you want to add support for push notifications to your Azure Mobile App, follow steps in this video.
To follow the same steps in the tutorial, see Create a notification hub.
If you want to send push notifications to Android devices, you must configure GCM and add the GCM credentials to your notification hub. Follow steps in this video.
To follow the same steps in the tutorial, see Enable Google Cloud Messaging.
If you want to send push notifications to iOS devices, you must configure APNS and add the APNS credentials to your notification hub. Follow steps in this video.
To follow the same steps in the tutorial, see Register the app for push notifications on your Apple Developer portal.
Note: The PhoneGap push plugin requires XCode 7.
If you want to send push notifications to Windows devices, you must configure WNS and add the WNS credentials to your notification hub. Follow steps in this video.
To follow the same steps in the tutorial, see Register your app for push notifications with WNS.
Watch this video to make sure your app is ready to handle push notifications:
To test push notifications in your Android app:
Follow the steps in Test push notifications in your Android app.
To test push notifications in your iOS app:
If you haven't already, go through the steps in the iOS Setup Guide to install and run the remotebuild agent.
Make sure you can build the app for iOS. The steps in the setup guide are required to build for iOS from Visual Studio. If you do not have a Mac, you can build for iOS using the remotebuild agent on a service like MacInCloud. For more info, see Run your iOS app in the cloud.
Follow the steps in Test push notifications in your iOS app
To test push notifications in your Windows App:
Follow the steps in Test push notifications in your Windows app
Watch this video to add authentication to the Azure connected services sample. The video shows adding authentication with Twitter, but the steps are similar for other services as well.
To follow similar steps in the tutorial, see How to: Authenticate users
Select a device target and press F5 to run your app with authentication.
Platform notification service (PNS) credentials won't validate in Azure notification hub?
At present, detailed error information is not provided. Azure validates credentials for all platform notification services (PNS) that you you've configured (GCM, APNS, WNS), so check to make sure that all PNS credentials are still valid.
If you need more detailed error messages, you can log in through the Azure Classic portal to enter your PNS credentials.
Can't register device or device does not receive push notifications?
Use the Server Explorer in Visual Studio to make sure your device is getting registered with push notification services.
In Azure, open Settings > Diagnostic logs, and enable application logging, web server logging (file system), and detailed error messages. Then, while sending push notifications, view your Log stream (Tools > Log stream).
The app throws errors only when targeting iOS.
Make sure you are running XCode 7.
Can't get push notifications to work on Windows Phone 8.1.
The PhoneGap push plugin has been validated on Windows 10 only. To target Windows 10, you must set Windows 10 as the target in config.xml.
Visual Studio Emulator for Android doesn't show push notifications?
Push notifications are not supported on the VS Emulator for Android. Try to test on an Android device. The Google Android Emulator does support push notifications, but requires special configuration steps.
Other build or deployment errors in your Cordova app?
Please refer to the following links to learn how to use Azure Mobile App SDK in your Cordova app.
Did you find this article helpful?
We're sorry to hear that! Feel free to email our team with your question.