Tuỳ chỉnh thông báo gửi qua tính năng Gửi thông báo trong ứng dụng của Firebase


Thông báo trong ứng dụng của Firebase cung cấp một tập hợp hữu ích các hành vi và loại thông báo được định cấu hình sẵn với giao diện mặc định, nhưng trong một số trường hợp, bạn có thể muốn mở rộng hành vi và nội dung thông báo. Tính năng Thông báo trong ứng dụng cho phép bạn thêm hành động vào thông báo và tuỳ chỉnh giao diện của thông báo.

Thêm một hành động vào thông báo

Với các hành động, bạn có thể sử dụng thông báo trong ứng dụng để chuyển hướng người dùng đến một trang web hoặc một màn hình cụ thể trong ứng dụng.

Firebase In-App Messaging sử dụng trình xử lý đường liên kết để xử lý các hành động. SDK có thể sử dụng một số trình xử lý, vì vậy, nếu ứng dụng của bạn đã có một trình xử lý, thì Firebase In-App Messaging có thể sử dụng trình xử lý đó mà không cần thiết lập thêm. Nếu chưa có trình xử lý, bạn có thể sử dụng Firebase Dynamic Links. Để tìm hiểu thêm, hãy đọc bài viết Tạo Đường liên kết động trên iOS.

Thêm hành động vào thông báo bằng bảng điều khiển Firebase

Sau khi ứng dụng có trình xử lý đường liên kết, bạn có thể soạn một chiến dịch có hành động.

  1. Trong bảng điều khiển Firebase, hãy chuyển đến DevOps & Engagement (DevOps và Tương tác) > Messaging (Nhắn tin).

  2. Chạy quy trình để thiết lập một chiến dịch mới:

    • Nếu đây là chiến dịch đầu tiên của bạn:

      1. Nhấp vào Tạo chiến dịch đầu tiên của bạn.
      2. Chọn Thông báo trong ứng dụng của Firebase rồi nhấp vào Tạo.
    • Nếu trước đây bạn đã tạo chiến dịch, hãy làm như sau:

      1. Trên thẻ Chiến dịch, hãy nhấp vào Chiến dịch mới.
      2. Chọn In-App Messaging.
  3. Làm theo hướng dẫn trên màn hình để thiết lập chiến dịch.

  4. Cung cấp Thẻ, Văn bản nút và Hành động nút, Hành động hình ảnh hoặc Hành động biểu ngữ, trong đó hành động là một đường liên kết sâu có liên quan.

Định dạng của hành động phụ thuộc vào bố cục thông báo mà bạn chọn. Cửa sổ bật lên có các nút hành động với nội dung văn bản, màu văn bản và màu nền có thể tuỳ chỉnh. Mặt khác, hình ảnh và biểu ngữ trên cùng có thể tương tác và gọi hành động được chỉ định khi người dùng nhấn vào.

Sửa đổi giao diện và trải nghiệm của thông báo

Firebase In-App Messaging cho phép bạn tuỳ chỉnh cách hiển thị thông báo để thay đổi cách ứng dụng hiển thị bố cục, kiểu phông chữ, hình dạng nút và các chi tiết khác của thông báo. Có hai cách để sửa đổi màn hình thông báo: sửa đổi màn hình mặc định Firebase In-App Messaging hoặc tạo thư viện màn hình thông báo của riêng bạn từ đầu.

Lưu ý: Sản phẩm này không dùng được trên macOS, Mac Catalyst, App Clip hoặc watchOS.

Sửa đổi màn hình mặc định

Cách đơn giản nhất để tuỳ chỉnh thông báo là xây dựng dựa trên mã hiển thị thông báo mặc định của Firebase In-App Messaging.

Sao chép kho lưu trữ firebase-ios-sdk

Để bắt đầu, hãy sao chép bản phát hành mới nhất của kho lưu trữ firebase-ios-sdk, rồi mở thư mục InAppMessaging.

Chọn loại thông báo cần sửa đổi

