Awesome

Ionic Push Base

This can be used as base template for Ionic Push apps. It's working for both iOS and Android Push Notifications.

Tutorial

• Push Notifications in Ionic
• FCM Setup for Android Notifications
• APNS Setup for IOS Notifications

Prerequisites

• Download nodejs from https://nodejs.org/en/download/current/ It will install node and npm

node -v
 - should be >= 6.0.0
npm -v
 - should be >= 3.0.0

• For iOS, update XCode version to 8.0 or higher
• Install cocoapods, required by latest version of phonegap-push-plugin

sudo gem install cocoapods
pod setup

Getting Started

• Clone this repository

• Install Ionic, cordova and node_modules

  $ npm install -g ionic cordova
  $ npm install
  

• Generate SENDER_ID using this tutorial :+1:

• Replace YOUR_SENDER_ID in config.xml and app.ts with above SENDER_ID

Android

    $ ionic cordova platform add android
    $ ionic cordova build android
    $ ionic cordova run android

iOS

    $ ionic cordova platform add ios
    $ ionic cordova build ios

Run using XCode

####Use device token printed in console for push notifications using below server code

Push Notifications Preview in lock screen and while using App

• Android

  <img src="screenshots/android_push.png" alt="Notification on Lock Screen" width="250"/> <img src="screenshots/android_alert.png" alt="Notification While Using App" width="250"/>

• iOS

  <img src="screenshots/ios_push.png" alt="Notification on Lock Screen" width="250"/> <img src="screenshots/ios_alert.png" alt="Notification While Using App" width="250"/>

Server Code

Push Notifications Server code :tada::+1: It has server code used to send Push Notification to iOS and Android device.

File Structure of App

ionic-push-base/
|-- src/
|    |-- app/
|    |    ├── app.ts
|    |    └── app.module.ts
|    |    └── main.ts
|    |
|    |-- pages/                          * Contains all of our pages
│    │    ├── details/                   * Push Details tab page
│    │    │    ├── detail.html           * DetailsPage template
│    │    │    └── detail.ts             * DetailsPage code
│    │    │
│    │    ├── home/                      * Home page
│    │    │    ├── home.html             * HomePage template
│    │    │    └── home.ts               * HomePage code
│    │    │
│    │    ├── tabs/                      * Tabs page
│    │    │    ├── tabs.html             * TabsPage template
│    │    │    └── tabs.ts               * TabsPage code
│    │    │
│    ├── theme/                          * App theme files
|    |     ├── variables.scss            * App Shared Sass Variables
|    |
|    |-- index.html
|    |-- manifest.json
|    |-- service-worker.js
|
├── .editorconfig                        * Defines coding styles between editors
├── .gitignore                           * Example git ignore file
├── LICENSE                              * MIT License
├── README.md                            * This file
├── config.xml                           * Cordova configuration file
├── ionic.config.json                    * Ionic configuration file
├── package.json                         * Defines our JavaScript dependencies
├── tsconfig.json                        * Defines the root files and the compiler options
├── tslint.json                          * Defines the rules for the TypeScript linter