ionic本地存储_使用电容器在ionic 5中实现本地通知

ionic本地存储

For an Ionic 4 Cordova implementation of Local Notifications, check out this blog

有关本地通知的Ionic 4 Cordova实现，请查看 此博客

Ionic 5 is here ! And so is Capacitor 2.0 (beta). In this post you are going to learn how to implement local notifications in Ionic 5 app with Capacitor. We will see a variety of notification types that can be generated using Local Notifications. We will use a simple Cordova plugin, that works for Capacitor as well, and test the functionality on an Android and iOS app.

离子5在这里！ 电容器2.0(测试版)也是如此。 在这篇文章中，您将学习如何使用Capacitor在Ionic 5应用程序中实现本地通知。 我们将看到可以使用本地通知生成的各种通知类型。 我们将使用一个简单的Cordova插件，该插件也适用于Capacitor，并在Android和iOS应用程序上测试其功能。

Complete code of this blog post can be found at this github repo — ionic-5-local-notifications

此博客文章的完整代码可以在此github存储库中找到— ionic-5-local-notifications

什么是本地通知？ (What is Local Notification ?)

We have all heard of notifications, and push notifications mostly. These are the notifications app servers send to apps for regular reminders. For example, a chat app server sends notification to user to update of a latest message. These notifications are received in closed app, minimized app or open app.

我们都听说过通知，大部分都是推送通知。 这些是应用服务器发送到应用的常规提醒的通知。 例如，聊天应用服务器将通知发送给用户以更新最新消息。 这些通知是在关闭的应用程序，最小化的应用程序或打开的应用程序中接收的。

`Push notifications ….. necessary evil

`推送通知.....必要的邪恶

Push notifications cause burden on Server, as well as, cost you money if you are using a service like OneSignal etc. Hence, for each action or reminder, you might not want the server to send push notifications to all users. Especially if you have millions of users.

推送通知会给服务器带来负担，并且如果您使用的是OneSignal等服务，则会使您付出金钱。因此，对于每个操作或提醒，您可能不希望服务器将推送通知发送给所有用户。 特别是如果您有数百万的用户。

This is where Local Notifications come in handy. These look and feel exactly like push notifications, but are not sent from server. Instead, they are generated locally on your device. E.g. If you want an app to remind you of your tasks at a certain time of the day, it makes sense that the app does so using the in-built clock or timer in the device. The app then sends you Local Notification, which looks same as a push.

这是本地通知派上用场的地方。 这些外观与推送通知完全一样，但不是从服务器发送的。 相反，它们是在设备上本地生成的。 例如，如果您希望某个应用在一天中的某个特定时间提醒您执行任务，那么有意义的是该应用使用设备中的内置时钟或计时器来执行此操作。 然后，该应用会向您发送与通知相同的本地通知。

You don’t feel the difference between Local and Push notification, and the server saves a lot of overhead.

您不会感觉到本地通知和推送通知之间的区别，并且服务器节省了大量开销。

In this post, we will learn how to implement Local notifications features in Ionic 5apps. First, let’s see what Ionic 5 is all about.

在这篇文章中，我们将学习如何在Ionic 5apps中实现本地通知功能。 首先，让我们看看Ionic 5的全部含义。

什么是离子？ (What is Ionic?)

You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

您可能已经了解了Ionic，但我只是为了初学者而将其放在此处。 Ionic是由Drifty Co.的Max Lynch ， Ben Sperry和Adam Bradley在2013年创建的用于混合移动应用程序开发的完整开源SDK。Ionic提供了使用CSS，HTML5和Sass等Web技术开发混合移动应用程序的工具和服务。 。 可以使用这些Web技术构建应用程序，然后通过本机应用程序商店分发这些应用程序，以利用Cordova将其安装在设备上。

So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

因此，换句话说，如果您在Android中创建本机应用程序，那么您将使用Java进行编码。 如果您在iOS中创建本机应用程序，则可以在Obj-C或Swift中进行编码。 两者都是强大而复杂的语言。 使用Cordova(和Ionic)，您可以为您的应用程序编写一小段代码，使其可以在iOS和Android (以及Windows！)上运行，并且还可以简化HTML，CSS和JS。

