Người dùng Safari dành cho iOS có thể thêm Ứng dụng web tiến bộ (PWA) vào màn hình chính của họ theo cách thủ công. Biểu tượng xuất hiện trên màn hình chính của iOS khi thêm PWA được gọi là biểu tượng cảm ứng của Apple. Lớp học lập trình này hướng dẫn bạn cách thêm biểu tượng cảm ứng của Apple vào một ứng dụng web tiến bộ (PWA). Hướng dẫn này giả định rằng bạn có quyền truy cập vào một thiết bị iOS.
Đo
Mở ứng dụng mẫu trong thẻ mới:
Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen
(Toàn màn hình).Hãy ghi lại URL của ứng dụng mẫu. URL này sẽ có dạng
https://example.glitch.me.
Chạy quy trình kiểm tra PWA Lighthouse trên ứng dụng mẫu của bạn trong Công cụ của Chrome cho nhà phát triển:
- Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Lighthouse.
- Đảm bảo bạn đã chọn hộp đánh dấu Ứng dụng web tiến bộ trong danh sách Danh mục.
- Nhấp vào nút Tạo báo cáo.
Trong mục Được tối ưu hoá cho PWA, Lighthouse sẽ báo cáo rằng ứng dụng mẫu không cung cấp biểu tượng cảm ứng Apple hợp lệ.
Thêm ứng dụng mẫu vào màn hình chính của iOS
Để minh hoạ cách biểu tượng cảm ứng của Apple mang lại trải nghiệm người dùng chỉn chu hơn, trước tiên, hãy thử thêm ứng dụng mẫu vào màn hình chính của thiết bị iOS khi chưa chỉ định biểu tượng cảm ứng của Apple.
- Mở Safari dành cho iOS.
- Mở URL của ứng dụng mẫu. Đây là URL như
https://example.glitch.memà bạn đã chú ý trước đó. - Nhấn vào biểu tượng Chia sẻ
> Thêm vào Màn hình chính. Có thể bạn sẽ phải vuốt sang trái để thấy tuỳ chọn này. - Nhấn vào Thêm.
Vì trang web chưa chỉ định biểu tượng cảm ứng của Apple, nên iOS chỉ tạo một biểu tượng cho trang web từ nội dung của trang.
Thêm biểu tượng cảm ứng Apple vào ứng dụng mẫu
- Huỷ nhận xét thẻ
<link rel="apple-touch-icon">ở cuối<head>củaindex.html.
…
<link rel="stylesheet" href="/index.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
<!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
<link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
</head>
…
Thêm ứng dụng mẫu vào màn hình chính của iOS (một lần nữa)
- Hãy thử thêm lại ứng dụng mẫu vào một màn hình chính của iOS. Lần này, một biểu tượng thích hợp sẽ được tạo cho trang web. Nếu kiểm tra lại trang bằng Lighthouse, bạn cũng sẽ thấy rằng bài kiểm tra Không cung cấp quy trình kiểm tra
apple-touch-iconhợp lệ hiện đã vượt qua.
