メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Web Push Quickstart: Firebase and Twilio Notify

With just a few lines of code and a couple API keys, your application can set up Push Notifications using Twilio Notify, Google Firebase and your choice of web language. We have code for you to stand up a server in C#, Node.js, PHP, Python, Ruby, and Java.

In this Quickstart, you will:

  1. Sign up for Twilio Notify
  2. Create a Google Firebase Project and create credentials
  3. Set up Notify with your credentials
  4. Set up a sample "backend" server
  5. Run a toy "frontend" server
  6. Configure push notifications
  7. Run the app and test push notifications

Sign up for or sign into Twilio

Before you can send push notifications with Notify and Firebase, you'll need to sign up for a Twilio account or sign into your existing account.

For now, that's about it - you'll need to set up an account with Firebase and get FCM credentials before you can move forward with the app. Leave the Twilio tab open and move to the next step.

Create a project on Google Firebase

If you haven't yet, sign up for Google's Firebase. We'll be using it as the base for our notification today. To use push notifications for your web apps, create a project on the Firebase Console:

Create A Firebase Project

Find your Firebase secret key

In Firebase, the FCM Secret is called the Server Key and you can find it in your Firebase console under your Project Settings and Cloud Messaging tab.

firebase-cloud-messaging-tab

Save your Firebase key with Twilio

Once you have the secret, next you need to create a credential on the Add a Push Credential page on the Twilio Console using the FCM Secret.

Give it a memorable name and paste the FCM Server Key into the "FCM Push Credentials" text box:

notify-credential-web-push

Configure Notify

In the Notify console, create a new Notify service. Inside the new service in the FCM Credential SID dropdown, select the Credential that you have just created.

Make a note of the Service SID. You will use it later when you start writing code.

notify_service_configuration_webpush

Create Twilio API Keys

In order to authenticate your requests to Twilio API, you need to create a API Key. If you have already been using Twilio and have created API Keys, you can skip this step.

In Console, go to https://www.twilio.com/console/runtime/api-keys and hit ‘+’ to create a new API key. Give your new key a Friendly Name and choose the “Standard” type. Hit the "Create API Key" button to generate the key.

The generated Secret is shown only once, store it in secure place. You will not be able to see the secret in the Console later. (If you do miss it, you can generate a new service).

twilio_new_api_key

Gather your Twilio account information

Next, we need to grab all the necessary information from our Twilio account. Here's a list of what we'll need to gather:

設定値

説明

Notify Service Instance SID

アプリケーションのすべてのデータが保存されスコープ範囲にあるServiceインスタンスです。 Console上で作成できます。

Account SID

REST API リクエストの認証に使用します。コンソールのここで確認します

API Key

Used to authenticate REST API requests - SID (SKxxx..). It can be found here: https://www.twilio.com/console/runtime/api-keys/

API Secret

Used to authenticate REST API requests. Hopefully you stored it, but if not create a new API Key here.

Set up the backend server

When using the Notify service, you need to register devices to receive notifications and then send notifications to those devices. To get you going quickly, we've created backend servers for the following languages:

サンプルモバイルAppはサーバー側アプリケーションと通信を行い、通知のためにデバイスを登録します。

For this example we'll use the Node.js server. Feel free to copy our choice or follow along in the language you prefer.

Node.jsをインストールする

Follow the Node.js installation instructions here and complete the installation.

Download the Node.js server app and unzip it

Download the Node.js server app and unzip it, or get it uncompressed from GitHub

Configure and run the server app on your machine

これで、Node.jsがインストールされ、Node.jsサーバーがダウンロード、展開できたので、ここでご自身のアカウント情報でサーバーの構成を行います。

  1. Copy the .env.example file to .env
  2. Next, edit the .env file to include the four configuration parameters (Account SID, API Key SID, API Key Secret, Notify Service SID) we gathered from above.

Notifyの環境設定

Now we need to install our dependencies.

In a Terminal window, navigate to the folder where you unzipped or downloaded the app and run:

npm install

設定が完了したら、サーバーを起動する準備は完了です - 再度ターミナルで下記を実行します:

npm start