Sau khi sao chép kho lưu trữ, bạn có thể sửa đổi bất kỳ hoặc tất cả các loại thông báo Firebase In-App Messaging: Card, Modal, Banner và ImageOnly. Mỗi loại tương ứng với một bố cục thông báo trong quy trình tạo chiến dịch Firebase In-App Messaging.

Theo đó, mỗi loại có quyền truy cập vào một nhóm dữ liệu khác nhau, được xác định bằng các lựa chọn tuỳ chỉnh chiến dịch trong bảng điều khiển Firebase:

Loại titleText bodyText textColor backgroundColor imageData actionButton secondaryActionButton
Thẻ
Vải modal
Biểu ngữ
ImageOnly

Sửa đổi mã hiển thị thông báo

Bạn có thể sửa đổi các loại thông báo theo ý muốn, miễn là không vượt quá giới hạn. Bạn có thể tạo biểu ngữ hiển thị ở cuối ứng dụng, di chuyển nút hành động trên một phương thức, nhúng thông báo trong ứng dụng vào nguồn cấp dữ liệu của người dùng hoặc bất kỳ nội dung sửa đổi nào khác giúp giao diện của thông báo phù hợp với ứng dụng của bạn.

Có hai điều chính cần lưu ý khi sửa đổi cách hiển thị thông báo:

  • Thư mục loại thông báo: Mỗi loại thông báo có một thư mục riêng chứa các tệp xác định logic của loại thông báo đó:
  • Bảng phân cảnh: Thư viện InAppMessaging cũng có một tệp .storyboard giúp xác định giao diện người dùng cho cả ba loại thông báo:

Sửa đổi các tệp trong thư mục của loại thông báo bạn muốn và các phần tương ứng của .storyboard để tạo màn hình thông báo tuỳ chỉnh.

Cập nhật podfile để sử dụng mã InAppMessaging đã sửa đổi

Để Firebase In-App Messaging sử dụng màn hình thông báo đã sửa đổi thay vì màn hình mặc định, hãy cập nhật podfile để sử dụng thư viện InAppMessaging tuỳ chỉnh:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YourProject' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for YourProject
pod 'Firebase'

# Remove the default InAppMessaging pod:
# pod 'Firebase/InAppMessaging'

# Overwrite it with a version that points to your local copy:
pod `FirebaseInAppMessaging', :path => '~/Path/To/The/Cloned/Repo/'

end
Sau khi hoàn tất, bạn có thể cập nhật các nhóm, tạo lại ứng dụng và xem màn hình thông báo mới, tuỳ chỉnh.

Tạo thư viện hiển thị thông báo của riêng bạn

Bạn không chỉ có thể làm việc từ thư viện InAppMessaging để tạo giao diện người dùng cho việc hiển thị thông báo. Bạn cũng có thể tự viết mã từ đầu.

Tạo một lớp triển khai giao thức InAppMessagingDisplay

Firebase In-App Messaging sử dụng lớp InAppMessaging để xử lý hoạt động giao tiếp giữa máy chủ Firebase và ứng dụng của bạn. Lớp đó lần lượt sử dụng giao thức InAppMessagingDisplay để hiển thị thông báo mà lớp đó nhận được. Để tạo thư viện hiển thị của riêng bạn, hãy viết một lớp triển khai giao thức.

Định nghĩa giao thức và tài liệu về cách tuân thủ giao thức nằm trong tệp FIRInAppMessagingDisplay.h của thư viện InAppMessaging.

Đặt messageDisplayComponent để sử dụng thư viện hiển thị thông báo

InAppMessaging sử dụng thuộc tính messageDisplayComponent để xác định đối tượng cần sử dụng khi hiển thị thông báo. Đặt thuộc tính đó thành một đối tượng của lớp hiển thị thông báo tuỳ chỉnh để Firebase In-App Messaging biết cách sử dụng thư viện của bạn để hiển thị thông báo:

InAppMessaging.inAppMessaging().messageDisplayComponent = yourInAppMessagingRenderingInstance