Ionic’s latest version — Ionic 5, was released in March 2020, and is what we are using for this blog post.

Ionic的最新版本-Ionic 5于2020年3月发布，这是我们在本博文中使用的版本。

电容器-与Cordova有何不同？ (Capacitor — How is it different from Cordova ?)

Cordova helps build Ionic web app into a mobile device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.

Cordova帮助将Ionic Web应用程序构建到可移动设备可安装的应用程序中。 但是Cordova有一些局限性，Capacitor试图通过新的App工作流程来克服这些局限性。

Here are the differences between Cordova and Capacitor

这是科尔多瓦和电容器之间的区别

1. Capacitor considers each platform project a source asset instead of a build time asset. That means, Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time

   Capacitor认为每个平台项目都是源资产，而不是构建时间资产 。 这意味着，Capacitor希望您将平台源代码保留在存储库中，这与Cordova始终认为您将在构建时生成平台代码不同。

2. Because of the above, Capacitor does not use config.xml or a similar custom configuration for platform settings. Instead, configuration changes are made by editing AndroidManifest.xml for Android and Info.plist for Xcode

   由于上述原因，Capacitor不会将config.xml或类似的自定义配置用于平台设置。 而是通过编辑Android的AndroidManifest.xml和Xcode的Info.plist来进行配置更改

3. Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like ionic run ios . You will have to run iOS apps using Xcode, and Android apps using Android studio

   电容器不会“在设备上运行”或通过命令行模拟。 而是通过特定于平台的IDE进行此类操作。 因此，您无法使用ionic run ios类的命令来运行Ionic-capacitor应用。 您将必须使用Xcode运行iOS应用程序，并使用Android Studio运行Android应用程序

4. Since platform code is not a source asset, you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers

   由于平台代码不是源资产，因此您可以使用Xcode或Android Studio直接更改本机代码。 这为开发人员提供了更大的灵活性

In essence, Capacitor is like a fresh, more flexible version of Corodva.

本质上，电容器就像是Corodva的全新，更灵活的版本。

外挂程式 (Plugins)

Cordova and Ionic Native plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be incompatible with Capacitor. For Local Notification functionality, we’ll use the cordova-plugin-local-notifications.

Cordova和Ionic Native插件可以在电容器环境中使用。 但是，有些已知的Cordova插件与Capacitor不兼容。 对于本地通知功能，我们将使用cordova-plugin-local-notifications 。

职位结构 (Structure of the post)

I will go ahead in step-by-step fashion so you can follow easily

我将逐步进行，以便您可以轻松跟随

1. Create a basic Ionic 5 Capacitor app
   创建一个基本的Ionic 5 Capacitor应用
2. Install Local Notification plugin and make imports
   安装本地通知插件并进行导入
3. Implement your first Local Notification, use data from notification
   实施您的第一个本地通知，使用通知中的数据
4. Build your app on iOS and Android and test
   在iOS和Android上构建您的应用并进行测试
5. Implement various types of Local Notifications
   实施各种类型的本地通知

Let’s start with creating a simple Ionic 5 app

让我们从创建一个简单的Ionic 5应用程序开始

第1步-创建基本的Ionic 5应用 (Step 1 — Create a basic Ionic 5 app)

To create a basic Ionic 5 Capacitor app, follow these steps

要创建基本的Ionic 5 Capacitor应用，请按照以下步骤操作

• Make sure you have node installed in the system (I used V10.15.3 at the time of this blog post, but latest stable version is 12.x)
  确保您已在系统中安装节点(在撰写此博客时，我使用的是V10.15.3，但最新的稳定版本是12.x)

• Install ionic cli using npm (my Ionic CLI version is 5.3.0 and Ionic Framework is V5.0.5)

  使用npm安装ionic cli (我的Ionic CLI版本是5.3.0，Ionic Framework是V5.0.5)

