หากคุณติดตั้ง Progressive Web App (PWA) ไว้ในโทรศัพท์ Android รุ่นล่าสุด คุณอาจเห็นว่าไอคอนของแอปมีพื้นหลังเป็นสีขาว Android 8.0 เปิดตัว ไอคอนแบบปรับอัตโนมัติซึ่งแสดงไอคอนแอปในรูปทรงต่างๆ ในอุปกรณ์แต่ละรุ่น ไอคอนที่ไม่ได้ใช้รูปแบบจะมีพื้นหลังสีขาว
ไอคอนที่มาสก์ได้คือไอคอนรูปแบบใหม่สำหรับ Chrome และ Firefox ที่ช่วยให้ Progressive Web App ใช้ไอคอนแบบปรับอัตโนมัติได้ และให้คุณควบคุมรูปลักษณ์ของไอคอนได้มากขึ้น
ไอคอนปัจจุบันของฉันพร้อมหรือยัง
เนื่องจากไอคอนที่มาสก์ได้ต้องรองรับรูปร่างที่หลากหลาย คุณจึงต้องใส่รูปภาพทึบแสงพร้อมระยะห่างจากขอบบางส่วนที่เบราว์เซอร์สามารถครอบตัดให้เป็นรูปร่างและขนาดที่จำเป็นสำหรับเบราว์เซอร์หรือแพลตฟอร์มใดก็ได้
ข้อกำหนดของไอคอนที่มาสก์ได้มี "โซนปลอดภัยขั้นต่ำ" ที่ได้มาตรฐาน ซึ่งทุกแพลตฟอร์มปฏิบัติตาม ส่วนสำคัญของไอคอน เช่น โลโก้ ต้องอยู่ภายในพื้นที่วงกลมตรงกลางของไอคอนซึ่งมีรัศมีเท่ากับ 40% ของความกว้างของไอคอน ขอบด้านนอก 10% อาจถูกครอบตัดในบางแพลตฟอร์ม
คุณสามารถตรวจสอบว่าส่วนใดของไอคอนอยู่ในโซนปลอดภัยได้โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ขณะที่ Progressive Web App เปิดอยู่ ให้เปิด DevTools แล้วไปที่แผงแอปพลิเคชัน ในส่วน Icons คุณสามารถเลือกให้แสดงเฉพาะพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้ ซึ่งจะตัดไอคอนออก เพื่อให้มองเห็นเฉพาะพื้นที่ที่ปลอดภัย หากเห็นโลโก้ของคุณในพื้นที่ปลอดภัยนี้ ไอคอนก็จะพร้อมใช้งาน
หากต้องการทดสอบไอคอนที่มาสก์ได้กับ Android รูปร่างต่างๆ ให้ใช้ Maskable.app ของ Tiger Oakes เปิดไอคอน แล้ว Maskable.app จะให้คุณได้ลองใช้รูปร่างและขนาดต่างๆ และแชร์ตัวอย่างกับทีม
ฉันจะใช้ไอคอนที่มาสก์ได้ได้อย่างไร
หากต้องการสร้างไอคอนที่มาสก์ได้โดยอิงตามไอคอนที่มีอยู่ ให้ใช้เครื่องมือแก้ไข Maskable.app อัปโหลดไอคอน ปรับสีและขนาด จากนั้นส่งออกรูปภาพ
หลังจากสร้างไอคอนที่มาสก์ได้และทดสอบในเครื่องมือสำหรับนักพัฒนาเว็บแล้ว คุณต้องอัปเดตไฟล์ Manifest ของเว็บแอปให้ชี้ไปยังเนื้อหาใหม่ ไฟล์ Manifest ของเว็บแอปจะให้ข้อมูลเกี่ยวกับเว็บแอปในไฟล์ JSON และมีอาร์เรย์ icons
ฟิลด์ purpose จะบอกเบราว์เซอร์ว่าควรใช้ไอคอนของคุณอย่างไร โดยค่าเริ่มต้น ไอคอนจะมีจุดประสงค์เป็น "any" ใน Android ไอคอนเหล่านี้จะได้รับการปรับขนาดบนพื้นหลังสีขาว
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
หากต้องการมาสก์ไอคอน ให้ตั้งค่า purpose เป็น "maskable" เพื่อระบุว่าควรใช้กับมาสก์ไอคอน ซึ่งจะนำพื้นหลังสีขาวออก
และช่วยให้คุณควบคุมรูปลักษณ์ของไอคอนได้มากขึ้น หรือจะระบุวัตถุประสงค์ที่คั่นด้วยการเว้นวรรคได้หลายข้อ (เช่น "any maskable") หากต้องการให้ระบบใช้ไอคอนที่มาสก์ได้โดยไม่มีการมาสก์ในอุปกรณ์อื่นๆ
ข้อความแสดงการยอมรับ
หน้านี้ได้รับการตรวจสอบโดย Joe Medley