Trong phát triển ứng dụng dựa trên web ngày nay, một trong những tính năng chính là thông báo thông tin. Quá trình thông báo hoặc cơ chế luôn giúp mọi người cung cấp thông tin đúng hạn và nhắc nhở mọi người về các nhiệm vụ đang chờ xử lý của họ. Một nghiên cứu gần đây về người dùng di động cho biết người dùng di động nhận được trung bình 63 thông báo mỗi ngày, hầu hết đến từ các ứng dụng nhắn tin hoặc email.

Giới thiệu về thông báo đẩy

Thông báo đẩy về cơ bản là một loại dịch vụ được sử dụng để hiển thị thông tin cảnh báo cho người dùng. Dịch vụ này sẽ hiển thị các thông báo cảnh báo mà người dùng muốn xem tại một thời điểm cụ thể từ bất kỳ ứng dụng hoặc dịch vụ cụ thể nào. Các tin nhắn này có thể đến từ bất kỳ nguồn phương tiện nào như dịch vụ SMS, dịch vụ email hoặc dịch vụ tùy chỉnh được xác định bởi chính ứng dụng.

Đôi khi, thông báo đẩy còn được gọi là thông báo đẩy máy chủ, bởi vì thông báo đẩy được gửi từ một ứng dụng trên thiết bị mà không có bất kỳ yêu cầu cụ thể nào từ phía khách hàng. Về cơ bản, đây là sự khác biệt cơ bản giữa thông báo kéo và thông báo đẩy: đối với thông báo kéo, khách hàng phải gửi yêu cầu đến máy chủ để biết thông tin, trong khi máy chủ thông báo đẩy gửi thông tin đến máy khách mà không nhận được bất kỳ yêu cầu nào từ phía khách. Trên thực tế, người dùng cuối phải chọn tham gia để nhận thông báo và người dùng cuối cần chấp nhận cài đặt đó trong quá trình cài đặt ứng dụng hoặc khi khởi động ứng dụng.

Thông báo đẩy thực sự cho phép ứng dụng của chúng tôi mở rộng ra ngoài trình duyệt và đó là một cách mạnh mẽ tuyệt vời để thu hút hoặc tương tác với người dùng. Về cơ bản, nó thực hiện một hành động đơn giản, như cảnh báo cho người dùng về một sự kiện quan trọng, hiển thị biểu tượng hoặc hiển thị một tin nhắn văn bản nhỏ và sau đó bằng cách nhấp vào tin nhắn đó, người dùng có thể được chuyển hướng đến trang web hoặc ứng dụng liên quan.

Thông báo đẩy là gì

Một thông báo luôn hiển thị thông báo bật lên trên màn hình thiết bị của người dùng. Thông báo này có thể được kích hoạt cục bộ bởi bất kỳ ứng dụng nào đang chạy hoặc họ có thể đẩy thông tin thông báo được tải từ máy chủ đến thiết bị người dùng khi ứng dụng không chạy. Điều này sẽ thu hút người dùng để họ có được thông tin đúng thời gian mà không cần phải nhớ nó. Thông báo đẩy chủ yếu phụ thuộc vào hai API - API thông báo và API đẩy. API thông báo cho phép ứng dụng hiển thị thông tin thông báo tới màn hình người dùng. Push API cho phép một nhân viên dịch vụ xử lý tìm nạp thông báo đẩy từ máy chủ ngay cả khi ứng dụng không hoạt động.

Các loại thông báo khác nhau

Nói chung, có ba loại thông báo khác nhau thường có sẵn. Họ đang: 

Thông báo giao dịch - Thông báo giao dịch thường được sử dụng để thông báo cho người dùng về bất kỳ sự kiện cụ thể nào, giống như một gói đã được gửi đi.

Thông báo hệ thống - Loại thông báo này được sử dụng để thông báo cho người dùng về các tính năng mới của sản phẩm hoặc bất kỳ mặt hàng hoặc ưu đãi đặc biệt nào, chẳng hạn như giảm giá đặc biệt khi mua một mặt hàng cụ thể.

Thông báo người dùng - Loại thông báo này được sử dụng để thông báo cho người dùng về các tin nhắn mới từ bạn bè hoặc các nguồn khác, như email, tin nhắn mạng xã hội, tin nhắn tùy chỉnh dựa trên ứng dụng.

Tính năng thông báo đẩy

Thông báo đẩy phải chứa các đặc điểm sau:

Thông báo - Một thông báo cần hiển thị cho UI ứng dụng người dùng (tức là trong trình duyệt)

Tin nhắn đẩy - Một tin nhắn phải gửi từ máy chủ đến phía máy khách mà không có bất kỳ yêu cầu nào từ phía máy khách

Thông báo đẩy - Một thông báo cần được tạo để đáp lại thông báo đẩy

API thông báo - Một giao diện hoặc lớp dịch vụ cần được cấu hình để hiển thị thông báo cho người dùng.

Dịch vụ đẩy - Một quá trình cho tuyến đường của thông báo đẩy từ đầu máy chủ đến đầu máy khách. Mỗi trình duyệt có triển khai riêng để hiển thị thông báo đẩy.

Web Push hoạt động như thế nào

