เครื่องมือตรวจสอบ Web App Manifest

Progressive Web App จะติดตั้งได้สมบูรณ์ก็ต่อเมื่อ manifest.json ของมันมีฟิลด์ที่เบราว์เซอร์และ App Store ตรวจสอบจริง ๆ ตัวตรวจสอบนี้จะแยกวิเคราะห์ manifest ที่คุณอัปโหลดและตรวจสอบตามข้อกำหนด W3C Web App Manifest ทีละฟิลด์: มันจะฟ้องถ้าขาด name และ short_name, อาร์เรย์ icons ว่างเปล่าหรือไม่ถูกต้อง, ไอคอนขาด src, sizes หรือ type, start_url ที่แยกวิเคราะห์ไม่ได้, ค่า display ที่ไม่รู้จัก และสตริง theme_color หรือ background_color ที่ไม่ใช่สี CSS ที่ถูกต้อง ทุกผลลัพธ์จะแสดงเป็นประโยคที่เข้าใจง่าย — ไม่ใช่การอ้างอิงข้อกำหนดแบบดิบ ๆ — เพื่อให้คุณรู้ว่าต้องแก้ไขอะไรและทำไมจึงสำคัญต่อความสามารถในการติดตั้ง

ฟีเจอร์เด่นคือการพรีวิวเขตปลอดภัยของไอคอน maskable Adaptive Icon ของ Android ใช้รูปทรงมาสก์ที่ระบบปฏิบัติการเลือก — วงกลม, สี่เหลี่ยมมน, หยดน้ำ และอื่น ๆ — กับไอคอนใด ๆ ที่ระบุ "purpose": "maskable" ทุกอย่างที่อยู่นอกวงกลมซึ่งครอบคลุม 40% ของพื้นที่แสดงผลไอคอนอาจถูกตัดทิ้ง ขึ้นอยู่กับมาสก์ที่อุปกรณ์ใช้ อัปโหลดไฟล์รูปไอคอนที่ manifest อ้างอิงพร้อมกับ manifest.json แล้วเครื่องมือนี้จะจับคู่ไฟล์ด้วยชื่อไฟล์, วาดไอคอน maskable แต่ละอันลงบน canvas ที่ขนาดที่ประกาศไว้ และซ้อนทับวงกลมเขตปลอดภัยจริงนั้น เพื่อให้คุณเห็นด้วยตาตัวเองว่าอาร์ตเวิร์กของคุณรอดจากการถูกตัดหรือไม่

ป้าย ผ่าน/ไม่ผ่าน ใต้แต่ละตัวอย่างไม่ใช่แค่รายการตรวจสอบสวย ๆ — มันมาจากการวิเคราะห์ข้อมูลภาพแบบทีละพิกเซลจริง ๆ เครื่องมือวัดปริมาณเนื้อหาที่ไม่ใช่พื้นหลังที่อยู่นอกวงกลมเขตปลอดภัย (เนื้อหาที่มาสก์จะตัดทิ้ง) และปริมาณความโปร่งใสของไอคอน (ไอคอน maskable ควรมีพื้นหลังทึบเต็มพื้นที่ เนื่องจากความโปร่งใสจะทำให้สีของมาสก์ที่อยู่ด้านล่างทะลุขึ้นมา) การตรวจสอบทั้งสองอย่างนี้ทำงานกับบิตแมปจริงที่คุณอัปโหลด ดังนั้นผลลัพธ์จึงสะท้อนไฟล์ไอคอนจริงของคุณ ไม่ใช่การคาดเดา

ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ: manifest.json อ่านด้วย File API, ไอคอนถูกถอดรหัสด้วย createImageBitmap หรือฟังก์ชันสำรอง FileReader/Image, และวิเคราะห์พิกเซลบน canvas ในหน่วยความจำ ไม่มีอะไรถูกอัปโหลดไปยังเซิร์ฟเวอร์ ซึ่งสำคัญมากหาก manifest ของคุณอ้างอิงชื่อแอปที่ยังไม่เปิดเผย, พาธ start_url ภายใน หรือไอคอนที่กำลังพัฒนา