To confirm the server is running, visit http://localhost:3000 in your web browser. You should see the home screen, informing you of which Twilio services you've configured.

Twilio SDKスターターホーム画面

Set up the Twilio Notify sample Web Push Notification app

Get the Twilio Notify sample Web Push app

To get you going quickly, we provide a Web Push sample app, available on GitHub.

Configure Web Push Notifications

If you haven't done it yet, follow this guide to configure Web Push Notifications for the Twilio Notify sample Web Push app.

Next, you'll need to collect the Firebase Sender ID and Web API Key and configure the demo app for your Firebase project. To obtain these keys, go to the Firebase Console and open your Project Settings.

  • Navigate to General tab. From here, copy the Web API Key:

Firebase Settings General

  • Navigate to Cloud Messaging tab and get the Sender ID:

Firebase Settings Cloud Messaging Sender Id

  • Use the obtained keys to modify 2 files in the project

index.html:

        
        
        
        
        Use Notify and Firebase to create push notifications

        Firebase Push Notifications

        Use Notify and Firebase to create push notifications

        firebase-messaging-sw.js:

              
              
              
              
              Initialize Firebase in JavaScript

              Firebase Notify Integration

              Initialize Firebase in JavaScript

              Create a Binding for Web Push Notifications (FCM)

              Next we need to create a binding between a Identity and the browser using the web app. The Identity can be any unique identifier you choose, for example a GUID. You can find out more about Identity and Bindings in the Binding resource reference API.

              Refresh (or open) the Web Push App at http://localhost:8000/

              Notify Web Push Quickstart App Create Binding

              デバッガーモードでサンプルAppを実行していてそれが失敗する場合、コンソールにエラーメッセージが表示されます。

              Note: If you do not see a device token in the Address bar the first time you launch the app, reload the page. The demo app code is naive and doesn't handle the race between the App asking for and obtaining a token. Additionally, check the browser console for misconfiguration issues or hints.

              アイデンティティーに個人を識別できる情報を使用しないでください

              Notify uses Identity as the unique identifier of a user. Do not use directly identifying information (personally identifiable information or PII) such as a person's name, home address, email address, phone number, et cetera, as the Identity. The system that will process this attribute assumes it is not directly identifying information.

              In the app enter the Identity you chose and click the button "Create Binding".

              This action creates a Binding which uniquely identifies a user on a certain device running your application.

              In the terminal window running the “backend” (Node.js) server, you should see something like this:

              BindingInstance {
                _version: 
                 V1 {
                   _domain: 
                    Notify {
                      twilio: [Object],
                      baseUrl: 'https://notify.twilio.com',
                      _v1: [Circular] },
                   _version: 'v1',
                   _credentials: undefined,
                   _services: 
                    { [Function: ServiceListInstance]
                      _version: [Circular],
                      _solution: {},
                      _uri: '/Services',
                      create: [Function: create],
                      each: [Function: each],
                      list: [Function: list],
                      page: [Function: page],
                      get: [Function: get] } },
                sid: 'BSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                accountSid: 'ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
                serviceSid: 'ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
                dateCreated: 2017-01-17T13:07:39.000Z,
                dateUpdated: 2017-01-17T13:07:39.000Z,
                notificationProtocolVersion: '3',
                endpoint: 'user9999999XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                identity: 'Bob Builder',
                bindingType: 'fcm',
                address: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                tags: [],
                url: 'https://notify.twilio.com/v1/Services/ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Bindings/BSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                _context: undefined,
                _solution: 
                 { serviceSid: 'ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
                   sid: 'BSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' } }
              

              Now that we have the Binding, we are ready to send a Push Notification.

              プッシュ通知をAppに送信する

              To send a notification, you can use the Notify page on the “backend” service you have running at http://localhost:3000/. Go ahead and click the "Notify" button at the bottom of the home page to go to the Notify page.

              On this page, send a message to the identity you used in the app. Because you registered a binding with Twilio, the server will send your device the message as a notification.

              And that's all there is to it! You've not got a "frontend" and a "backend" app which can send push notifications using Notify and Firebase, and you're ready to go off and build your own application. We can't wait to see what you build - notify us when you've got something.

              Rate this page:

              ヘルプが必要ですか?

              We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.