1. An Nguyen

    An Nguyen bụi Ban quản trị

    4/9/18
    #1
    Tính năng nãy sẽ hiển thị một biểu ngữ Add to Home Screen khi có ai đó truy cập website của bạn bằng Chrome trên điện thoại Android.
    Xem thêm:
    https://developers.google.com/web/fundamentals/app-install-banners/?hl=en
    https://developers.google.com/web/fundamentals/primers/service-workers/


    Yêu cầu để sử dụng tính năng này:
    • Chưa cài đặt web app lên điện thoại
    • Tương tác người dùng với trang web (hiện tại cần người dùng tương tác ít nhất 30 giây với trang web của bạn)
    • Đã thiết lập web app manifest (manifest.json), phải chứa các thuộc tích:
      • short name hoặc name
      • icons: gồm 2 kích thước 192px và 512px
      • start_url
      • display: fullscreen, standalone hoặc minimal-ui
    • Website sử dụng kết nối HTTPS (yêu cầu cho service worker)
    • Đã register service worker với event fetch
    Kể từ phiên bản Chrome 68 trở lên, tính năng Add to Home Screen bị Google loại bỏ và thay thế bằng tính năng mini-infobar, đó là 1 thông báo nhỏ nằm gần navigation bar trên Android.

    upload_2018-9-21_17-41-11.


    Chuẩn bị các file

    Chuẩn bị các file sau và upload lên thư mục root của website:
    • Các file logo trang web của bạn với tên nv-icon-48.png, nv-icon-72.png, nv-icon-192.png, nv-icon-512.png và kích thước (pixel) lần lượt là 48x48, 72x72, 192x192, 512x512
    • Tạo 2 file manifest.jsonsw.js, tạm thời để nội dung trống

    Tạo nội dung cho file manifest.json

    Mở file manifest.json và thêm nội dung như sau:
    Mã (YAML):
    1. {
    2.   "short_name": "Nopviet",
    3.   "name": "Nopviet.com - Cộng đồng web, server và công nghệ",
    4.   "icons": [
    5.    {
    6.      "src": "nv-icon-48.png",
    7.      "sizes": "48x48",
    8.      "type": "image/png"
    9.    },
    10.    {
    11.      "src": "nv-icon-72.png",
    12.      "sizes": "72x72",
    13.      "type": "image/png"
    14.    },
    15.    {
    16.      "src": "nv-icon-192.png",
    17.      "sizes": "192x192",
    18.      "type": "image/png"
    19.    },
    20.    {
    21.      "src": "nv-icon-512.png",
    22.      "sizes": "512x512",
    23.      "type": "image/png"
    24.    }
    25.   ],
    26.   "start_url": "/",
    27.   "display": "standalone",
    28.   "orientation": "portrait"
    29. }
    Thuộc tính start_url là trang bạn muốn load khi bắt đầu web app. Có thể đặt là /forums hoặc index.html đại diện cho trang home của bạn. Cũng có thể đặt các thông số chiến dịch (campaign) để theo dõi trong Google Analytics trong thuộc tính start_url này (sử dụng tool trên https://ga-dev-tools.appspot.com/campaign-url-builder/).


    Đăng ký service worker

    Cần đăng ký service worker với website của bạn, để xác định vị trí của file javascript service worker (sw.js).
    Trên xenforo, mở template page_container_js_head, chèn vào cuối cùng đoạn code sau:

    Mã (Javascript):
    1. <link rel="manifest" href="/manifest.json">
    2.  
    3. <!--Service Worker-->
    4. <script>
    5. if ('serviceWorker' in navigator) {
    6.   window.addEventListener('load', function() {
    7.     navigator.serviceWorker.register('/sw.js').then(function(registration) {
    8.       // Registration was successful
    9.       console.log('ServiceWorker registration successful with scope: ', registration.scope);
    10.     }, function(err) {
    11.       // registration failed :(
    12.       console.log('ServiceWorker registration failed: ', err);
    13.     });
    14.   });
    15. }
    16. </script>

    Thêm event fetch vào service worker

    Mở file sw.js (service worker), chèn vào nội dung sau:
    Mã (Javascript):
    1. self.addEventListener('fetch', (event) => {});
    Truy cập website của bạn lại bằng điện thoại Android sử dụng Chrome để biết kết quả.

    Chrome sẽ hiển thị tự động mini-infobar chỉ khi có người dùng truy cập website của bạn. Nếu họ bỏ qua hoặc nhấn nút tắt đi thì mini-infobar sẽ không hiển thị lại nữa trong 1 khoảng thời gian quy định (hiện tại là 3 tháng)


    Kiểm tra Add to Home Screen có hoạt động không

    Thay vì kiểm tra bằng điện thoại, bạn có thể test bằng Chrome trên PC bằng cách bật 2 tùy chọn #bypass-app-banner-engagement-checks#enable-app-banners trong chrome://flags để tắt kiểm tra điều kiện về thời gian cho hiển thị mini-infobar. Bạn nhớ tắt 2 tùy chọn này sau khi thử nghiệm Add to Home Screen.

    Nếu banner không hiển thj, bạn có thể kiểm tra lại manifest của website bạn thông qua web: https://manifest-validator.appspot.com/

    Nếu banner vẫn không hoạt động, sử dụng công cụ Developer tools trong Chrome, vào tab Applications. Kiểm tra mục Service Workers Manifest, xem có bất kỳ lỗi gì không

    upload_2018-9-21_18-9-50.


    upload_2018-9-21_18-10-20.

     
    Sửa lần cuối: 21/9/18
    Đang tải...
Đã lưu nháp Draft deleted
Đang tải...