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

コアプラグイン「ローカル通知でユーザにお知らせしよう」

Author: rdlabo

android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,7 @@
     package="io.ionic.starter">
 
     <application
+        android:usesCleartextTraffic="true"
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"

android/app/src/main/assets/capacitor.config.json

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

capacitor.config.json

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

src/app/tab1/tab1.page.html

@@ -7,7 +7,7 @@
 </ion-header>
 
 <ion-content>
-    <ion-card class="welcome-card">
+  <ion-card class="welcome-card" (click)="localNotification()" button="true">
       <img src="/assets/shapes.svg" alt="" />
       <ion-card-header>
         <ion-card-subtitle>Get Started</ion-card-subtitle>

src/app/tab1/tab1.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Plugins } from '@capacitor/core';
 
 @Component({
   selector: 'app-tab1',
@@ -9,4 +10,17 @@ export class Tab1Page {
 
   constructor() {}
 
+  localNotification() {
+    Plugins.LocalNotifications.schedule({
+      notifications: [
+        {
+          id: 1,
+          title: 'ようこそ',
+          body: 'Ionic Frameworkへ',
+          schedule: { at: new Date(Date.now() + 1000 * 5) },
+          sound: 'normail'
+        }
+      ]
+    });
+  }
 }