Jak přidat oznámení Push v Angular

Není žádným tajemstvím, že push notifikace vám mohou pomoci zaujmout a udržet uživatele aplikace. V tomto tutoriálu vám ukážeme, jak se integrovat s OneSignal, abyste mohli využívat push notifikace ve vaší aplikaci Angular.

OneSignal &Push API vašeho prohlížeče

Push API prohlížeče dává webovým aplikacím možnost přijímat zprávy ze serveru bez ohledu na to, zda je webová aplikace v popředí nebo je aktuálně načtena v uživatelském agentovi. To vám umožní doručovat asynchronní oznámení a aktualizace uživatelům, kteří se přihlásí, což vede k lepší interakci s aktuálním novým obsahem.

Tento návod se bude zabývat tím, jak integrovat oznámení OneSignal Push Notifications do vaší aplikace pomocí našeho typického procesu nastavení. První část této příručky se zabývá procesem nastavení OneSignal. Druhá část této příručky popisuje, jak se integrovat s Angular pomocí základní metody nastavení. Třetí část pokrývá pokročilou metodu nastavení, kterou můžete implementovat po dokončení základního nastavení. Pokročilé nastavení odemkne ještě více možností přizpůsobení zpráv a automatizace pro váš web nebo aplikaci.

Přehled průvodce

• Část 1:Nastavení účtu OneSignal
• Webová konfigurace
• Část 2:Nastavení rychlého oznámení push v Angular
• Povolit oznámení Web Push
• Posílat oznámení Web Push
• Část 3:Pokročilé nastavení push notifikace v Angular

Tento tutoriál vyžaduje určité základní znalosti Angular. Používám Angular 11.2 a NodeJS verze 14.0 . Pokud Angular nemáte, vytvořte nový Angular projekt pomocí Angular CLI.

Další zdroje úhlového nastavení:

• Rychlé úhlové nastavení
• Pokročilé nastavení úhlu

Část 1:Nastavení účtu OneSignal

Chcete-li začít, přihlaste se ke svému účtu OneSignal nebo si vytvořte bezplatný účet. Poté klikněte na modré tlačítko s názvem Nová aplikace/webová stránka ke konfiguraci účtu OneSignal tak, aby vyhovoval vaší aplikaci nebo webu.

Zadejte název své aplikace nebo webu. Vyberte Web Push jako vaši platformu.

Klikněte na modré tlačítko s názvem Další:Konfigurace platformy .

Webová konfigurace

V části Vyberte integraci , vyberte Typický web možnost.

V _ Nastavení webu _, zadejte vámi zvolenou konfiguraci webu. V mém případě vypadá konfigurace takto:

Upozornění pro účely testování Zadávám svou adresu URL localhost (http://localhost:4401). Pokud děláte totéž, nezapomeňte kliknout na MÍSTNÍ TESTOVÁNÍ volba. Tím zajistíte, že bude HTTP localhost pro testování považován za HTTPS.

V části _ Nastavení výzvy k povolení , pod _ Akce uvidíte tři svislé modré tečky _ záhlaví na pravé straně obrazovky. Klikněte na modré tečky a vyberte **_Upravit ** z rozbalovací nabídky.

Otevře se okno s konfigurací naší push notifikace Slide Prompt. Potvrďte, že Automatická výzva je povoleno (přepnuto doprava).

V části _ Zobrazit kdy , můžete změnit druhý přírůstek a změnit tak dobu, po kterou bude výzva k zobrazení snímku zpožděna poté, co uživatel navštíví vaši stránku. Můžete to nechat tak, jak je, nebo můžete zkrátit sekundy, aby se vaše výzva objevila dříve. Jakmile zadáte zvolený přírůstek zpoždění, klikněte na šedé **_Done ** tlačítko umístěné v pravém dolním rohu okna.

Po kliknutí na _ Hotovo _, přejděte dolů na konec stránky a klikněte na _ Uložit _ pro uložení vašich automatických výzev.

Budete přesměrováni na jinou stránku s důležitým krokem:Stažením souborů SDK. Klikněte na STÁHNOUT SOUBORY ONESIGNAL SDK a uložte je do počítače, abyste je mohli později načíst.

V části s názvem Přidat kód na web , uvidíte šedé tlačítko, které vám umožní zkopírovat fragment kódu. Klikněte na šedou ikonu _ ZKOPÍROVAT KÓD _.

Část 2:Nastavení rychlého oznámení Push In Angular

Ve složce projektu Angular přejděte na index.html soubor. Uvnitř head HTML tag, vložte kód, který jste dříve zkopírovali ze stránky OneSignal.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
        OneSignal.init({
            appId: "YOUR-APP-ID",
        });
    });
</script>

Nyní vyhledejte soubory SDK, které jste si stáhli do počítače, a vložte je do src složku vaší aplikace Angular.