Mỗi và mọi trình duyệt quản lý thông báo đẩy thông qua các hệ thống của họ, thường được gọi là Dịch vụ đẩy. Đầu tiên, người dùng cần cấp quyền cho Thông báo đẩy trên trang web đó; bằng cách chấp nhận sự cho phép đó, người dùng có thể đăng ký ứng dụng vào dịch vụ đẩy trình duyệt. Điều này tạo ra một đối tượng đăng ký đặc biệt có chứa "URL điểm cuối" của dịch vụ đẩy, khác nhau đối với mỗi trình duyệt và khóa chung. Chúng tôi gửi tin nhắn đẩy của mình đến URL này và dịch vụ đẩy sẽ gửi nó đến đúng ứng dụng khách trong trình duyệt.

Để triển khai thông báo đẩy trong khung Angular, chúng tôi cần phát triển dịch vụ Angular thực sự thực hiện công việc chính để điền thông báo thông báo trong trình duyệt. 

Mã mẫu của push.notification.service.ts

import {
    Injectable
} from '@angular/core';
import {
    Observable
} from 'rxjs/Observable';

@Injectable()
export class PushNotificationsService {
    public permission: Permission;

    constructor() {
        this.permission = this.isSupported() ? 'default' : 'denied';
    }

    public isSupported(): boolean {
        return 'Notification' in window;
    }

    requestPermission(): void {
        let self = this;
        if ('Notification' in window) {
            Notification.requestPermission(function(status) {
                return self.permission = status;
            });
        }
    }

    create(title: string, options ? : PushNotification): any {
        let self = this;
        return new Observable(function(obs) {
            if (!('Notification' in window)) {
                console.log('Notifications are not available in this environment');
                obs.complete();
            }
            if (self.permission !== 'granted') {
                console.log("The user hasn't granted you permission to send push notifications");
                obs.complete();
            }
            let _notify = new Notification(title, options);
            _notify.onshow = function(e) {
                return obs.next({
                    notification: _notify,
                    event: e
                });
            };
            _notify.onclick = function(e) {
                return obs.next({
                    notification: _notify,
                    event: e
                });
            };
            _notify.onerror = function(e) {
                return obs.error({
                    notification: _notify,
                    event: e
                });
            };
            _notify.onclose = function() {
                return obs.complete();
            };
        });
    }

    generateNotification(source: Array < any > ): void {
        let self = this;
        source.forEach((item) => {
            let options = {
                body: item.alertContent,
                icon: "../resource/images/bell-icon.png"
            };
            let notify = self.create(item.title, options).subscribe();
        })
    }
}

export declare type Permission = 'denied' | 'granted' | 'default';

export interface PushNotification {
    body ? : string;
    icon ? : string;
    tag ? : string;
    data ? : any;
    renotify ? : boolean;
    silent ? : boolean;
    sound ? : string;
    noscreen ? : boolean;
    sticky ? : boolean;
    dir ? : 'auto' | 'ltr' | 'rtl';
    lang ? : string;
    vibrate ? : number[];
}


Bây giờ chúng ta cần phát triển một thành phần Angular, nó sẽ gọi dịch vụ thông báo đẩy ở trên và gửi dữ liệu tin nhắn đến dịch vụ để thông báo có thể được đưa vào.


Mã mẫu của app.component.pushnotifilities.ts

import {
    Component,
    OnInit,
    EventEmitter,
    Output
} from '@angular/core';
import {
    PushNotificationsService
} from './push-notifications.service';

@Component({
    moduleId: module.id,
    selector: 'push-notification',
    templateUrl: 'app.component.pushnotification.html',
})

export class PushNotificationComponent implements OnInit {

    private title: string = 'Browser Push Notifications!';

    constructor(private _notificationService: PushNotificationsService) {
        this._notificationService.requestPermission();
    }

    ngOnInit() {}

    notify() {
        let data: Array < any >= [];
        data.push({
            'title': 'Approval',
            'alertContent': 'This is First Alert -- By Debasis Saha'
        });
        data.push({
            'title': 'Request',
            'alertContent': 'This is Second Alert -- By Debasis Saha'
        });
        data.push({
            'title': 'Leave Application',
            'alertContent': 'This is Third Alert -- By Debasis Saha'
        });
        data.push({
            'title': 'Approval',
            'alertContent': 'This is Fourth Alert -- By Debasis Saha'
        });
        data.push({
            'title': 'To Do Task',
            'alertContent': 'This is Fifth Alert -- By Debasis Saha'
        });

        this._notificationService.generateNotification(data);
    }
}


Mã mẫu của app.component.pushnotifying.html

<div class="container">
    <h1>
        {{title}}
    </h1>
    <button (click)="notify()">Show Notiication</button>
</div>


Bây giờ thêm thành phần này trong mô-đun Angular và thực thi trong trình duyệt. Nó sẽ hiển thị đầu ra sau:

Khi trang index.html được tải, trình duyệt yêu cầu người dùng cho phép xác nhận thông báo đẩy để tự động điền khi được yêu cầu.


Khối mã trên của thông báo hoàn toàn độc lập với bất kỳ thư viện nào. Khối mã này sẽ hoạt động trên mọi phiên bản Angular 2 trở lên.