Wie man das nativescript-ssi-local-notifications Plugin installiert und verwendet (2023)

Das nativescript-ssi-local-notifications Plugin ermöglicht es Ihrer App, Benachrichtigungen anzuzeigen, wenn die App nicht ausgeführt wird. Es ist ähnlich wie bei Remote-Push-Benachrichtigungen, aber viel einfacher einzurichten. Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie das Plugin installieren und verwenden können:

Installation

Öffnen Sie die Befehlszeile und navigieren Sie zum Stammordner Ihrer App.
Führen Sie den folgenden Befehl aus, um das Plugin hinzuzufügen: tns plugin add nativescript-ssi-local-notifications.

TypeScript-Unterstützung

Um TypeScript-Unterstützung für Ihre NativeScript-App hinzuzufügen, führen Sie den folgenden Befehl aus: tns install typescript.

Verwendung des Plugins

Nachdem Sie das Plugin installiert haben, können Sie es in Ihrer .ts-Datei wie folgt importieren:

import * as LocalNotifications from "nativescript-ssi-local-notifications";

Sie können das Plugin dann wie folgt verwenden:

LocalNotifications.hasPermission()
  .then(function(hasPermission) {
    // Überprüfen Sie, ob die Berechtigung für Benachrichtigungen vorhanden ist
    if (!hasPermission) {
      // Fordern Sie die Berechtigung an
      LocalNotifications.requestPermission().then(function(granted) {
        if (granted) {
          // Berechtigung erteilt, Benachrichtigungen können gesendet werden
        } else {
          // Berechtigung verweigert
        }
      });
    } else {
      // Berechtigung bereits erteilt, Benachrichtigungen können gesendet werden
    }
  })
  .catch(function(error) {
    // Fehler beim Überprüfen der Berechtigung
  });

Beispielanwendung (XML)

Wenn Sie einen schnellen Einstieg wünschen, können Sie unsere Demo-App klonen.

Beispielanwendung (Angular)

Dieses Plugin ist Teil der Plugin-Showcase-App, die ich mit Angular erstellt habe.

Planen von Benachrichtigungen

Um eine Benachrichtigung zu planen, müssen Sie die schedule-Funktion des Plugins aufrufen. Hier ist ein Beispiel:

LocalNotifications.schedule([
  {
    id: 1,
    title: 'Der Titel',
    body: 'Wiederholt sich alle Minute, bis abgebrochen',
    ticker: 'Der Ticker',
    badge: 1,
    groupedMessages: [
      'Die erste',
      'Zweite',
      'Mach weiter',
      'Noch eine..',
      'OK, stopp'
    ],
    groupSummary: 'Zusammenfassung der gruppierten Nachrichten oben',
    ongoing: true,
    smallIcon: 'res://heart',
    interval: 'minute',
    sound: require('application').ios
      ? 'customsound-ios.wav'
      : 'customsound-android',
    at: new Date(new Date().getTime() + 10 * 1000) // 10 Sekunden ab jetzt
  }
])
  .then(function() {
    console.log('Benachrichtigung geplant');
  })
  .catch(function(error) {
    console.log('Fehler bei der Planung: ' + error);
  });

Benachrichtigungssymbole

Hintergrundinformationen: Lokale Benachrichtigungen können still scheitern, wenn Sie die Benachrichtigungssymbole nicht in den richtigen Abmessungen bereitstellen. Sie können auf einem Gerät einwandfrei funktionieren, auf einem anderen jedoch fehlschlagen. Das liegt daran, dass Android möglicherweise auf Ihr xxxhdpi-Launcher-Symbol zurückgreift, das zu groß ist. Dieser Fehler ist im Logcat erkennbar: !!! FAILED BINDER TRANSACTION !!! (Paketgröße = 1435376).

Spezifikation für ic_stat_notify.png (smallIcon):

mdpi: 48 x 48 px
hdpi: 72 x 72 px
xhdpi: 96 x 96 px
xxhdpi: 144 x 144 px
xxxhdpi: 192 x 192 px

Spezifikation für ic_notify.png (largeIcon):

mdpi: 64 x 64 px
hdpi: 96 x 96 px
xhdpi: 128 x 128 px
xxhdpi: 192 x 192 px
xxxhdpi: 256 x 256 px

Hinzufügen eines Callbacks für empfangene Benachrichtigungen

Wenn Sie wissen möchten, auf welche Benachrichtigung der Benutzer geklickt hat, können Sie die addOnMessageReceivedCallback-Funktion verwenden. Hier ist ein Beispiel:

LocalNotifications.addOnMessageReceivedCallback(function(notification) {
  console.log('ID: ' + notification.id);
  console.log('Titel: ' + notification.title);
  console.log('Text: ' + notification.body);
})
  .then(function() {
    console.log('Listener hinzugefügt');
  })
  .catch(function(error) {
    console.log('Fehler beim Hinzufügen des Listeners: ' + error);
  });

Abrufen der geplanten IDs

Wenn Sie die IDs aller geplanten Benachrichtigungen abrufen möchten, können Sie die getScheduledIds-Funktion verwenden. Hier ist ein Beispiel:

LocalNotifications.getScheduledIds()
  .then(function(ids) {
    console.log('IDs: ' + ids);
  })
  .catch(function(error) {
    console.log('Fehler beim Abrufen der IDs: ' + error);
  });

Abbrechen einer Benachrichtigung

Wenn Sie eine zuvor geplante Benachrichtigung abbrechen möchten (und die ID kennen), können Sie sie mit der cancel-Funktion abbrechen. Hier ist ein Beispiel:

LocalNotifications.cancel(5 /* die ID */)
  .then(function(foundAndCanceled) {
    if (foundAndCanceled) {
      console.log('OK, sie ist weg!');
    } else {
      console.log('Keine ID 5 wurde geplant');
    }
  })
  .catch(function(error) {
    console.log('Fehler beim Abbrechen: ' + error);
  });

Alle Benachrichtigungen abbrechen

Wenn Sie alle zuvor geplanten Benachrichtigungen abbrechen möchten, können Sie die cancelAll-Funktion verwenden. Hier ist ein Beispiel:

LocalNotifications.cancelAll();

Berechtigung anfordern

Auf Android benötigen Sie keine Berechtigung, aber auf iOS schon. Android gibt einfach true zurück. Wenn die requestPermission- oder schedule-Funktion zuvor ausgeführt wurde, wurde der Benutzer bereits aufgefordert, die Berechtigung zu erteilen. Wenn der Benutzer die Berechtigung erteilt hat, gibt diese Funktion true zurück. Wenn der Benutzer die Berechtigung verweigert hat, gibt diese Funktion false zurück. In diesem Fall muss der Benutzer zur iOS-Einstellungs-App gehen und die Berechtigungen für Ihre App manuell aktivieren. Hier ist ein Beispiel:

LocalNotifications.requestPermission()
  .then(function(granted) {
    console.log('Berechtigung erteilt? ' + granted);
  })
  .catch(function(error) {
    console.log('Fehler beim Anfordern der Berechtigung: ' + error);
  });

Berechtigung überprüfen

LocalNotifications.hasPermission()
  .then(function(granted) {
    console.log('Berechtigung erteilt? ' + granted);
  })
  .catch(function(error) {
    console.log('Fehler beim Überprüfen der Berechtigung: ' + error);
  });

Zukünftige Arbeiten

Lassen Sie uns wissen, was Sie benötigen, indem Sie ein Github-Issue öffnen. Wir denken darüber nach, Unterstützung für Dinge wie interaktive Benachrichtigungen auf iOS hinzuzufügen.