Poté, co vložíte soubory SDK do svého projektu Angular, budete muset Angular upozornit na tyto soubory SDK. Chcete-li to provést, otevřete soubor angular.json a vyhledejte vlastnost architektury . Uvnitř této vlastnosti uvidíte další vlastnost nazvanou aktiva, ve spodní části této vlastnosti přidejte umístění sad OneSignal SDK.

Váš angular.json by měl vypadat takto:

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/OneSignalSDKUpdaterWorker.js",
              "src/OneSignalSDKWorker.js",
            ],

Povolit oznámení Web Push

Spusťte aplikaci Angular a navštivte svůj web. Po vámi zvoleném intervalu zpoždění by se měla zobrazit následující výzva:

Klikněte na modré Povolit pro aktivaci push notifikací ve vašem prohlížeči.

Odesílat upozornění Web Push

Je čas odeslat vaše první webové oznámení push! Chcete-li tak učinit, přihlaste se ke svému účtu OneSignal a přejděte na Dashboard tab. Na stránce řídicího panelu klikněte na modré tlačítko s nápisem New Push .

Budete přesměrováni do nového okna, které vám umožní přizpůsobit oznámení push. V části Publikum , ujistěte se, že _ Odeslat přihlášeným uživatelům _ je vybráno. Poté vytvořte zprávu přidáním názvu zprávy, obsahu a obrázku. Protože se jedná o první oznámení, které vaši odběratelé obdrží, můžete se rozhodnout vytvořit jednoduchou uvítací zprávu, abyste potvrdili, že jsou přihlášeni k odběru, a posílí hodnotu, kterou oznámení poskytnou.

V části Plán doručení vyberte _ Okamžitě _ a Odeslat všem současně odeslat všem vašim aktuálním webovým odběratelům push. Pokud jste právě dokončili nastavení svého OneSignal účtu, je pravděpodobné, že jste první a jediný předplatitel. Pokud je vaše aplikace nebo webové stránky silně navštěvované a ostatní uživatelé se již přihlásili k odběru oznámení push, můžete vybrat možnost Odeslat konkrétním segmentům otestovat své sdělení na konkrétním publiku. Až budete připraveni zprávu odeslat, klikněte na modré _ Zkontrolovat a odeslat _ ve spodní části obrazovky.

Zobrazí se malé vyskakovací okno, abyste si mohli zprávu zkontrolovat. Až budete spokojeni, klikněte na modré _ Odeslat zprávu _ knoflík. Na vašem zařízení byste měli obdržet webové oznámení push! 🚀

Část 3:Pokročilé nastavení oznámení Push In Angular

Pokud chcete mít možnost používat OneSignal v celé vaší aplikaci Angular, proveďte tyto pokročilé kroky nastavení push notifikace po dokončení rychlého nastavení push notifikace.

Uvnitř vašeho index.html soubor, odstraňte následující kód:

<script>
window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
        OneSignal.init({
            appId: "YOUR-APP-ID",
        });
});
</script>

V kořenové složce vytvořte nový soubor s názvem globals.ts . Do tohoto souboru vložíte následující kód:

export{}
declare global {
    interface Window {
        OneSignal: any;
    }
}

Výše uvedený kód vám umožní používat window.OneSignal objekt bez spouštění jakýchkoli chyb TS a kompilátoru. Nyní, když máte globals.ts vytvořený soubor, importujte jej do polyfills.ts soubor.

import 'globals';

Nyní je čas vytvořit si službu OneSignal uvnitř vaší aplikace Angular. Vytvořil jsem jeden pomocí Angular CLI. Název mého souboru služby je one-signal.service.ts . Po vytvoření služby vytvoříte onLoad() metoda, která zajistí, že skript SDK, který jsme přidali, do index.html byl načten, protože se jedná o asynchronní operaci.

async onLoad(): Promise<any> {
    window.OneSignal = window.OneSignal || [];
    return new Promise((resolve) => {
        window.OneSignal.push(function() {
            resolve(window.OneSignal);
        });
    });
}

Ve službě OneSignal vytvořte novou metodu s názvem onInit() . Uvnitř metody zavoláte onLoad() a inicializujete OneSignal.

onInit():void {
    this.onLoad().then((OneSignal)=>{
        OneSignal.init({
            appId: "YOUR-APP-ID",
        });
    });
}

Dále otevřete app.component.ts soubor a vložení služeb OneSignal, které jste právě vytvořili. Uvnitř gOnInit() , zavolejte onInit() metodou z vaší služby OneSignal. Váš soubor bude vypadat takto:

import { Component, OnInit } from '@angular/core';
import { OneSignalService } from './one-signal.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
    title = 'OneSignal-Angular';

    constructor(private os: OneSignalService){}

    ngOnInit() {
        this.os.onInit();
    }
}

Nyní můžete svůj kód neustále rozšiřovat, abyste mohli využívat různé funkce OneSignal SDK ve vaší aplikaci Angular. Chcete-li se dozvědět více o Web Push SDK, navštivte naši dokumentaci k Web Push SDK.