• Create an Ionic app using ionic start

  使用ionic start创建离子应用

You can create a blank starter for the sake of this tutorial. On running ionic start ionic-5-local-notifications blank —-capacitor , node modules will be installed. Once the installation is done, run your app on browser using

为了本教程的缘故，您可以创建一个blank启动器。 在运行ionic start ionic-5-local-notifications blank —-capacitor ，将安装节点模块。 安装完成后，使用

$ ionic serve

The app will launch on browser. You can go to Inspect → Device Mode to see the code in a mobile layout.

该应用程序将在浏览器上启动。 您可以转到检查→设备模式以移动布局查看代码。

The --capacitor flag attaches Capacitor to your Ionic app automatically. If you forget to do it while creating the app, you can do it later by running

--capacitor标志将电容器自动附加到您的Ionic应用程序。 如果您忘记了在创建应用程序时执行此操作，则可以稍后运行

$ ionic integrations enable capacitor

You can create a basic layout for triggering Local Notifications. All the real action will happen when we build the app for device (iOS).

您可以创建用于触发本地通知的基本布局。 当我们为设备构建应用程序(iOS)时，所有真正的动作都会发生。

The layout here is taken from Ionic 5 Full App from Enappd 🙏

此处的布局取自 Enappd I的 Ionic 5 Full App

Next we’ll add the Local Notifications plugin to our app.

接下来，我们将本地通知插件添加到我们的应用中。

第2步-安装本地通知插件并进行导入 (Step 2 — Install Local Notification plugin and make imports)

To implement Local Notifications you need to add cordova-plugin-local-notifications plugin to the app. Add the plugin using

要实施本地通知，您需要向应用程序添加cordova-plugin-local-notifications插件。 使用添加插件

$ ionic cordova plugin add cordova-plugin-local-notification 
$ npm install @ionic-native/local-notifications

This will install the plugin in your app. Next, import the plugin in app.module.ts and in the pages you want to use it.

这会将插件安装在您的应用中。 接下来，将插件导入app.module.ts和要使用它的页面中。

import { LocalNotifications} from '@ionic-native/local-notifications/ngx'

Also, include LocalNotifications in @ngModule providers list.

另外，在@ngModule 提供程序列表中包括LocalNotifications 。

@NgModule({
....,
providers: [
...,
LocalNotifications,
...],
})

Now you are ready to implement Local notifications in your Ionic 5 app.

现在，您可以在Ionic 5应用程序中实施本地通知了。

第3步-实施您的第一个本地通知 (Step 3 — Implement your first Local Notification)

Local Notification implementation is very easy once you import the plugin correctly. Head to your home.page.ts created with the app. Create a function to schedule your first local notification like this

正确导入插件后，本地通知实施非常容易。 转到您使用该应用创建的home.page.ts 创建一个函数来schedule您的第一个本地通知，如下所示

import { Component } from '@angular/core';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  clickSub: any;
  constructor(private localNotifications: LocalNotifications) {}
  simpleNotif() {
    this.localNotifications.schedule({
      id: 1,
      text: 'Single Local Notification',
      data: { secret: 'secret' }
    });
  }
}

Super easy, right ? This will create a local notification and it will appear in your device’s status bar as an icon. You can check the full notification in your device’s notification tray.

超级容易，对吗？ 这将创建一个本地通知，并在设备的状态栏中显示为图标。 您可以在设备的通知栏中查看完整的通知。

Local notification in Ionic 5 app — Android implementation

Ionic 5应用程序中的本地通知-Android实现

Let’s dive deeper into the details of the notification object, and learn what all options are available

让我们更深入地了解通知对象的细节，并了解所有可用选项

• id — ID of the notifications

  id —通知的ID

• title — Title of the notification, shown in larger font. If no title is provided, app’s name is shown as title

  title —通知的标题，以较大的字体显示。 如果未提供title ，则应用名称显示为title

• text — Message of the notification. Shown in smaller font. It can be of multiple lines as well. Can be an array of messages as well. We’ll see that in later section

  text —通知消息。 以较小的字体显示。 它也可以是多行。 也可以是消息数组。 我们将在后面的部分中看到

