Bạn đã thiết kế một ứng dụng web, viết mã và trình chạy dịch vụ, cuối cùng là thêm Tệp kê khai ứng dụng web để mô tả cách ứng dụng hoạt động khi được "cài đặt" trên thiết bị của người dùng. Điều này bao gồm những nội dung như biểu tượng có độ phân giải cao để sử dụng, ví dụ: trình chạy hoặc trình chuyển đổi ứng dụng của điện thoại di động, hoặc cách ứng dụng web của bạn khởi động khi được mở từ màn hình chính của người dùng.
Mặc dù nhiều trình duyệt sẽ tuân thủ Tệp kê khai ứng dụng web, nhưng không phải trình duyệt nào cũng tải hoặc tuân theo mọi giá trị bạn chỉ định. Nhập PWACompat, một thư viện lấy Tệp kê khai ứng dụng web của bạn và tự động chèn các thẻ meta hoặc link có liên quan cho các biểu tượng có kích thước khác nhau, biểu tượng trang web, chế độ khởi động, màu sắc, v.v.
Điều này có nghĩa là bạn không còn phải thêm vô số thẻ, thẻ chuẩn và thẻ không theo chuẩn (như <link rel="icon" ... /> hoặc <meta name="orientation" ... />) vào các trang của mình. Đối với các ứng dụng màn hình chính dành cho iOS, PWACompat thậm chí sẽ tự động tạo màn hình chờ để bạn không phải tạo màn hình chờ cho mọi kích thước màn hình.
Sử dụng PWACompat
Để sử dụng PWACompat, hãy nhớ liên kết với Tệp kê khai ứng dụng web trên tất cả các trang của bạn:
<link rel="manifest" href="manifest.webmanifest" />
Sau đó, hãy bao gồm tập lệnh này hoặc thêm tập lệnh này vào một gói đã tải không đồng bộ:
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat sẽ tìm nạp tệp kê khai của bạn và thực hiện công việc cần thiết cho trình duyệt của người dùng, bất kể họ đang dùng thiết bị di động hay máy tính.
Bạn vẫn nên thêm ít nhất một biểu tượng lối tắt chất lượng cao để lập chỉ mục tìm kiếm:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
Để biết thêm thông tin, hãy xem các phương pháp hay nhất.
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
Phân tích chuyên sâu
Đối với các trình duyệt được hỗ trợ, PWACompat thực sự làm gì? PWACompat sẽ tải Tệp kê khai ứng dụng web của bạn và:
- Tạo thẻ biểu tượng meta cho tất cả biểu tượng trong tệp kê khai (ví dụ: biểu tượng trang web, các trình duyệt cũ hơn)
- Tạo thẻ meta dự phòng cho các trình duyệt khác nhau (ví dụ: phiên bản iOS, ASan/Chromium, v.v.) mô tả cách mở ứng dụng web
- Đặt màu giao diện dựa trên tệp kê khai
Đối với Safari, PWACompat cũng:
- Đặt
apple-mobile-web-app-capable(mở mà không cần trình duyệt Chrome) cho chế độ hiển thịstandalone,fullscreenhoặcminimal-ui - Tạo hình ảnh
apple-touch-icon, thêm nền tệp kê khai vào các biểu tượng trong suốt: nếu không, iOS sẽ hiển thị độ trong suốt dưới dạng màu đen - Tạo hình ảnh chờ động, phù hợp nhất với hình ảnh chờ được tạo cho các trình duyệt dựa trên Chromium
Nếu bạn muốn đóng góp thêm hoặc muốn được trợ giúp thêm để hỗ trợ cho trình duyệt, hãy PWACompat có trên GitHub.
Dùng thử
PWACompat hoạt động trên Airhorner, v8.dev và Emojityper. HTML tiêu đề của trang web có thể đơn giản: chỉ cần chỉ định tệp kê khai và để PWACompat xử lý phần còn lại.
📢🤣🎉