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

Thomas Steiner
Tiger Oakes

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

วันที่ ไอคอน PWA ในวงกลมสีขาวบน Android
ไอคอน PWA แบบโปร่งใสจะปรากฏในวงกลมสีขาวบน Android

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

วันที่ ไอคอน PWA ที่ครอบคลุมทั้งวงกลมใน Android
ไอคอนที่มาสก์ได้จะครอบคลุมทั้งวงกลมแทน

ไอคอนปัจจุบันของฉันพร้อมใช้งานไหม

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

รูปทรงของไอคอนตามแพลตฟอร์มที่ต่างกัน

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

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

วันที่ แผงแอปพลิเคชันในเครื่องมือสำหรับนักพัฒนาเว็บแสดงไอคอน PWA ที่ครอบตัดขอบ
แผงแอปพลิเคชันที่แสดงไอคอน PWA ที่ครอบตัดแล้ว

หากต้องการทดสอบไอคอนที่มาสก์ได้กับรูปร่างต่างๆ ของ Android ให้ใช้ Tiger Oakes Maskable.app เปิดไอคอน จากนั้น Maskable.app จะช่วยให้คุณ ลองใช้รูปร่างและขนาดที่หลากหลาย แล้วแชร์ตัวอย่างกับทีมของคุณ

ฉันจะนำไอคอนที่มาสก์ไปใช้ได้อย่างไร

หากต้องการสร้างไอคอนที่มาสก์ได้โดยอิงจากไอคอนที่มีอยู่ คุณสามารถใช้ ตัวแก้ไข 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