• sound — location of sound file to be played with notification

  声音 -带有通知播放的声音文件的位置

• data — additional data you can send along with notification in JSON format

  数据 -您可以将其他数据与JSON格式的通知一起发送

• icon — location or URL of icon shown with the notification

  图标 -随通知一起显示的图标的位置或URL

• silent — (boolean) whether notification should be silent or not

  静音 -(布尔值)通知是否应该静音

• trigger — custom trigger time of notification, can be given in various formats. We’ll see this in later section

  触发器 —通知的自定义触发时间，可以以多种格式给出。 我们将在后面的部分中看到

• attachments — Attached images to be sent with notification

  附件 —随通知一起发送的附件图像

• progressBar — progress-bar options for Local notifications

  progressBar —本地通知的进度栏选项

• group — define the group name to group similar notifications together

  组 -定义组名称以将类似的通知分组在一起

• summary — summary of grouped notifications

  摘要 —分组通知的摘要

• smallIcon — Small icon shown for group notifications or custom notifications

  smallIcon —为组通知或自定义通知显示的小图标

• sticky — whether the notification should be sticky or dismissible

  粘性 -通知是粘性还是可忽略

• autoClear — If yes, make the notification automatically dismissed when the user touches it (Android only)

  autoClear —如果是，请在用户触摸通知时自动将其关闭(仅限Android)

• lockscreen — If set to true the notification will be shown in its entirety on all lock-screens. If set to false it will not be revealed on a secure lock-screen. (Android only)

  锁屏 -如果设置为true通知将在其所有的锁屏全部显示。 如果设置为false ，它将不会在安全的锁定屏幕上显示。 (仅限Android)

• channel — Specifies the channel the notification should be delivered on (Android only)

  channel-指定通知应在其上传递的频道(仅适用于Android)

• foreground — If the notification should show up on app’s foreground

  前台 -如果通知应显示在应用程序的前台

• timeoutAfter — Specifies a duration in milliseconds after which this notification should be canceled, if it is not already canceled (Android only)

  timeoutAfter —指定一个持续时间(以毫秒为单位)，如果此通知尚未取消，则应在该时间之前取消(仅适用于Android)

• launch — Specifies whether a click on the notification causes the app to open in foreground

  launch —指定是否单击通知会导致应用程序在前台打开

• priority — Integers between -2 and 2, whereas -2 is minimum and 2 is maximum priority

  priority-整数，介于-2和2之间，而-2为最小值，而2为最大优先级

• led — to set LED options of the device. You can set color , on and off properties

  led —设置设备的LED选项。 您可以设置color ， on和off属性

• vibrate — (boolean) — Whether notification should vibrate the device

  振动— (布尔值)—通知是否应振动设备

• color — RGB value for the background color of the smallIcon (Android only)

  color — smallIcon的背景色的RGB值(仅适用于Android)

• badge — The number currently set as the badge of the app icon in Springboard (iOS) or at the right-hand side of the local notification (Android). Default: 0 (which means don’t show a number)

  徽章 -当前在Springboard(iOS)或本地通知(Android)右侧设置为应用程序图标徽章的数字。 默认值：0(表示不显示数字)

… and few more options. That’s a lot !!!

……还有更多选择。 好多啊 ！！！

This is a really powerful and detailed plugin. You can make very good use of the plugin to supplement push notifications, and make your app interactive.

这是一个非常强大且详细的插件。 您可以很好地利用插件来补充推送通知，并使您的应用程序具有交互性。

步骤4 —在Android上构建您的应用并进行测试 (Step 4 — Build your app on Android and test)

If you have carried out the above steps correctly, Android build should be a breeze.

如果您正确执行了上述步骤，则可以轻松构建Android。

Run the following command to create Android platform

运行以下命令创建Android平台

$ ionic cordova platform add android

Once platform is added, run the app on device (Make sure you have a device attached to the system).

添加平台后，请在设备上运行该应用程序(确保已将设备连接至系统)。

