Cách tạo thông báo trên trình duyệt (Push notifications) cho Blogspot

Hiện nay các trình duyệt đều hỗ trợ hình thức push thông báo như cách push thông báo trên điện thoại, tức hộp thoại thông báo mới sẽ hiển thị ở góc dưới bên phải trình duyệt tương tự như các thông báo trên Action Center của Windows 10.
Và tận dụng hình thức push notifications này, chúng ta có thể push các thông báo có bài đăng mới đến những người đăng ký theo dõi website tự động hoặc thủ công thay cho hình thức gửi mail. Bạn sẽ thấy có rất nhiều trang web lớn hiện nay đều sử dụng nó, và hôm nay, Học Blogspot sẽ hướng dẫn các bạn cách tạo thông báo trên trình duyệt này cho Blogspot.
Có khá nhiều dịch vụ web giúp bạn làm điều này, tuy nhiên, nổi bật trong đó nhất là OneSignal.

Cái nhìn đầu tiên về thông báo đẩy (push notifications):

Tìm hiểu về Push notifications của OneSignal

Thật sự OneSignal là một dịch vụ tuyệt vời cho phép tạo thông báo cho blog và trang web của bạn. Đây là một công cụ cho phép bạn gửi các đoạn văn bản đã được định dạng tùy chỉnh của bạn cho những người đã đăng ký.

Điểm cực kỳ tốt của OneSignal đó là cho phép bạn gửi thông báo cho nhiều thiết bị khác nhau và cho nhiều trình duyệt khác nhau. Ví dụ, bạn đăng ký theo dõi website bằng điện thoại Android, iOS, thì những thông báo sẽ xuất hiện trên màn hình điện thoại của bạn giống như thông báo từ app. Hay bạn đăng ký theo dõi qua các trình duyệt, thì như Học Blogspot đã nói ở trên, thông báo sẽ hiển thị ở góc bên phải phía dưới trình duyệt của bạn.

Ngoài cái nhìn tổng quan trên về OneSignal, thì chúng ta sẽ có những điểm rất khác biệt của OneSignal với nhiều tình năng tuyệt vời như:

• MIỄN PHÍ (hoàn toàn miễn phí nhé)
• Không bắt buộc dùng HTTPS/SSL (bạn có thể sử dụng cho Blogspot của mình dù là đang chạy http hay https, sẽ có hướng dẫn chi tiết cuối bài)
• Không giới hạn số người đăng ký
• Hỗ trợ hầu hết các trình duyệt và hệ điều hành
• Không giới hạn thông báo
• A/B testing
• API đầy đủ
• Thêm và xuất data
• Thống kê theo thời gian thực
• QUAN TRỌNG: Hỗ trợ Blogspot

Với những ưu điểm như vậy, nên Học Blogspot sẽ hướng dẫn các bạn sử dụng công cụ này để tạo thông báo đẩy (push notifications) cho Blogspot.

Cách tạo thông báo đẩy (Push notifications) cho Blogspot

1. Trước tiên các bạn cần tạo tài khoản ở OneSignal: onesignal.com

2. Đăng ký xong bạn sẽ được chuyển vào trang quản trị tài khoản của mình. Bạn cần tạo ứng dụng cho riêng blog của mình để quản lý nó. Vì vậy, hãy chọn Add a new app:

3. Một pop-up hiện lên, và đây là tên của app, bạn có thể điền tên trang web của mình vào để dễ quản lý. Sau đó nhấn Create:

4. Bây giờ là chọn nền tảng để tạo thông báo. Cái này bạn có thể setup thêm sau khi cài đặt xong, vì vậy, Học Blogspot khuyến cáo bạn chọn Website Push để tạo các thông báo cho website trước, chọn xong thì nhấn Next:

5. Ở đây sẽ có 2 tùy chọn là Chrome & Firefox với Safari. Thôi thì cứ chọn Chrome với Firefox trước đi đã. Sau đó bấm Next:

6. Ở đây rất quan trọng. Chúng ta sẽ có 1 ô nhập đường dẫn trang Blogspot bạn muốn tạo thông báo, và đường dẫn favicon (Đường dẫn logo của blog bạn). Hãy nhập 2 cái đó vào, những từ từ chưa bấm Save đâu nhé.

Sau khi nhập xong, thì nó có 1 mục là My site is not fully HTTPS. Tức là nếu website bạn không có HTTPS thì tick vào nó. Hiện tại bạn đang dùng Blogspot (đọc bài này chỉ có hướng dẫn cho Blogspot thôi), thì dù bạn đang dùng HTTPS hay không thì vẫn phải tick vào nút này.

Như ảnh trên, Học Blogspot đang dùng HTTPS, nhưng vẫn tick vào, và nhập thêm phần subdomain là hocblogspot. Nhớ cái subdomain này nhé. Sau đó bấm Save.

7. Chọn target SDK, cứ chọn Website Push rồi bấm Next thôi:

8. Bây giờ thì tới bước cuối cùng rồi, nó sẽ cho bạn 1 App ID như trong ảnh. Việc của bạn là thêm App ID cùng với code (sắp tới) vào Blogspot của mình.

9. Code để thêm vào Blogspot là 1 đoạn script sẽ được mình cung cấp bên dưới. Vì Blogspot hiện nay có 2 kiểu khác nhau là chỉ dùng HTTP và dùng HTTPS. Vì vậy sẽ có 2 script khác nhau 2 phương thức giao tiếp này.

Nếu bạn dùng HTTP, thêm đoạn code này vào phía trên thẻ </head>:

  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: false, /* Set to true to automatically prompt visitors */
      httpPermissionRequest: {
        enable: true
      },
      notifyButton: {
          enable: true /* Set to false to hide */
      }
    }]);
  </script>

Thay YOUR_APP_ID bằng App IDlúc nãy của bạn, rồi nhấn lưu lại nhé.

Nếu bạn dùng HTTPS, thêm đoạn code này vào phía trên thẻ </head>:

  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: false, /* Set to true to automatically prompt visitors */
      httpPermissionRequest: {
        enable: true
      },
      notifyButton: {
          enable: true /* Set to false to hide */
      },
      subdomainName: "your_subdomain_value" /* Value you added from step 1.4 of the HTTP setup guide, do not use the https:// nor the .os.tc */
    }]);
  </script>

Thay YOUR_APP_ID bằng App IDlúc nãy của bạn, và thay your_subdomain_value bằng subdomain lúc này ở phần setup, như của mình là hocblogspot. Sau đó bấm lưu lại.

10. Sau khi đã lưu template xong, thì ra trang chủ blog của bạn, sẽ thấy 1 cái icon hình cái chuông như thế này:

Hãy click vào nó, 1 pop-up hiển thị lên, hãy bấm Allow:

Sau khi bấm Allow, trình duyệt sẽ hỏi bạn có cho hiển thị thông báo không, hãy bấm Cho phép.

11. Sau đó quay lại trang OneSign bước cuối lúc nãy, bấm vào tùy chọn Check Subscribed Users. Thông báo sau đó sẽ xanh như thế này là hoàn thành. Xong thì bấm Done:

Như vậy là việc setup đã xong.
Giờ thì mỗi khi bạn đăng bài mới, sẽ có 1 thông báo push lên trình duyệt của những người đã đăng ký thông báo trên blog của bạn.
Ngoài ra, nếu bạn muốn push thông báo thủ công, thì có thể vào trang quản lý ứng dụng OneSignal mà bạn đã tạo cho blog của mình, và tạo thông báo push xuống như bình thường.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait