08 April, 2020

#32: Cài web thành app trên Android/PC

#32: Cài web thành app trên Android/PC
Available in:
 Vietnamese
Reading time: 3 min.
Table of content

    Cũng từ khá lâu rồi, một vài trình duyệt như Chrome, Firefox,… có thêm hỗ trợ cho phép cài web thành 1 app riêng (trên Android và PC). Tính năng này tên là A2HS, là một phần của Progressive Web Apps. Tuy nhiên, có vẻ chưa có nhiều hướng dẫn cho việc này, nên mình thấy vẫn khá ít web hỗ trợ

    Trong bài này, mình sẽ hướng dẫn các bạn cách để thêm A2HS vào web của riêng bạn

    Chuẩn bị

    1. Bạn cần có web chạy trên domain riêng (kể cả static web cũng dùng được). Bạn cũng cần biết HTML và Javascript để có thể sửa code trang web.
    2. Web của bạn phải có SSL (https). Mình khuyến khích cài để nó tự động redirect từ http về https
    3. Bạn cần có logo cho ứng dụng, cần tạo 2 phiên bản với kích cỡ 512×512 và 192×192 pixels. Mình khuyên dùng logo tròn, ví dụ như logo của mình

    Thêm manifest JSON

    Tạo 1 file có tên manifest.json, và đặt nó ỏ thư mục gốc của trang web. Nội dung file như sau (hãy sửa lại các phần in đậm theo bạn muốn)

    {
  "short_name": "**Tên ứng dụng**",
  "name": "**Tên ứng dụng**",
  "icons": [
    {
      "src": "**link tới logo cỡ 192x192.png**",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "**link tới logo cỡ 512x512.png**",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "**#000000**",
  "background_color": "#ffffff",
  "prefer_related_applications": false
}

    (theme_color sẽ là màu status bar). Xem ví dụ tại đây: https://blog.ngxson.com/pwa-manifest-blog.json

    Thêm code sau vào trong <head> của file html:

    Thêm service worker

    Bạn cần thêm file tên là pwa-sw.js, đặt nó ở thư mục gốc của trang web. Nội dung file như sau:

    'use strict';
(function () {
  self.addEventListener('fetch', function (event) {
  var request = event.request;
    event.respondWith(fetch(request));
  });
})();

    Ví dụ ở blog của mình: https://blog.ngxson.com/pwa-sw.js

    Hiện nút cài đặt

    Thêm đoạn code sau vào cuối <body>
    (hãy sửa lại phần in đậm theo bạn muốn)

    <script>
  const A2HS_PROMT_MSG = '**Bấm để cài <b>Tên ứng dụng</b> về máy**';
  navigator.serviceWorker.register('/pwa-sw.js');
</script>

    Dùng thử

    Bây giờ, hãy vào lại trang web của bạn. Nếu mọi thứ chạy ổn định, bạn sẽ thấy thông báo này ở dưới màn hình:

    Nếu không thấy nó chạy, hãy chắc chắn rằng:

    • Bạn đã xóa cache (hoặc Shift + F5)
    • Kiểm tra lại đúng đường dẫn của manifest.json và pwa-sw.js
    • Kiểm tra đúng tên các file
    • Kiểm tra icon trong manifest.json đã đúng kích cỡ chưa
    • Chắc chắn web đang chạy trên https
    • Update chrome lên bản mới nhất
    • Kiểm tra xem service worker đã hoạt động hay chưa (F12 > Application)
    Want to receive latest articles from my blog?
    Related articles