$ ionic cordova run android

Once your app is up and running on the device, you can start testing all the functions. The GIF shown above is taken from a real Android device 😎

一旦您的应用启动并在设备上运行，您就可以开始测试所有功能。 上面显示的G​​IF取自真实的Android设备😎

步骤5 —实施各种类型的本地通知 (Step 5 — Implement various types of Local Notifications)

The GIF in previous section might not have impressed you a lot. So let’s have a look at the variety of notifications and actions you can perform with this plugin

上一节中的GIF可能不会给您留下深刻的印象。 因此，让我们来看看您可以使用此插件执行的各种通知和操作

前台本地通知 (Local notification in foreground)

Just add foreground:true in notification trigger call, and your notification will show up in the foreground, just like Whatsapp !

只需在通知触发调用中添加foreground:true ，您的通知就会显示在前台，就像Whatsapp一样！

Foreground Local Notification in Ionic 5 app — Android

Ionic 5应用程序中的前景本地通知-Android

Foreground Local Notification in Ionic 5 app — iOS

Ionic 5应用程序中的前景本地通知-iOS

从通知中获取数据单击 (Get Data from Notification Click)

As we saw earlier, the data field of notification contains certain data in JSON format. We can extract this data using notification events . For our purpose, we will use click event.

如前所述，通知的data字段包含JSON格式的某些数据。 我们可以使用通知events提取此数据。 为了我们的目的，我们将使用click事件。

I will subscribe to the click event before scheduling the notification. Then on clicking the notification, the event will be triggered and we will get data in console. I will also show the data in an alert, just for demo. After the alert, we will unsubscribe from the listener. The complete code for this will be

我将在计划通知之前订阅click事件。 然后，在单击通知时，将触发event ，我们将在控制台中获取数据。 我还将在警报中显示数据，仅用于演示。 收到警报后，我们将取消订阅监听器。 完整的代码将是

import { Component } from '@angular/core';
import { LocalNotifications, ILocalNotificationActionType } from '@ionic-native/local-notifications/ngx';
import { AlertController } from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  clickSub: any;
  constructor(private localNotifications: LocalNotifications, public alertController: AlertController) {}
  async presentAlert(data) {
    const alert = await this.alertController.create({
      header: 'Alert',
      message: data,
      buttons: ['OK']
    });
    await alert.present();
  }
  unsub() {
    this.clickSub.unsubscribe();
  }
  simpleNotif() {
    this.clickSub = this.localNotifications.on('click').subscribe(data => {
      console.log(data);
      this.presentAlert('Your notifiations contains a secret = ' + data.data.secret);
      this.unsub();
    });
    this.localNotifications.schedule({
      id: 1,
      text: 'Single Local Notification',
      data: { secret: 'secret' }
    });


  }
}

The sequence will look like this

序列看起来像这样

Local notification with event triggered on click

点击时触发事件的本地通知

一次多个通知 (Multiple Notification at once)

Just send multiple local notifications in an array inside the schedule

只需在schedule内的数组中发送多个本地通知

Multiple Local notification at once — Ionic 5 Capacitor Android app

同时发出多个本地通知-Ionic 5 Capacitor Android应用

延迟的本地通知 (Delayed Local Notifications)

You can also delay a notification or send it at a particular time. This way, you can even schedule notifications daily, weekly etc.

您还可以延迟通知或在特定时间发送通知。 这样，您甚至可以每天，每周等安排通知。

E.g. For demo purpose, we’ll trigger a notification after 5000 ms of button click, but it will be taken as a date object. Just add the following option in notification options

例如，出于演示目的，我们将在点击按钮5000毫秒后触发一条通知，但该通知将被视为日期对象。 只需在通知选项中添加以下选项

trigger: { at: new Date(new Date().getTime() + 5000) },

Notification shows up after 5 second — Ionic 5 Capacitor Android app

5秒后显示通知-Ionic 5 Capacitor Android应用

Notification shows up after 5 second — Ionic 5 Capacitor iOS app

