1. An Nguyen

    An Nguyen bụi Ban quản trị

    20/9/18
    #1
    Web App Manifest (gọi tắt là manifest), là một file JSON chứa các thông tin về name , icon , description , start_url ... của website, giúp dễ dàng khởi chạy website như một web app trên di động.

    Web App Manifest cũng là 1 phần của công nghệ Progressive Web App (PWA), giúp website của bạn có thể chạy như một ứng dụng (hỗ trợ xem offline, thông báo đẩy,...), và có thể cài vào màn hình Home điện thoại mà không cần cài đặt qua app store


    1. Tạo file manifest cho website của bạn

    Tạo 1 file manifest.json và chèn vào thẻ head của website như sau:
    HTML:
    1. <link rel="manifest" href="/manifest.json">
    Nội dung cơ bản 1 file manifest.json
    Mã (YAML):
    1. {
    2.   "short_name": "Maps",
    3.   "name": "Google Maps",
    4.   "icons": [
    5.     {
    6.       "src": "/images/icons-192.png",
    7.       "type": "image/png",
    8.       "sizes": "192x192"
    9.     },
    10.     {
    11.       "src": "/images/icons-512.png",
    12.       "type": "image/png",
    13.       "sizes": "512x512"
    14.     }
    15.   ],
    16.   "start_url": "/maps/?source=pwa",
    17.   "background_color": "#3367D6",
    18.   "display": "standalone",
    19.   "scope": "/maps/",
    20.   "theme_color": "#3367D6"
    21. }
    Trong đó:
    • short_name: tên ngắn gọn, được sử dụng trên homescreen, launcher và những nơi có không gian hiển thị bị giới hạn.
    • name: tên web app
    • start_url: URL được load khi mở web app
    • display: chọn kiểu hiển thị web app, có thể là
    • icon: là biểu tượng của web app hiển thị trên điện thoại, gồm thiết lập nhiều kích thước ảnh cùng đường dẫn.
    Ngoài ra còn nhiều thuộc tính khác như: theme_color, background_color, scope, description, lang, orientation, ... Xem thêm tại MDN

    upload_2018-9-20_23-5-30.png



    3. Tự động nhắc thêm web vào homescreen với Service Worker

    Sau khi đã thiết lập manifest.json + Service Worker, mỗi khi truy cập website bằng điện thoại sẽ có 1 thông báo Add to home screen xuất hiện tự động.
    Service Worker giúp tạo cache cho website để có thể truy cập offline, và cách thiết lập nó khá là phức tạp. Nhưng thật ra bạn chỉ cần tạo 1 service worker rỗng (empty) với nội dung bên dưới, đặt trước thẻ </body> :
    Mã (Javascript):
    1. <script>
    2. if ('serviceWorker' in navigator) {
    3.  
    4.   // sw.js can literally be empty, but must exist
    5.   navigator.serviceWorker.register('/sw.js');
    6. }
    7. </script>
    Và sau đó đăng ký service worker bằng cách thêm đoạn script sau:
    Mã (Javascript):
    1. self.addEventListener('fetch', (event) => {});


    3. Kiểm tra lại file manifest của bạn

    Sau khi tạo xong file manifest.json cho website, bạn có thể kiểm tra lại với công cụ Developer Tools trong trình duyệt Chrome, mục Manifest trong tab Application

    upload_2018-9-21_0-5-34.png

    Nếu có thông báo "no manifest detected", bạn cần khởi chạy Audits để kiểm tra lại website của bạn ở tab Audits

    upload_2018-9-21_0-8-0.png

    Chúc các bạn thành công :emoji_fingers_crossed:
     
    Sửa lần cuối: 21/9/18
Đã lưu nháp Draft deleted
Đang tải...