Đang hiển thị thông báo

Alexey Rodionov

Matt Gaunt

Các tuỳ chọn thông báo được chia thành hai phần, một phần liên quan đến các khía cạnh hình ảnh (phần này và một phần giải thích các khía cạnh hành vi của thông báo (phần tiếp theo).

Bạn có thể thử nghiệm nhiều lựa chọn thông báo trong nhiều trình duyệt trên nhiều nền tảng bằng video của Peter Beverloo Trình tạo thông báo.

Tuỳ chọn hình ảnh

API để hiển thị một thông báo rất đơn giản:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

Cả hai đối số, title và options đều không bắt buộc.

Tiêu đề là một chuỗi và các tuỳ chọn có thể là bất kỳ tuỳ chọn nào sau đây:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

Hãy xem các tuỳ chọn hình ảnh:

Tuỳ chọn tiêu đề và nội dung

Sau đây là giao diện của thông báo không có tiêu đề và tuỳ chọn trong Chrome trên Windows:

Như bạn có thể thấy, tên trình duyệt được sử dụng làm tiêu đề và "Thông báo mới" phần giữ chỗ là được dùng làm nội dung thông báo.

Nếu một ứng dụng web tiến bộ được cài đặt trên thiết bị, tên ứng dụng web sẽ được sử dụng để thay thế của tên trình duyệt:

Nếu chúng tôi chạy mã sau:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

chúng tôi sẽ nhận được thông báo sau trong Chrome trên Linux:

Trong Firefox trên Linux, trình duyệt sẽ có dạng như sau:

Đây là giao diện của thông báo có nhiều văn bản trong tiêu đề và nội dung trong Chrome trên Linux:

Firefox trên Linux thu gọn văn bản nội dung cho đến khi bạn di chuột qua thông báo, khiến thông báo để mở rộng:

Các thông báo tương tự trong Firefox trên Windows có dạng như sau:

Như bạn có thể thấy, cùng một thông báo có thể trông khác nhau trên các trình duyệt khác nhau. Tên này cũng có thể xem khác nhau trong cùng một trình duyệt trên các nền tảng khác nhau.

Chrome và Firefox sử dụng thông báo hệ thống và trung tâm thông báo trên các nền tảng mà: có sẵn.

Ví dụ: Thông báo hệ thống trên macOS không hỗ trợ hình ảnh và hành động (nút và cùng dòng trả lời).

Chrome cũng có thông báo tuỳ chỉnh cho tất cả nền tảng máy tính. Bạn có thể bật chế độ này bằng cách đặt Gắn cờ chrome://flags/#enable-system-notifications sang trạng thái Disabled.

Biểu tượng

Tuỳ chọn icon về cơ bản là một hình ảnh nhỏ mà bạn có thể hiển thị bên cạnh tiêu đề và nội dung.

Trong mã của mình, bạn cần cung cấp URL cho hình ảnh bạn muốn tải:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Bạn sẽ nhận được thông báo sau trong Chrome trên Linux:

và trong Firefox trên Linux:

Đáng tiếc là không có bất kỳ nguyên tắc cố định nào về kích thước hình ảnh cần sử dụng cho biểu tượng.

Android có vẻ muốn có hình ảnh 64 dp (tức là nhân 64px theo tỷ lệ pixel của thiết bị).

Giả sử tỷ lệ pixel cao nhất của một thiết bị là 3, thì biểu tượng có kích thước từ 192px trở lên là an toàn.

Huy hiệu

badge là một biểu tượng đơn sắc nhỏ dùng để mô tả thêm một chút thông tin cho cho người dùng về nguồn gốc của thông báo:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

Tại thời điểm viết, huy hiệu chỉ được sử dụng trong Chrome trên Android.

Trên các trình duyệt khác (hoặc Chrome không có huy hiệu), bạn sẽ thấy biểu tượng của trình duyệt.

Giống như tuỳ chọn icon, không có nguyên tắc thực tế về kích thước sử dụng.

Tìm hiểu kỹ các nguyên tắc của Android kích thước đề xuất là 24 px nhân với tỷ lệ pixel của thiết bị.

Có nghĩa là hình ảnh có kích thước từ 72 px trở lên sẽ là hình ảnh tốt (giả sử tỷ lệ pixel tối đa của thiết bị là 3).

Bài đăng có hình ảnh

Tuỳ chọn image có thể được dùng để hiển thị hình ảnh lớn hơn cho người dùng. Điều này đặc biệt rất hữu ích khi hiển thị hình ảnh xem trước cho người dùng.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Trong Chrome trên Linux, thông báo sẽ có dạng như sau:

Trong Chrome trên Android, tỷ lệ cắt và tỷ lệ cắt là khác nhau:

Do có sự khác biệt về tỷ lệ giữa máy tính và thiết bị di động, rất khó để đề xuất nguyên tắc.

Vì Chrome trên máy tính không lấp đầy không gian có sẵn và có tỷ lệ 4:3, có lẽ tốt nhất là phân phát hình ảnh theo tỷ lệ này và cho phép Android cắt hình ảnh. Dù vậy, tuỳ chọn image vẫn có thể thay đổi.

Trên Android, nguyên tắc duy nhất là chiều rộng 450dp.

Sử dụng nguyên tắc này, hình ảnh có chiều rộng 1350px trở lên sẽ là phù hợp.

Hành động (Nút)

Bạn có thể xác định actions để hiển thị các nút kèm theo thông báo:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

Đối với mỗi thao tác, bạn có thể xác định title, action (về cơ bản là mã nhận dạng), icon và một type. Tiêu đề và biểu tượng là những gì bạn có thể thấy trong thông báo. Mã nhận dạng được sử dụng khi phát hiện nút hành động đã được nhấp vào (tìm hiểu thêm về vấn đề này trong phần tiếp theo). Loại có thể bỏ qua vì 'button' là giá trị mặc định.

Tại thời điểm này, chỉ viết các tác vụ hỗ trợ Chrome và Opera dành cho Android.

Trong ví dụ trên, có 4 hành động được xác định để minh hoạ rằng bạn có thể xác định nhiều hành động hơn sẽ được hiển thị. Nếu muốn biết số lượng thao tác sẽ được trình duyệt hiển thị, bạn có thể xem window.Notification?.maxActions:

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

Trên máy tính, các biểu tượng nút hành động hiển thị màu sắc của chúng (xem biểu tượng bánh vòng màu hồng):

Trên Android 6 trở xuống, các biểu tượng được tô màu để phù hợp với bảng phối màu của hệ thống:

Trên Android 7 trở lên, biểu tượng hành động sẽ không xuất hiện.

Chrome hy vọng sẽ thay đổi hành vi của mình trên máy tính để bàn để phù hợp với Android (ví dụ: áp dụng bảng phối màu thích hợp để làm cho các biểu tượng phù hợp với giao diện hệ thống). Trong khi chờ đợi, bạn có thể khớp với màu văn bản của Chrome bằng cách làm cho biểu tượng của bạn có màu #333333.

Bạn cũng nên lưu ý rằng các biểu tượng trông sắc nét trên Android nhưng không sắc nét trên máy tính.

Kích thước tốt nhất tôi có thể sử dụng để làm việc trên Chrome dành cho máy tính để bàn là 24px x 24px. Thiết bị này có vẻ không đúng chỗ một cách buồn bã trên Android.

Phương pháp hay nhất mà chúng ta có thể rút ra từ những khác biệt sau:

• Bám sát bảng phối màu nhất quán cho các biểu tượng để ít nhất tất cả biểu tượng đều được nhất quán hiển thị cho người dùng.
• Hãy đảm bảo các hình ảnh này hoạt động ở chế độ đơn sắc vì một số nền tảng có thể hiển thị hình ảnh theo cách đó.
• Hãy kiểm tra kích thước và xem kích thước nào phù hợp với bạn. 128px × 128px hoạt động tốt trên Android đối với tôi nhưng kém chất lượng cao trên máy tính.
• Dự kiến là các biểu tượng hành động sẽ không xuất hiện.

Thông số Notification đang khám phá cách xác định nhiều kích thước của biểu tượng, nhưng có vẻ như nó sẽ trước khi bất cứ điều gì được thống nhất.

Hành động (Câu trả lời cùng dòng)

Bạn có thể thêm câu trả lời cùng dòng cho thông báo bằng cách xác định một thao tác thuộc loại 'text':

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

Sau đây là giao diện của ứng dụng trên Android:

Nhấp vào nút hành động sẽ mở một trường nhập văn bản:

Bạn có thể tuỳ chỉnh phần giữ chỗ cho trường nhập dữ liệu văn bản:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Trong Chrome trên Windows, trường nhập văn bản luôn hiển thị mà không cần phải nhấp vào thao tác nút:

Bạn có thể thêm nhiều câu trả lời cùng dòng hoặc kết hợp các nút và câu trả lời cùng dòng:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

Hướng

Tham số dir cho phép bạn xác định hướng hiển thị của văn bản, phải sang trái hoặc từ trái sang phải.

Trong quá trình thử nghiệm, có vẻ như hướng chủ yếu được xác định bằng văn bản thay vì . Theo thông số kỹ thuật, thẻ này nhằm gợi ý cho trình duyệt cách bố cục các tuỳ chọn như hành động, nhưng tôi không thấy sự khác biệt.

Có lẽ tốt nhất là nên xác định xem bạn có thể làm hay không, nếu không trình duyệt sẽ thực hiện đúng theo văn bản được cung cấp.

Bạn phải đặt tham số này thành auto, ltr hoặc rtl.

Ngôn ngữ viết từ phải sang trái được sử dụng trong Chrome trên Linux có dạng như sau:

Trong Firefox (trong khi di chuột qua), bạn sẽ thấy:

Rung

Tuỳ chọn rung cho phép bạn xác định mẫu rung sẽ chạy khi có thông báo hiển thị, giả sử cài đặt hiện tại của người dùng cho phép rung (tức là thiết bị không ở chế độ im lặng).

Định dạng của tuỳ chọn rung phải là một mảng số mô tả số lần mili giây mà thiết bị sẽ rung, theo sau là số mili giây mà thiết bị sẽ không rung.

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

Chế độ này chỉ ảnh hưởng đến các thiết bị có hỗ trợ chế độ rung.

Âm thanh

Thông số âm thanh cho phép bạn xác định âm thanh sẽ phát khi nhận được thông báo.

Tại thời điểm chúng tôi viết bài này, không có trình duyệt nào hỗ trợ tuỳ chọn này.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Dấu thời gian

Dấu thời gian giúp bạn cho nền tảng biết thời điểm xảy ra một sự kiện dẫn đến lượt đẩy thông báo đang được gửi.

timestamp phải là số mili giây kể từ 00:00:00 giờ UTC, tức là ngày 1 tháng 1 năm 1970 (chính là thời gian UNIX).

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

Các phương pháp hay nhất về trải nghiệm người dùng

Thất bại lớn nhất về trải nghiệm người dùng mà tôi gặp phải với thông báo là thông tin thiếu cụ thể được hiển thị bằng thông báo.

Bạn nên xem xét lý do tại sao mình gửi thông báo đẩy ngay từ đầu và đảm bảo tất cả giúp người dùng hiểu lý do họ đọc thông báo đó.

Thật lòng mà nói, rất dễ để bắt gặp các ví dụ và nghĩ rằng "Tôi sẽ không bao giờ mắc sai lầm như vậy". Nhưng cách này dễ hơn rơi vào cái bẫy đó hơn bạn nghĩ.

Một số sai lầm phổ biến cần tránh:

• Đừng đặt trang web của bạn trong phần tiêu đề hoặc phần nội dung. Trình duyệt bao gồm miền của bạn trong nên đừng sao chép thông báo đó.
• Sử dụng tất cả thông tin bạn có. Nếu bạn gửi thông báo đẩy vì ai đó gửi tin nhắn cho người dùng thay vì sử dụng tiêu đề 'Tin nhắn mới' và nội dung là 'Nhấp vào đây để hãy đọc tin nhắn đó." sử dụng tiêu đề "John vừa gửi tin nhắn mới" và đặt nội dung thông báo thành của thư.

Phát hiện trình duyệt và tính năng

Tại thời điểm thực hiện bài viết này, có sự khác biệt khá lớn giữa Chrome và Firefox về hỗ trợ tính năng thông báo.

Thật may là bạn có thể phát hiện ra sự hỗ trợ cho các tính năng thông báo bằng cách xem window.Notification nguyên mẫu.

Giả sử chúng ta muốn biết liệu một thông báo có hỗ trợ các nút hành động hay không, chúng ta sẽ thực hiện như sau:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

Bằng cách này, chúng ta có thể thay đổi thông báo mà chúng tôi hiển thị cho người dùng.

Với các tuỳ chọn khác, bạn chỉ cần làm tương tự như trên, thay thế 'actions' bằng tên tham số.

Điểm đến tiếp theo

• Tổng quan về thông báo đẩy trên web
• Cách hoạt động của chế độ đẩy
• Đăng ký người dùng
• Trải nghiệm người dùng về quyền
• Gửi thông báo bằng thư viện thông báo đẩy trên web
• Giao thức đẩy web
• Xử lý sự kiện đẩy
• Hiển thị thông báo
• Hành vi thông báo
• Các mẫu thông báo phổ biến
• Câu hỏi thường gặp về thông báo đẩy
• Các vấn đề thường gặp và lỗi báo cáo

Phòng thí nghiệm lập trình

• Xây dựng ứng dụng thông báo đẩy
• Xây dựng máy chủ thông báo đẩy