Share
I denne opplæringen skal du lære om Ionic Push, en ionisk tjeneste som gjør det enkelt å sende push notifikasjoner til brukerne dine.
Ionic Push lar deg sende push notifications til brukerne av appen din. Disse kan utløses når du velger. For eksempel, når det er brukerens bursdag, kan du automatisk sende dem et trykkvarsel for å hilse på dem.
Ionic Push tjener som mellommann mellom brukerens enhet og Firebase Cloud Messaging. Det første trinnet er at appen skal sende enhetstoken til Ionic Push-serveren. Denne enhetstoken tjener som en ID som refererer til den bestemte enheten. Når serveren har det token, kan de nå sende en forespørsel til Firebase Cloud Messaging-serveren for å sende en push-melding til enheten. På hver Android-enhet kjører en Google Play-tjeneste, kalt tjenesten Google Cloud Messaging. Dette gjør det mulig for enheten å motta push notifications fra Firebase Cloud Messaging-plattformen.
Her er et diagram som viser trykkvarslingsflyten:
Du skal bygge en enkel app som kan motta push notifications via Ionic Push. Det vil også bruke Ionic Auth-tjenesten til å logge brukere inn. Dette gjør at vi kan prøve ut målrettede push-varsler som kun vil sende meldingene til bestemte brukere. Appen har to sider: påloggingssiden og bruker siden. Brukere bør kun kunne motta varsler når de er logget inn.
For å gi deg en ide om hvordan meldingene skulle se ut, er det et skjermbilde av meldingen som mottas mens appen er åpen for øyeblikket:
På den annen side er det et varsel som ser ut når appen er stengt:
I denne delen konfigurerer vi Firebase og Ionic Cloud-tjenestene for å tillate push notifications. Push notifications i Android håndteres hovedsakelig av Firebase Cloud Messaging Service. Ionic Push er bare et lag på toppen av denne tjenesten som gjør det lettere å jobbe med push notifications i ioniske apps.
Det første trinnet er å skape et nytt Firebase-prosjekt. Du kan gjøre det ved å gå til Firebase Console og klikke på Legg til prosjekt knapp. Du ser følgende skjema:
Skriv inn navnet på prosjektet og klikk på Opprett prosjekt knapp.
Når prosjektet er opprettet, blir du omdirigert til prosjektdashboardet. Derfra, klikk på tannhjulikonet rett ved siden av Oversikt fanen og velg Prosjektinnstillinger.
På innstillingssiden klikker du på Cloud Messaging fane. Der finner du Server nøkkel og avsenders ID. Legg merke til disse som du vil trenge dem senere.
Deretter må du opprette en jonisk app på den joniske nettsiden. Dette gjør at du kan jobbe med Ionic Push-tjenesten og andre ioniske tjenester også. Hvis du ikke allerede har en jonisk konto, kan du opprette en ved å registrere deg. Når du har opprettet en konto, blir du omdirigert til dashbordet der du kan opprette en ny app.
Når appen din er opprettet, gå til innstillinger > sertifikater og klikk på Ny sikkerhetsprofil knapp. Skriv inn et beskrivende navn for Profil navn og sett Type til Utvikling for nå:
Sikkerhetsprofiler fungerer som en måte å sikkert lagre Firebase Cloud Messaging-legitimasjonene du fikk tidligere. Når den er opprettet, vil den bli oppført i et bord. Klikk på Redigere knappen ved siden av den nyopprettede sikkerhetsprofilen. Klikk deretter på Android fane. Lim inn verdien for Server nøkkel som du tidligere fikk fra Firebase-konsollen til FCM-servernøkkel felt. Til slutt klikker du på Lagre for å lagre endringene.
Opprett et nytt Ionic 2-prosjekt ved hjelp av blankemalen:
ionisk start - v2 pushApp blank
Når prosjektet er opprettet, installer du phonegap-plugin-trykk plugg inn. Lever Sender-IDen du fikk fra Firebase-konsollen tidligere:
cordova plugin legg til phonegap-plugin-push - variabelt SENDER_ID = YOUR_FCM_SENDER_ID - lagre
Deretter må du installere Ionic Cloud-plugin. Dette gjør det enkelt å jobbe med ioniske tjenester i appen:
npm installere @ ionic / cloud-angular - save
Til slutt må du oppdatere de joniske config-filene, slik at ionisk vet at dette bestemte prosjektet skal tilordnes den joniske appen du opprettet tidligere. Du kan gjøre det ved å kopiere app-ID-en på din ikoniske dashboardside. Du kan finne app-IDen rett under navnet på appen. Når du har kopiert det, åpner du .io-config.json og ionic.config.json filer og lim inn verdien for APP_ID.
Nå er du klar til å bygge appen. Det første du må gjøre er å brenne den ioniske utviklingsserveren slik at du umiddelbart kan se endringene når du utvikler appen:
ionisk servering
Når kompileringsprosessen er ferdig, gå til utviklingsadressen i nettleseren din.
Åpne src / app / app.module.ts fil og legg til innstillingene for appen (kjerne) og trykk på varsler (trykk). De APP_ID er IDen til den joniske appen du opprettet tidligere. De avsenders ID er avsender-IDen du tidligere fikk fra Firebase-konsollen. Under pluginConfig objekt, kan du eventuelt angi push notifikasjonsinnstillinger. Nedenfor setter vi bare inn lyd og vibrere innstillinger til ekte for å fortelle maskinvaren som den kan spille, pekemelding lyder eller vibrerer hvis enheten er i stille modus. Hvis du vil vite mer om hvilke konfigurasjonsalternativer som er tilgjengelige, kan du sjekke ut dokumentene på alternativene Push Notification for Android.
importer CloudSettings, CloudModule fra '@ ionic / cloud-angular'; const cloudSettings: CloudSettings = 'core': 'app_id': 'DIN IONIC APP ID',, 'push': 'sender_id': 'DITT FCM SENDER ID', 'pluginConfig': 'android' 'lyd': true, 'vibrate': true;
Deretter la Ionic vite at du vil bruke cloudSettings:
import: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ],
Standard hjemmesiden i den tomme malen vil fungere som innloggingssiden. Åpne sider / home / home.html fil og legg til følgende:
pushApp
For å holde ting enkelt, har vi bare en innloggingsknapp i stedet for et fullblåst påloggingsskjema. Dette betyr at legitimasjonene vi skal bruke til å logge inn, er innebygd i selve koden.
Deretter åpner du src / sider / home / home.ts fil og legg til følgende:
Accentsconagua
importer Komponent fra '@ vinkel / kjerne'; importer NavController, LoadingController, AlertController fra 'ionisk-vinkelformet'; importer Push, PushToken, Auth, User, UserDetails fra '@ ionic / cloud-angular'; importer UserPage fra '... / bruker-side / bruker-side'; @Component (selector: 'page-home', templateUrl: 'home.html') eksport klasse HomePage constructor (offentlig navCtrl: NavController, offentlig push: Push, offentlig varselCtrl: AlertController, offentlig loadingCtrl: LoadingController, offentlig auth: Auth, offentlig bruker: Bruker) if (this.auth.isAuthenticated ()) this.navCtrl.push (UserPage); logg inn () la loader = this.loadingCtrl.create (innhold: "Logg inn ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000); la detaljer: UserDetails = 'email': 'DIN IONISK AUTOMATISK BRUKER', 'Passord': "DITT IONISK AUTOMATISK BRUKERS PASSORD"; this.auth.login ('basic', detaljer) .then ((res) => this.push.register (). deretter ((t: PushToken) => returner this.push.saveToken (t); ) .then ((t: PushToken) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Push-registrering mislyktes ', subTitle:' Noe gikk galt med push notifications registrering. Vennligst prøv igjen. ', knapper: [' OK ']); alert.present (););, () => la varsel = dette .alertCtrl.create (title: 'Login failed', subTitle: 'Ugyldig legitimasjon. Vennligst prøv igjen.', knapper: ['OK']); alert.present ();); Ved å bryte ned koden ovenfor, importerer vi først de kontrollerne som trengs for å arbeide med navigasjon, lastere og varsler:
importer NavController, LoadingController, AlertController fra 'ionisk-vinkelformet';
Deretter importerer du tjenestene som trengs for å jobbe med Push and Auth.
importer Push, PushToken, Auth, User, UserDetails fra '@ ionic / cloud-angular';
Når de er lagt til, importerer du Bruker side. Kommenter det ut nå, siden vi ikke har opprettet den siden enda. Ikke glem å uncomment dette senere når bruker siden er klar.
// import UserPage fra '... / bruker-side / brukerside';
I konstruktøren, sjekk om den nåværende brukeren er autentisert. Naviger umiddelbart til bruker siden hvis de er:
konstruktør (offentlig navCtrl: NavController, offentlig push: Push, offentlig varselCtrl: AlertController, offentlig loadingCtrl: LoadingController, offentlig auth: Auth, offentlig bruker: Bruker) if (this.auth.isAuthenticated ()) this.navCtrl.push user);
For Logg Inn funksjon, vis lasteren og sett den til å automatisk avvises etter 5 sekunder. På denne måten hvis noe går galt med autentiseringskoden, blir brukeren ikke igjen med en uendelig lastingsanimasjon:
logg inn () la loader = this.loadingCtrl.create (innhold: "Logg inn ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Deretter logger brukeren inn med de hardkodede legitimasjonene til en bruker som allerede er lagt til i appen din:
la detaljer: UserDetails = 'email': 'DIN IONISK AUTOMATISK BRUKER', 'Passord': "DITT IONISK AUTOMATISK BRUKERS PASSORD"; this.auth.login ('basic', detaljer) .then ((res) => ..., () => let alert = this.alertCtrl.create (tittel: 'Innlogging mislyktes', subTitle: 'Ugyldig legitimasjon Vennligst prøv igjen. ', Knapper: [' OK ']); alert.present (););Hvis du ikke har en eksisterende bruker ennå, tillater det ioniske dashbordet deg ikke å opprette nye brukere, selv om du kan opprette flere brukere når du allerede har minst én bruker. Så den enkleste måten å opprette en ny bruker på er å ringe melde deg på() metode fra Auth-tjenesten. Bare uncomment påloggskoden ovenfor og erstatt den med den nedenfor. Vær oppmerksom på at du kan opprette brukeren fra nettleseren, siden e-post / passord autentiseringsskjema bare bruker HTTP-forespørsler.
this.auth.signup (detaljer) .then ((res) => console.log ('Brukeren ble opprettet!', res););Nå som du har en bruker som du kan logge på, kan du gå videre og fjerne registreringsnummeret og ikke legge inn påloggskoden.
Inne i suksess tilbakeringingsfunksjon for innlogging, må du ringe registrere() metode fra push-tjenesten. Dette avgjørende trinnet gjør at enheten kan motta push-varsler. Den stiller en forespørsel til Ionic Push-tjenesten for å få enhetstoken. Som nevnt i Hvordan det fungerer delen tidligere, tjener denne enhetstoken som en unik identifikator for enheten, slik at den kan motta push-varsler.
this.push.register (). then ((t: PushToken) => returner denne.push.saveToken (t);) deretter ((t: PushToken) => loader.dismiss (); this.navCtrl .push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Push-registrering mislyktes', subTitle: 'Noe gikk galt med push notifications registrering. Vennligst prøv igjen.' : ['OK']); alarm.present (););
Den gode tingen om Ionic Push er integrasjonen med Ionic Auth. Grunnen til at vi registrerer enhetstokenene rett etter å logge inn er på grunn av denne integrasjonen. Når du ringer til saveToken () Metoden, det er smart nok til å gjenkjenne at en bruker er logget inn. Så det tilordner denne brukeren automatisk til enheten. Dette lar deg da spesifikt sende et trykkvarsel til den brukeren.
Bruker siden er siden som mottar push notifications. Opprett den med den ioniske generere kommandoen:
ionisk g-siden brukerPage
Dette vil skape src / sider / user-side katalog med tre filer i den. Åpne bruker-side.html fil og legg til følgende:
Bruker side
For å holde ting enkelt, er alt vi har en knapp for å logge brukeren ut. Hovedformålet med denne siden er å motta og vise kun push notifications. Logg ut-knappen er ganske enkelt lagt til på grunn av behovet for å logge brukeren ut og teste om de fortsatt kunne motta varsler etter å ha logget ut.
Deretter åpner du bruker-page.ts fil og legg til følgende:
importer Komponent fra '@ vinkel / kjerne'; importer NavController, AlertController fra 'ionisk-vinkelformet'; importer Push, Auth fra '@ ionic / cloud-angular'; @Component (selector: 'page-user-page', templateUrl: 'user-page.html' eksportklasse UserPage constructor (offentlig navCtrl: NavController, offentlig trykk: Push, offentlig auth: Auth, offentlig varslingCtrl: AlertController) this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, knapper: ['OK'] ); alarm.present ();); logg ut () this.auth.logout (); this.navCtrl.pop ();
Koden ovenfor er ganske selvforklarende, så jeg går bare over den delen som omhandler varsler. Koden nedenfor håndterer varslene. Den bruker abonnere() Metode for å abonnere på innkommende eller åpne push-varsling. Når jeg sier "åpnet", betyr det at brukeren har tappet på varslingen i varslingsområdet. Når dette skjer, blir appen lansert, og tilbakeringingsfunksjonen du passerte til abonnere() metoden blir kalt. På den annen side skjer et innkommende push-varsel når appen er åpnet for øyeblikket. Når et trykkvarsel sendes, blir denne tilbakeringingsfunksjonen også kalt. Den eneste forskjellen er at den ikke lenger går til varslingsområdet.
this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, knapper: ['OK']); alert.present (););
For hvert varsel inneholder argumentet som sendes til tilbakeringingsfunksjonen gjenstanden nyttelast:
I koden ovenfor bruker vi bare tittel og tekst å levere som innholdet for varselet. Vi er ikke begrenset til bare varsler, men som du kan se fra skjermbildet ovenfor, er det dette nyttelast objekt som lagrer tilleggsdata som du vil overføre til hvert varsel. Du kan faktisk bruke disse dataene til å bestemme hva appen din skal gjøre når den mottar denne typen varsel. I eksemplet ovenfor, is_cat er satt til 1, og vi kan få appen til å endre bakgrunnen til et kattebilde hvis den mottar dette varselet. Senere i Sende Push Notifications avsnittet, lærer du hvordan du tilpasser nyttelastet for hvert varsel.
Nå er det på tide å teste appen på en enhet. Gå videre og legg til plattformen og bygg appen for den plattformen. Her bruker vi Android:
ionisk plattform legge android ionic build android
Kopier .apk fil inne i plattformer / android / bygge / utganger / apk mappe til enheten din og installere den.
Første gang jeg prøvde å kjøre bygge kommando, jeg fikk følgende feil:
Hvis du har samme feil, følg med. Hvis du ikke har oppdaget noen feil, kan du gå videre til neste del.
Problemet her er at SDK-komponentene nevnt ikke var installert, eller det kan være en viktig oppdatering som må installeres. Feilmeldingen er imidlertid litt misvisende, siden det bare sier at lisensavtalen må aksepteres.
Så for å løse problemet, start Android SDK installasjonsprogrammet og sjekk deretter Android Support Repository og Google Repository. Deretter klikker du på Installere knappen og godta lisensavtalen for å installere komponentene.
Nå som du har installert appen på enheten din, er det nå på tide å faktisk sende noen push-varsler. Her er noen scenarier som du kan teste ut:
Det første trinnet i å sende en push-varsling er å gå til din Ionic app dashboard og klikk på Trykk fane. Siden dette er første gang du bruker tjenesten, bør du se følgende skjermbilde:
Gå videre og klikk på Opprett din første Push knapp. Dette vil omdirigere deg til siden for å opprette et trykkvarsel. Her kan du angi navnet på kampanjen, tittelen og teksten i varselet, og eventuelle tilleggsdata du vil passere inn. Her setter vi inn is_cat til 1.
Deretter kan du eventuelt angi alternativer for push notification for iOS eller Android. Siden vi bare skal sende til Android-enheter, angir vi bare alternativene for Android:
Det neste trinnet er å velge brukerne som vil motta varselet. Her kan du velge Alle brukere hvis du vil sende varselet til alle enhetene som er registrert for push-varsler.
Hvis du bare vil sende til bestemte brukere, kan du også filtrere til dem:
Legg merke til at brukerlisten er fylt ut fra brukere som er registrert via Auth-tjenesten.
Det siste trinnet er å velge når du skal sende varselet. Siden vi bare tester, kan vi sende den umiddelbart. Klikk på Send dette Push knappen vil sende varselet til dine valgte brukere.
I denne opplæringen har du lært om Ionic Push og hvordan det gjør push notifikasjoner enklere å implementere. Gjennom det ioniske instrumentbrettet kunne du tilpasse varslene du sender til brukere. Det lar deg også velge hvilke brukere du vil sende varslene til.
Dette fungerer bra hvis du ikke allerede har en eksisterende backend. Men hvis du allerede har en tilbakestilling, kan du spørre hvordan du kan bruke Ionic Push med ditt eksisterende webprogram. Vel, svaret for det er den joniske HTTP API. Dette gjør at du kan sende en HTTP-forespørsel fra din server til ionisk server når en bestemt betingelse er oppfylt. Forespørselen som du sender vil da utløse en push-melding som skal sendes til brukerne. Hvis du vil lære mer, kan du sjekke ut dokumentene for den joniske push-tjenesten.
Og mens du er her, sjekk ut noen av våre andre kurs og opplæringsprogrammer på Ionic 2!
