Socket
Socket
Sign inDemoInstall

cordova-plugin-firebase

Package Overview
Dependencies
0
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.5 to 2.0.6

97

docs/NOTIFICATIONS.md

@@ -6,39 +6,33 @@ # Notifications

## Changing Notification Icon
The plugin will use notification_icon from drawable resources if it exists, otherwise the default app icon is used.
To set a big icon and small icon for notifications, define them through drawable nodes.
Create the required `styles.xml` files and add the icons to the
`<projectroot>/res/native/android/res/<drawable-DPI>` folders.
By default Firebase will use the app icon as the notification icon. The icon is treated as a silhouette, so if the app icon has a background, it might appear as a large blob. To change the icon, you need to [add the icons](#add-the-icons) to the project and [configure firebase](#configure-firebase).
The example below uses a png named `ic_silhouette.png`, the app Icon (@mipmap/icon) and sets a base theme.
From android version 21 (Lollipop) notifications were changed, needing a separate setting.
If you only target Lollipop and above, you don't need to setup both.
Thankfully using the version dependant asset selections, we can make one build/apk supporting all target platforms.
`<projectroot>/res/native/android/res/values/styles.xml`
### Add the icons
Add your icons to your project in your res directory, such as `<projectroot>/res/native/android/res/<drawable-DPI>`. Make sure the icons all have the same name (example has ic_silhouette). Next, we will need to copy the icons over to the Android project when it is created. To do this, add the following lines to your `config.xml`.
```
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!-- inherit from the holo theme -->
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowDisablePreview">true</item>
</style>
<drawable name="notification_big">@mipmap/icon</drawable>
<drawable name="notification_icon">@mipmap/icon</drawable>
</resources>
<platform name="android">
....
<resource-file src="res/native/android/res/drawable-hdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
<resource-file src="res/native/android/res/drawable-xhdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
... Repeated for each screen resolution you have a notification icons for...
</platform>
```
and
`<projectroot>/res/native/android/res/values-v21/styles.xml`
Note: the src of the files is not important, but the target directory with the proper dpi filter is very imporant. You will also need to name all the icons the same name.
### Configure Firebase
We need to copy a metadata flag into the Manifest to tell Firebase which icon to use. To do this, add the following line to your `config.xml`.
```
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!-- inherit from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<item name="android:windowDisablePreview">true</item>
</style>
<drawable name="notification_big">@mipmap/icon</drawable>
<drawable name="notification_icon">@drawable/ic_silhouette</drawable>
</resources>
<platform name="android">
....
<config-file parent="/manifest/application" target="AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_silhouette" />
</config-file>
</platform>
```
Note: If you have XML Namespace issues, which I encountered when trying to build in Android Studio, add this `xmlns:android="http://schemas.android.com/apk/res/android"` to the widget element at the root of the `config.xml`.
## Notification Colors
To add color to the custom icon, you will need to [create a color definition](#create-a-color-definition) and [configure firebase color](#configure-firebase-color).
### Create a Color Definition
On Android Lollipop and above you can also set the accent color for the notification by adding a color setting.

@@ -55,1 +49,46 @@

```
You will again need to copy this file over to your project to get it to work by adding these lines to your `config.xml`
```
<platform name="android">
...
<resource-file src="res/native/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
</platform>
```
### Configure Firebase Color
We need to copy a metadata flag into the Manifest to tell Firebase which color to use for the icon. To do this, add the following line to your `config.xml`.
```
<platform name="android">
....
<config-file parent="/manifest/application" target="AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
</config-file>
</platform>
```
Note: If you have XML Namespace issues, which I encountered when trying to build in Android Studio, add this `xmlns:android="http://schemas.android.com/apk/res/android"` to the widget element at the root of the `config.xml`.
# Final Result
If you added a custom icon and color, your `config.xml` should include something like this.
```
<widget .... xmlns:android="http://schemas.android.com/apk/res/android">
...
<platform name="android">
<!-- Copy the color definition -->
<resource-file src="res/native/android/res/values/colors.xml" target="app/src/main/res/values/colors.xml"/>
<!-- Copy the icons -->
<resource-file src="res/native/android/res/drawable-hdpi/ic_silhouette.png" target="app/src/main/res/drawable-hdpi/ic_silhouette.png"/>
<resource-file src="res/native/android/res/drawable-xhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xhdpi/ic_silhouette.png"/>
<resource-file src="res/native/android/res/drawable-xxhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xxhdpi/ic_silhouette.png"/>
<resource-file src="res/native/android/res/drawable-xxxhdpi/ic_silhouette.png" target="app/src/main/res/drawable-xxxhdpi/ic_silhouette.png"/>
<!-- Configure Firebase -->
<config-file parent="/manifest/application" target="AndroidManifest.xml">
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_silhouette" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primary" />
</config-file>
</platform>
</widget>
```

@@ -11,3 +11,3 @@ {

"name": "cordova-plugin-firebase",
"version": "2.0.5",
"version": "2.0.6",
"description": "Cordova plugin for Google Firebase",

@@ -14,0 +14,0 @@ "cordova": {

@@ -1,3 +0,1 @@

[![Build Status](https://travis-ci.org/arnesson/cordova-plugin-firebase.svg?branch=master)](https://travis-ci.org/arnesson/cordova-plugin-firebase)
# cordova-plugin-firebase

@@ -61,1 +59,5 @@ This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to your Cordova project! Android and iOS supported.

See the full [API](docs/API.md) available for this plugin.
## Supporters
[PassportReader](https://passportreader.app) identity verification API - Get started for free - $0.01 per verification

@@ -26,3 +26,3 @@ var fs = require("fs");

// modify the line to add the necessary dependencies
var googlePlayDependency = whitespace + 'classpath \'com.google.gms:google-services:4.1.0\' // google-services dependency from cordova-plugin-firebase';
var googlePlayDependency = whitespace + 'classpath \'com.google.gms:google-services:4.2.0\' // google-services dependency from cordova-plugin-firebase';
var fabricDependency = whitespace + 'classpath \'io.fabric.tools:gradle:1.25.4\' // fabric dependency from cordova-plugin-firebase'

@@ -119,2 +119,2 @@ var modifiedLine = match[0] + '\n' + googlePlayDependency + '\n' + fabricDependency;

}
};
};

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc