Phát triển bản địa với API thông báo web

Theo quan điểm của tôi, thông báo là MỘT trong những tính năng chính tách biệt một trang web khỏi một ứng dụng, đặc biệt là hiện nay Ứng dụng web tiến bộ (PWA) đang rất thịnh hành. Vì vậy, thông báo hiển thị sẽ làm cho trang web giống như một ứng dụng root hơn.

Giao diện của API Thông báo là thông qua đối tượng Notification JavaScript, đối tượng này có rất nhiều thuộc tính. Một số là hình ảnh , một số khác có lập trình , một số chỉ là metadata và một số khác thậm chí là âm thanh cảm nhận !

Các thuộc tính trực quan như sau:

const notificationsProperties = {   "title": "Picture Time",   "body": "Time to look at some random pictures",   "icon": "https://picsum.photos/200",   "image": "https://picsum.photos/400",   // A badge is an image we display   // when there is not enough space to display the notification   "badge": "https://picsum.photos/300/200",   // Direction decides if the notification goes   // from left to right, right to left or let the browser decide   "dir": "ltr",   // As part of the direct user experience we also have    // Audio- ....   "silent": ""   // ... sensorial   "vibrate": [200, 100, 200], }

title , body , icon , image và badge sẽ tất cả cái nhìn khác nhau tùy thuộc vào hệ điều hành bạn đang sử dụng. Đây là giao diện của nó trên Windows 10:

Ảnh chụp màn hình thông báo trên windows

Bây giờ ta hãy xem xét các thuộc tính lập trình hơn của ta (vui lòng phê bình phân loại của tôi, tôi cũng không hài lòng với nó 🤓).

{   //...   onshow: () => console.log("We are showing a Notification"),   onerror: () => console.log("There was an error showing a Notification"),   onclose: () => console.log("Closing the Notification"),   // Informs the user if a notification replaced a previous one   renotify: null,   // If set to true the notification will stick to the screen until the user interacts with it   requireInteraction: true,   // We'll get into actions later   actions: [] }

Ta sẽ không khám phá những gì bạn có thể làm với metadata ở đây. Nhưng ở đây chúng là một biện pháp tốt:

{   "lang": "",   "tag": "",   "timestamp": 1581390179474,   "data": null }

Tạo thông báo

Bây giờ ta đã biết những gì trong một thông báo, hãy xem cách ta có thể tạo nó:

const notification = new Notification('Stop Working', notificationsProperties);

LÀM XONG! Nó là khá dễ dàng. Nhưng hai điều quan trọng:

Cái đầu tiên không quan trọng lắm. Bạn có thể nhận thấy trong ảnh chụp màn hình của ta rằng tiêu đề của thông báo là Ngừng hoạt động . Nhưng trong các tùy chọn của ta , ta đặt: "title": "Picture Time" . Đó là bởi vì tiêu đề chỉ có thể được đặt trong hàm tạo thông báo mà ta đặt là “Ngừng hoạt động” .
Điều quan trọng thứ hai. Ta không thể chỉ buộc thông báo cho user của bạn . Ta cần xin phép họ trước. Nếu bạn muốn tìm hiểu thêm về quyền, bạn có thể cần xem bài viết của ta về (API quyền) [/ js / permissions-api /].

Đây là một đoạn ngắn để giải quyết việc yêu cầu quyền:

// Checking if we already have permission to send notifications const notificationsAllowed = await navigator.permissions.query({name: 'notifications'});  if (notificationsAllowed.state !== 'granted'){   // Requesting permission   const permission = await Notification.requestPermission();    // If the permission is not granted the application won't work   if (permission !== 'granted') {     // I am a very sour developer so I replace all of my page with an error message     // DON'T DO LIKE ME AND BE A FRIENDLY DEV INSTEAD!     document.body.innerHTML = '<h1> This app can\'t work without notification bye </h1>';     return;   } } // Then you can continue with your notification driven code

Bạn cũng có thể nhận được trạng thái thông báo bằng lệnh:

const notificationsAllowed = Notification.permission;

Hành động

Tác vụ là các node nhỏ ở cuối thông báo của bạn. Ta có thể định nghĩa chúng như sau:

actions: [{   title: 'Show More',   action: () => {console.log('code to show more images');} },{   title: 'Close',   action: () => { console.log('Bye bye');} }]

Ảnh chụp màn hình thông báo trên các cửa sổ có nút tác vụ

Tuy nhiên, bạn không thể chỉ thêm hành động vào tùy chọn thông báo của bạn như ta đã làm trước đây. Ta chỉ có thể đăng ký chúng trong một service worker :

Mô-đun: main.js

if('serviceWorker' in navigator) {   // First we need to register our service worker   navigator.serviceWorker.register('serviceWorker.js', { scope: './' })     .then(async () => {       //... check if notifications are allowed       // ... define notificationsProperties with actions       const serviceWorkerRegistration = navigator.serviceWorker.ready       // This will show the notification with the actions       serviceWorkerRegistration.showNotification('Stop Working', notificationsProperties);     }); }

Và bạn là bạn có thông báo cũng có thể hoạt động offline !

Bên trong Service Worker, ta có thể đăng ký người nghe sự kiện để xem cách user tương tác với các thông báo của ta :

Mô-đun: serviceWorker.js

self.addEventListener('notificationclick', (event) => {     console.log('our user clicked on the notification!')     // Send user data analytics 🔥 🔥 🔥 }, false);

Và bạn đây rồi! Tôi hy vọng bạn đã học được một vài thủ thuật và sẽ phát triển một số trang web / ứng dụng web ưa thích với cảm giác bản địa ✨.

Tags:

Các tin liên quan

Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web
2019-12-12
Cách tạo băng chuyền image danh mục đầu tư với các thanh trượt được đồng bộ hóa trên trang web
2019-12-12
Cách tạo thông báo trên web bằng kênh Laravel và Pusher
2019-12-12
Khả năng truy cập web cho người mới bắt đầu
2019-12-12
Cách cài đặt web server OpenLiteSpeed trên Ubuntu 18.04
2019-12-02
Sử dụng Phông chữ Google trong các Trang web của bạn
2019-08-22
Cách triển khai ứng dụng web Go bằng Nginx trên Ubuntu 18.04
2019-07-24
Biến Gatsby thành PWA: Service Worker và Web App Manifest
2019-07-18
Giới thiệu về Kiểm tra trực quan cho Ứng dụng Web
2019-06-11
Cách cài đặt ứng dụng web bằng Cloudron trên Ubuntu 18.04
2019-05-29