หากได้ติดตั้ง Progressive Web App (PWA) ในโทรศัพท์ Android รุ่นล่าสุด คุณจะทำสิ่งต่อไปนี้ได้ อาจสังเกตเห็นว่าไอคอนของแอปมีพื้นหลังเป็นสีขาว เปิดตัว Android 8.0 ไอคอนแบบปรับอัตโนมัติ ซึ่งแสดงไอคอนแอปเป็นรูปร่างต่างๆ ในอุปกรณ์ต่างๆ ไอคอนที่ไม่ได้ใช้รูปแบบนี้จะมีพื้นหลังสีขาว
ไอคอนที่มาสก์ได้คือไอคอนรูปแบบใหม่สำหรับ Chrome และ Firefox ซึ่งช่วยให้ Progressive Web App ใช้ไอคอนแบบปรับอัตโนมัติและให้คุณควบคุมสิ่งต่างๆ ได้มากขึ้น ของไอคอน
ไอคอนปัจจุบันของฉันพร้อมใช้งานไหม
เนื่องจากไอคอนที่มาสก์ได้ต้องรองรับรูปร่างที่หลากหลาย คุณจึงต้องใส่ รูปภาพทึบแสงโดยมีระยะห่างจากขอบบางส่วนซึ่งเบราว์เซอร์สามารถครอบตัดให้เท่ากับขนาดที่กำหนด รูปร่างและขนาดสำหรับเบราว์เซอร์หรือแพลตฟอร์มใดก็ได้
ข้อกำหนดสำหรับไอคอนที่มาสก์ได้จะมีมาตรฐาน "โซนปลอดภัยขั้นต่ำ" ที่ทุกแพลตฟอร์มให้ความสำคัญ ส่วนสำคัญของ เช่น โลโก้ จะต้องอยู่ภายในพื้นที่วงกลมที่กึ่งกลาง ที่มีรัศมีเท่ากับ 40% ของความกว้างไอคอน ขอบด้านนอก 10% อาจจะ ครอบตัดในบางแพลตฟอร์มแล้ว
คุณใช้ Chrome ตรวจสอบว่าส่วนใดของไอคอนอยู่ในโซนปลอดภัยได้ เครื่องมือสำหรับนักพัฒนาเว็บ เมื่อเปิด Progressive Web App ให้เปิดเครื่องมือสำหรับนักพัฒนาเว็บและไปที่ แผงแอปพลิเคชัน ในส่วนไอคอน คุณสามารถเลือก แสดงเฉพาะพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้ การดำเนินการนี้จะตัดไอคอน เฉพาะพื้นที่ปลอดภัยเท่านั้นที่จะมองเห็นได้ หากโลโก้ของคุณปรากฏในพื้นที่ปลอดภัยนี้ ไอคอนพร้อมใช้งานแล้ว
หากต้องการทดสอบไอคอนที่มาสก์ได้กับรูปร่างต่างๆ ของ Android ให้ใช้ Tiger Oakes Maskable.app เปิดไอคอน จากนั้น 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