Chrome dành cho Android - thêm ứng dụng web vào màn hình chính

Question

Tôi đang cố triển khai biểu ngữ 'thêm vào màn hình chính' bằng cách sử dụng hỗ trợ biểu ngữ gốc của Google Chrome, với bản trình diễn này làm tham chiếu.

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

Theo spec đó, các yêu cầu là:

• trang sử dụng một nhân viên dịch vụ (vâng, xem dưới đây)
• trang web được sử dụng HTTPS (vâng, trang web có chứng chỉ SSL hợp lệ và tôi đang tải qua HTTPS. Chrome hiển thị trang web là an toàn và có khóa móc màu xanh lá cây, không có lỗi hoặc cảnh báo trong chứng chỉ)
• ứng dụng có khai báo kê khai (yep, xem bên dưới)
• manifest có SHORT_NAME, 144 biểu tượng pixel và một loại 'image/png' (vâng, xem dưới đây)

Các biểu hiện tôi đang sử dụng là dưới đây.

{ 
    "name": "Web app test", 
    "short_name": "Test", 
    "icons": [ 
    { 
     "src": "/resources/launcher-icon-3x.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    } 
    ], 
    "display": "standalone" 
} 

Trong đó có một short_name và biểu tượng 144 pixel của loại hình/png.

Nhân viên dịch vụ tôi đang sử dụng là một trực tiếp bản sao & dán mã này:

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

mà đã được đề nghị trong bài viết này:

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

Nhân viên dịch vụ đã được đã đăng ký, tệp kê khai đang được tải vào trang và url hình ảnh là chính xác, nhưng biểu ngữ không hiển thị.

Tôi cũng bật tính năng kiểm tra chrome: // flags/# bypass-app-banner-engagement-enabled vì vậy đây không phải là trường hợp tôi cần quay lại vào ngày mai và kiểm tra xem nó có hoạt động hay không. Tôi đã có thể xem các biểu ngữ màn hình chính trên tất cả các bản trình diễn của Chrome mà tôi đã kiểm tra (đây là nơi tôi đã lấy hầu hết mã này) và điện thoại của tôi đã cài đặt phiên bản Chrome mới nhất.

Tôi còn thiếu điều gì khác có thể chặn biểu ngữ màn hình chính xuất hiện không?

Cảm ơn.

Answer 1

Một vài điều cần kiểm tra:

• Đảm bảo bạn có một start_url trong biểu hiện của bạn định nghĩa trang để khởi động.
• Đảm bảo rằng bạn có một <link rel=manifest> trong trang
• của bạn Đảm bảo URL hình ảnh của tất cả các giải quyết một cách chính xác dựa trên vị trí manifest
• Tốt có một biểu tượng 192px, 144 là tối thiểu

Mounir Lamouri đã tạo một số manifest validator mà bạn có thể sử dụng để kiểm tra tệp kê khai của mình là chính xác.

Bạn cũng nên bật chrome: // flags/# bypass-app-banner-cam kết-kiểm tra nếu bạn đang sử dụng Chrome để bạn nhận được cảnh báo nhanh hơn hoặc khả năng hiển thị của bất kỳ sự cố nào. Cuối cùng, bạn có thể tìm trong bảng điều khiển Công cụ của Dev trên bất kỳ tải trang nào và một lỗi sẽ được hiển thị cho biết tại sao biểu ngữ không được hiển thị.

Ngoài ra còn có rất nhiều hướng dẫn trên developers.google.com

• Using App Install Banners
  • Tạo một file manifest bao gồm một SHORT_NAME, biểu tượng và launch_url
  • Link to the file manifest từ trang
• Web App Install Banner
  • Tùy chọn bao gồm thông tin bổ sung như background_color và theme_color.
• Listening to events on App Install banner
  • Tìm hiểu khi Chrome nghĩ rằng nó có thể nhắc nhở để cài đặt và sau đó cung cấp khả năng trì hoãn nó cho đến một thời điểm thích hợp hơn.
  • Hiểu xem người dùng đã chấp nhận hay từ chối lời nhắc bằng cách xem phản hồi trong sự kiện onbeforeinstallprompt.

Answer 2

Nói chung tôi khuyên bạn nên dán biểu hiện của bạn vào đây để đảm bảo nó không có bất kỳ lỗi: http://mounirlamouri.github.io/manifest-validator/

Nếu sử dụng Chrome với chrome: // flags/# bypass-cấp ứng dụng kích hoạt tính năng kiểm tra tham gia biểu ngữ, bạn có thể xem trong bảng điều khiển khi tải trang bất kỳ và một lỗi sẽ được hiển thị cho biết tại sao biểu ngữ không được hiển thị.