5秒后显示通知-Ionic 5 Capacitor iOS应用

带有进度条的本地通知 (Local Notification with Progress Bar)

You can also display a local notification with a progress bar. This is useful in cases like when you are performing a long background task.

您还可以显示带有进度条的本地通知。 这在执行长时间的后台任务时很有用。

Just add following to notification options object (will show a 20% progress)

只需将以下内容添加到通知选项对象(将显示20％的进度)

progressBar: { value: 20 }

Local notification with progress bar — Ionic 5 Capacitor Android app

带有进度条的本地通知— Ionic 5 Capacitor Android应用

iOS progress bar notification are not that impressive though

iOS进度栏通知虽然没有那么令人印象深刻

Local notification with progress bar — iOS

带有进度条的本地通知-iOS

具有多行消息的本地通知 (Local Notification with multi-line message)

You can make the notification message multi-line by adding new line characters. E.g.

您可以通过添加新的行字符使通知消息成为多行。 例如

text: '4:15 - 5:15 PM\nBig Conference Room'

Local Notification with Multi-line message —Android

具有多行消息的本地通知-Android

Local Notification with Multi-line message —iOS

具有多行消息的本地通知-iOS

带有图像和操作按钮的本地通知 (Local Notification with Image and Action buttons)

To add a large image, you can add this to the notification options (yes, kitten photo 😛

要添加大图像，可以将其添加到通知选项(是，小猫照片😛

attachments: ['http://placekitten.com/g/300/200']

For action buttons, you can add this to the options

对于操作按钮，可以将其添加到选项中

actions: [
{ id: 'yes', title: 'Yes' },
{ id: 'no', title: 'No' }
]

An action generally has the following structure —

动作通常具有以下结构：

id?: string;
title?: string;
foreground?: boolean;
launch?: boolean;
ui?: string;
needsAuth?: boolean;
icon?: string;
choices?: string[];
editable?: boolean;
submitTitle?: string;
type?: ILocalNotificationActionType;

This will create a notification with YES and NO buttons

这将使用“是”和“否”按钮创建一个通知

Local Notification with Action buttons and Image — Android

带有操作按钮和图像的本地通知— Android

I was not able to get the photo in iOS, probably because of http, though the action buttons do appear and work

我无法在iOS中获取照片，可能是因为http ，尽管操作按钮确实可以正常工作

Local Notification with Action buttons — iOS

带有操作按钮的本地通知-iOS

带输入的本地通知 (Local Notifications with Input)

You can also generate local notification accepting input text in notification tray itself. This comes in handy in chat applications. This is all you need to add to the notification options

您还可以在通知托盘本身中生成接受输入文本的本地通知。 这在聊天应用程序中很方便。 这就是您需要添加到通知选项中的所有内容

actions: [{
id: 'reply',
type: ILocalNotificationActionType.INPUT,
title: 'Reply'
}]

To use ILocalNotificationActionType , you will have to import it first in the page using

要使用ILocalNotificationActionType ，您必须首先使用以下ILocalNotificationActionType将其导入页面中

import { ILocalNotificationActionType } from '@ionic-native/local-notifications/ngx';

The result will look like this

结果将如下所示

Local notification with Input text— Android

带有输入文字的本地通知-Android

Local notification with Input text —iOS

输入文字的本地通知-iOS

带有分组的本地通知 (Local Notifications with Grouping)

At times, you receive many notifications from the same app. E.g. your email app, or chat app. You would like to group these together so as to not take a lot of space in notification tray. You can do this easily with local notifications using the following option

有时，您会从同一应用程序收到许多通知。 例如，您的电子邮件应用程序或聊天应用程序。 您希望将它们组合在一起，以免在通知托盘中占用大量空间。 您可以使用以下选项通过本地通知轻松完成此操作

this.localNotifications.schedule([
{ id: 0, title: 'Design team meeting' },
{ id: 1, summary: 'me@gmail.com', group: 'email', groupSummary: true },
{ id: 2, title: 'Please take all my money', group: 'email' },
{ id: 3, title: 'A question regarding this plugin', group: 'email'},
{ id: 4, title: 'Wellcome back home', group: 'email' }
]);

The group:'email' creates a group with similar notifications which have group:email . Here’s how it looks

group:'email'创建一个带有group:email类似通知的group:email 。 看起来像这样

Local notification with grouped notifications —Android

具有分组通知的本地通知-Android

You see the four emails grouped together, with one as a header. Other notification is shown as separate notification. Same for iOS

您会看到将四封电子邮件分组在一起，其中一封作为标题。 其他通知显示为单独的通知。 与iOS相同

Local notification with grouped notifications —iOS

具有分组通知的本地通知-iOS

The group notification do come in annoyingly though in iOS 🙈

尽管在iOS🙈中，组通知确实令人讨厌

Grouped notification in iOS come one after another

iOS中的分组通知一个接一个

结论 (Conclusion)

In this post, we learnt how to use Local Notification in Ionic 5 Capacitor apps to generate a lot of different types of notifications. These include action buttons, input text, images, multiple notifications, grouping etc. With local notifications, you can save a lot on server push notifications. Plus it gives you the ability to schedule regular notifications as well.

在这篇文章中，我们学习了如何在Ionic 5 Capacitor应用程序中使用“本地通知”来生成许多不同类型的通知。 这些包括操作按钮，输入文本，图像，多个通知，分组等。使用本地通知，您可以在服务器推送通知上节省很多。 另外，它还使您能够安排定期通知。

We tested the apps on Android device and iOS simulator to validate the working. I think this is an awesome plugin, and you should definitely use it in your apps if possible.

我们在Android设备和iOS模拟器上测试了这些应用，以验证其工作情况。 我认为这是一个很棒的插件，如果可能的话，您绝对应该在应用程序中使用它。

Complete code of this blog post can be found at this github repo — ionic-5-local-notifications

此博客文章的完整代码可以在此github存储库中找到— ionic-5-local-notifications

下一步 (Next Steps)

Now that you have learned the implementation of Local Notifications in Ionic 5, you can also try following blogs. These are written for Ionic 4, but will work nicely for Ionic 5 as well.

既然您已经了解了Ionic 5中本地通知的实现，您还可以尝试关注博客。 这些是为Ionic 4编写的，但也将适用于Ionic 5。

• Ionic 4 Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay

  Ionic 4付款网关— 条带 | 贝宝 | Apple Pay | 剃刀宝

• Ionic 4 Charts with — Google Charts | HighCharts | d3.js | Chart.js

  Ionic 4图表与— Google图表 | 高图 | d3.js | Chart.js

• Ionic 4 Social Logins — Facebook | Google | Twitter

  Ionic 4社交登录— Facebook | Google | 推特

• Ionic 4 Authentications — Via Email | Anonymous

  Ionic 4身份验证— 通过电子邮件 | 匿名

• Ionic 4 Features — Geolocation | QR Code reader | Pedometer

  Ionic 4的功能— 地理位置 | QR码阅读器 | 计步器

• Media in Ionic 4 — Audio | Video | Image Picker | Image Cropper

  Ionic 4中的媒体— 音频 | 影片 | 图像选择器 | 图像裁剪器

• Ionic 4 Essentials — Native Storage | Translations | RTL

  Ionic 4 Essentials —本机存储 | 翻译 | RTL

• Ionic 4 messaging — Firebase Push | Reading SMS

  Ionic 4消息传递— Firebase推 | 阅读短信

• Ionic 4 with Firebase — Basics | Hosting and DB | Cloud functions

  带Firebase的Ionic 4 — 基础知识 | 托管和数据库 | 云功能

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

如果您需要基础来启动下一个Ionic 5应用程序，则可以使用Ionic 5 Full App制作下一个很棒的应用程序

Ionic 5 Full App starter from Enappd

来自Enappd的Ionic 5 Full App入门

翻译自: https://medium.com/enappd/implement-local-notifications-in-ionic-5-with-capacitor-ac56183cdcff

ionic本地存储