Início rápido do SDK do Capacitor

Comece a usar o SDK do Capacitor da Pushwoosh com este exemplo rápido e simples

Pré-requisitos

Para integrar o SDK do Capacitor da Pushwoosh em seu aplicativo, você precisará do seguinte:

Requirements

• A Pushwoosh account.
• A Pushwoosh project set up in your account.
• For iOS integration:
  • An iOS platform configured to send push notifications. We recommend using the Token-Based Authentication configuration as the simplest approach.
  • During setup, set the Gateway to Sandbox to send pushes to a simulator.
• For Android integration:
  • A configured Android platform
  • The project number(also known as Sender ID) , google-services.json file and package name from your Firebase project.
  • A Firebase project connected to your Android application. Follow the Firebase setup guide if needed.
• Your Pushwoosh Application Code and Pushwoosh Device API Token from the Pushwoosh Control Panel for your application.

Baixe o projeto de exemplo

Clone o repositório do SDK:

git clone https://github.com/Pushwoosh/pushwoosh-capacitor-plugin.git

Navegue até o diretório do plugin:

cd pushwoosh-capacitor-plugin

Compile o plugin

Antes de executar o aplicativo de exemplo, você precisa compilar o plugin do Capacitor.
Instale as dependências do plugin:

npm i

Compile o plugin:

npm run build

Configure o aplicativo de exemplo

Navegue até o diretório do aplicativo de exemplo:

cd example

Instale as dependências do aplicativo:

npm i

Compile os ativos da web:

npm run build

Abra src/js/example.js e atualize a chamada Pushwoosh.onDeviceReady:

Pushwoosh.onDeviceReady({
    projectid: "__YOUR_FCM_SENDER_ID__",
    appid: "__YOUR_APP_CODE__"
});

Onde:

__YOUR_APP_CODE__ é o código do aplicativo do Painel de Controle da Pushwoosh. __YOUR_FCM_SENDER_ID__ é o número do projeto do Firebase do Console do Firebase.

iOS

1. Instale as dependências do CocoaPods

Navegue até o diretório da plataforma iOS e instale as dependências do CocoaPods:

cd ios/App
pod install --repo-update
cd ../..

2. Sincronize o Capacitor com o iOS

Após instalar o CocoaPods, sincronize a configuração do Capacitor:

npx cap sync ios

3. Abra o projeto iOS

Abra o projeto no Xcode:

npx cap open ios

4. Defina o Bundle Identifier

No Xcode, defina o Bundle Identifier para o nome do pacote do seu aplicativo (por exemplo, com.example.pushwoosh).

5. Adicione as capabilities

Para habilitar as Notificações Push, você precisa adicionar certas capabilities.

Na seção Signing & Capabilities, adicione as seguintes capabilities:

• Push Notifications
• Background Modes. Após adicionar esta capability, marque a caixa para Remote notifications.

6. Defina o Token da API

Abra ios/App/App/Info.plist no Xcode e adicione a seguinte entrada com seu Token da API de Dispositivo da Pushwoosh:

Info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__YOUR_PUSHWOOSH_DEVICE_API_TOKEN__</string>

Android

1. Sincronize o Capacitor com o Android

Sincronize a configuração do Capacitor com a plataforma Android:

npx cap sync android

2. Configure o google-services.json

Copie seu arquivo google-services.json para o diretório android/app.

3. Defina o nome do pacote

Abra android/app/build.gradle e defina o applicationId para o nome do pacote do seu aplicativo (por exemplo, com.example.pushwoosh).

4. Defina o Token da API

Abra seu arquivo android/app/src/main/AndroidManifest.xml e adicione os seguintes metadados dentro da tag <application>:

AndroidManifest.xml

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_PUSHWOOSH_DEVICE_API_TOKEN__" />

Substitua __YOUR_PUSHWOOSH_DEVICE_API_TOKEN__ pelo seu Token da API de Dispositivo da Pushwoosh.

5. Abra o projeto Android

Abra o projeto no Android Studio:

npx cap open android

Execute o projeto

1. Compile e execute o projeto.
2. Toque no botão “Click Me!”.
3. Conceda permissão para notificações push. O dispositivo será registrado na Pushwoosh.

Envie uma notificação push

Volte para o Painel de Controle da Pushwoosh e envie uma notificação push para o seu dispositivo registrado.