PWACompat – Tệp kê khai ứng dụng web cho mọi trình duyệt

Bạn đã thiết kế một ứng dụng web, viết mã và trình chạy dịch vụ của ứng dụng đó, cuối cùng 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. bao gồm những mục như biểu tượng có độ phân giải cao để sử dụng, v.v. a 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 sẽ 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 theo 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 thủ mọi giá trị bạn chỉ định. Nhập PWACompat, thư viện này lấy Tệp kê khai ứng dụng web và tự động chèn các thẻ meta hoặc link 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 chuẩn (như <link rel="icon" ... /> hoặc <meta name="orientation" ... />) vào trang của bạn. Và dành cho trang chủ iOS PWACompat sẽ tự động tạo màn hình chờ để bạn không phải tạo một mã cho mỗi kích thước màn hình khác nhau.

Sử dụng PWACompat

Để sử dụng PWACompat, hãy nhớ liên kết đến Tệp kê khai ứng dụng web trên tất cả các trang:

<link rel="manifest" href="manifest.webmanifest" />

Sau đó, hãy đưa tập lệnh này vào 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 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 sử 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>

Chuyên sâu

Đối với các trình duyệt được hỗ trợ, PWACompat thực sự có chức năng 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ụ: cho favicon, trình duyệt cũ)
• Tạo thẻ meta dự phòng cho nhiều trình duyệt (ví dụ: iOS, WebKit/Chromium, v.v.) mô tả cách ứng dụng web mở ra
• Đặ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ó trình duyệt Chrome) cho chế độ hiển thị standalone, fullscreen hoặc minimal-ui
• Tạo apple-touch-icon hình ảnh, 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 thành màu đen
• Tạo hình ảnh chờ động, khớp gần như hoàn toàn 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 trợ giúp với việc hỗ trợ thêm cho trình duyệt, PWACompat có trên GitHub.

Dùng thử

PWACompat đang 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.

📢🤣🎉