ステップ２「アプリにネイティブ機能をつけよう」

Cordovaプラグイン「バッジで通知数を知らせよう」

Author: rdlabo

android/app/capacitor.build.gradle

@@ -9,11 +9,10 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
     implementation project(':rdlabo-capacitor-admob')
 
 }
-
+apply from: "../../node_modules/cordova-plugin-badge/src/android/badge.gradle"
 
 if (hasProperty('postBuildExtras')) {
   postBuildExtras()

android/app/src/main/res/xml/config.xml

@@ -2,4 +2,8 @@
   <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
 
+  <feature name="Badge">
+    <param name="android-package" value="de.appplant.cordova.plugin.badge.Badge"/>
+  </feature>
+
   </widget>

capacitor.config.json

@@ -5,6 +5,6 @@
   "npmClient": "yarn",
   "webDir": "www",
   "server": {
-    "url": "http://192.168.0.17:8100"
+    "url": "http://localhost:8100"
   }
 }

ios/App/App/capacitor.config.json

@@ -3,5 +3,8 @@
   "appName": "native-tutorial",
   "bundledWebRuntime": false,
   "npmClient": "yarn",
-  "webDir": "www"
+  "webDir": "www",
+  "server": {
+    "url": "http://localhost:8100"
+  }
 }

ios/App/App/config.xml

@@ -2,4 +2,8 @@
   <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
 
+  <feature name="Badge">
+    <param name="ios-package" value="APPBadge"/>
+  </feature>
+
   </widget>

ios/App/Podfile

@@ -11,6 +11,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'RdlaboCapacitorAdmob', :path => '../../node_modules/@rdlabo/capacitor-admob'
+  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
   # Do not delete
 end
 

package.json

@@ -23,11 +23,13 @@
     "@capacitor/android": "^1.1.1",
     "@capacitor/core": "1.1.1",
     "@capacitor/ios": "^1.1.1",
+    "@ionic-native/badge": "^5.13.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
     "@rdlabo/capacitor-admob": "^0.1.4",
+    "cordova-plugin-badge": "^0.8.8",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { RouteReuseStrategy } from '@angular/router';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Badge } from '@ionic-native/badge/ngx';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -16,6 +17,7 @@ import { AppComponent } from './app.component';
   providers: [
     StatusBar,
     SplashScreen,
+    Badge,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]

src/app/tab2/tab2.page.html

@@ -11,4 +11,10 @@
     <ion-button (click)="displayAdMob()" *ngIf="!isAdsense" color="primary">広告をだす</ion-button>
     <ion-button (click)="hideAdMob()" *ngIf="isAdsense" color="danger">広告を隠す</ion-button>
   </div>
+
+  <ion-list>
+    <ion-list-header>バッジの操作</ion-list-header>
+    <ion-item button="true" (click)="upBadge()">バッジを増やす</ion-item>
+    <ion-item button="true" (click)="clearBadge()">バッジクリア</ion-item>
+  </ion-list>
 </ion-content>

src/app/tab2/tab2.page.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Plugins } from '@capacitor/core';
 import { AdOptions, AdSize, AdPosition } from '@rdlabo/capacitor-admob';
+import { Badge } from '@ionic-native/badge/ngx';
 
 @Component({
   selector: 'app-tab2',
@@ -9,7 +10,15 @@ import { AdOptions, AdSize, AdPosition } from '@rdlabo/capacitor-admob';
 })
 export class Tab2Page {
   isAdsense = false;
-  constructor() {}
+  constructor(public badge: Badge) {}
+
+  upBadge() {
+    this.badge.increase(1);
+  }
+
+  clearBadge() {
+    this.badge.clear();
+  }
 
   displayAdMob() {
     const options: AdOptions = {

yarn.lock

@@ -341,6 +341,13 @@
   resolved "https://registry.yarnpkg.com/@capacitor/ios/-/ios-1.1.1.tgz#db1419114e610b8c60513151f57e6f14e7912bac"
   integrity sha512-6JCNWDY7E+Tt9mkzflwlK9tHl2qcPUgazZC0/aBte9lBEDpmzGPbTlHoiYeKTIqfhQeU7Qk8g6QabCx6vNzJpQ==
 
+"@ionic-native/badge@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@ionic-native/badge/-/badge-5.13.0.tgz#b4f0fa4d8eb9f7441f010296a5d31cb59c98ba3a"
+  integrity sha512-W/cLQK04tAiyggQfSKIJH16zXF1pWtmSMie3lXT1RJB7RYxXpKirOGikGUT2bj7f1y87cgrZW5l7JaCkIKnJ5A==
+  dependencies:
+    "@types/cordova" latest
+
 "@ionic-native/core@^5.0.0":
   version "5.13.0"
   resolved "https://registry.yarnpkg.com/@ionic-native/core/-/core-5.13.0.tgz#9d4068ae58334a4589178d135cfe7abdbad5003a"
@@ -1923,6 +1930,11 @@ [email protected]:
     serialize-javascript "^1.7.0"
     webpack-log "^2.0.0"
 
+cordova-plugin-badge@^0.8.8:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/cordova-plugin-badge/-/cordova-plugin-badge-0.8.8.tgz#0924018699b48f92dd3b33615452737582144c96"
+  integrity sha512-RhIBtd5xhD/iLnxjt35jvOae28oNW/wtMZBOmQR3Rf0y4wirvA1bpAZEhBoFqL+rZGhsd6ddOdQXdex1T0DRyQ==
+
 [email protected]:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"