รองรับไอคอนแบบปรับอัตโนมัติใน PWA ที่มีไอคอนที่มาสก์ได้

ไอคอนแอปที่ปรับตามแพลตฟอร์ม

Thomas Steiner

Tiger Oakes

ไอคอนที่มาสก์ได้คืออะไร

หากคุณติดตั้ง Progressive Web App ไว้ในโทรศัพท์ Android รุ่นล่าสุด คุณอาจเห็นไอคอนนี้ปรากฏขึ้นพร้อมพื้นหลังสีขาว Android Oreo เปิดตัวไอคอนแบบปรับอัตโนมัติ ซึ่งแสดงไอคอนแอปในรูปทรงที่หลากหลายในอุปกรณ์รุ่นต่างๆ ไอคอนที่ไม่เป็นไปตามรูปแบบใหม่นี้ จะได้รับพื้นหลังสีขาว

ไอคอนที่มาสก์ได้คือไอคอนรูปแบบใหม่ที่ให้คุณควบคุมได้มากขึ้นและช่วยให้ Progressive Web App ใช้ไอคอนแบบปรับอัตโนมัติได้ หากต้องมีไอคอนที่มาสก์ได้ ไอคอนจะแสดงเต็มทั้งรูปร่างและดูดี ในอุปกรณ์ Android ทุกเครื่อง เมื่อเร็วๆ นี้ Firefox และ Chrome ได้เพิ่มการรองรับรูปแบบใหม่นี้ และนำไปใช้ในแอปได้

ไอคอนปัจจุบันของฉันพร้อมหรือยัง

เนื่องจากไอคอนที่มาสก์ได้ต้องรองรับรูปร่างที่หลากหลาย คุณจึงต้องใส่รูปภาพทึบแสงพร้อมระยะห่างจากขอบบางส่วนที่เบราว์เซอร์สามารถครอบตัดให้เป็นรูปร่างและขนาดที่ต้องการได้ คุณไม่ควรเลือกใช้รูปร่างใดเป็นพิเศษ เนื่องจากรูปร่างสุดท้ายจะแตกต่างกันไปตามเบราว์เซอร์และแพลตฟอร์ม

โชคดีที่มี "โซนปลอดภัยขั้นต่ำ" ที่กำหนดมาเป็นอย่างดีและได้มาตรฐาน ซึ่งทุกแพลตฟอร์มให้ผลดี ส่วนสำคัญของไอคอน เช่น โลโก้ ควรอยู่ภายในพื้นที่วงกลมตรงกลางของไอคอนซึ่งมีรัศมีเท่ากับ 40% ของความกว้างของไอคอน ขอบด้านนอก 10% อาจถูกครอบตัด

คุณสามารถตรวจสอบว่าส่วนใดของไอคอนเข้าไปในโซนปลอดภัยได้โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ขณะที่ Progressive Web App เปิดอยู่ ให้เปิด DevTools แล้วไปที่แผงแอปพลิเคชัน ในส่วนไอคอน คุณสามารถเลือกแสดงเฉพาะพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้ ระบบจะตัดไอคอนออกเพื่อให้มองเห็นเฉพาะพื้นที่ปลอดภัย หากคุณมองเห็นโลโก้ของคุณ ในพื้นที่ปลอดภัยนี้ คุณก็พร้อม

หากต้องการทดสอบไอคอนที่มาสก์ได้ด้วยรูปร่างต่างๆ ของ Android ให้ใช้เครื่องมือ Maskable.app ที่ Tiger สร้างขึ้น เมื่อแตะไอคอน 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