หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Thomas Steiner

Tiger Oakes

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

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

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

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

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

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

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

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

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

แผงแอปพลิเคชันแสดงไอคอน PWA ที่ครอบตัด

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