PWACompat - ไฟล์ Manifest ของเว็บแอปสำหรับทุกเบราว์เซอร์

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

และแม้ว่าเบราว์เซอร์จำนวนมากจะเคารพไฟล์ Manifest ของเว็บแอป แต่ไม่ใช่ทุกเบราว์เซอร์ที่จะโหลดหรือแสดงผลตามค่าทั้งหมดที่คุณระบุ ป้อน PWACompat ซึ่งเป็นไลบรารีที่ใช้ไฟล์ Manifest ของเว็บแอปและแทรกแท็ก meta หรือ link ที่เกี่ยวข้องโดยอัตโนมัติสำหรับไอคอนขนาดต่างๆ, ไอคอน Fav, โหมดเริ่มต้น, สี และอื่นๆ

PWACompat จะใช้ไฟล์ Manifest ของเว็บแอปและเพิ่มแท็กเมตา ลิงก์ และอื่นๆ ทั้งแบบมาตรฐานและที่ไม่ได้มาตรฐาน

ซึ่งหมายความว่าคุณจะไม่ต้องเพิ่มแท็กจำนวนนับไม่ถ้วน ที่เป็นมาตรฐานและไม่เป็นมาตรฐาน (เช่น <link rel="icon" ... /> หรือ <meta name="orientation" ... />) ลงในหน้าเว็บอีกต่อไป และสำหรับแอปพลิเคชันหน้าจอหลักของ iOS นั้น PWACompat จะสร้างหน้าจอแนะนำแบบไดนามิก คุณจึงไม่ต้องสร้างหน้าจอสำหรับหน้าจอแต่ละขนาด

หน้าจอแนะนำของ iOS สำหรับ Emojityper ที่สร้างโดย PWACompat

การใช้ PWACompat

หากต้องการใช้ PWACompat คุณต้องลิงก์กับไฟล์ Manifest ของเว็บแอปในหน้าทั้งหมด โดยทำดังนี้

<link rel="manifest" href="manifest.webmanifest" />

จากนั้นรวมสคริปต์นี้ หรือเพิ่มสคริปต์ลงใน Bundle ที่โหลดแบบไม่พร้อมกัน

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

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

แต่ขอแนะนำให้เพิ่มไอคอนทางลัดคุณภาพสูงอย่างน้อย 1 ไอคอนสำหรับการจัดทำดัชนีการค้นหา โดยทำดังนี้

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

ดูข้อมูลเพิ่มเติมได้ในแนวทางปฏิบัติแนะนำ

หมายเหตุ: หรือลองโหลดไลบรารีหลังจากแพ็กเกจหลักด้วย import() แบบไดนามิกในแพลตฟอร์มที่สำคัญสำหรับคุณ แม้ว่าหน้าจอแนะนำจะเป็นสิ่งที่ยอดเยี่ยม แต่ก็ไม่สำคัญเท่าโค้ดที่เหลือในเว็บไซต์

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

เจาะลึก

สำหรับเบราว์เซอร์ที่รองรับ PWACompat ทำอะไรได้บ้างแล้ว PWACompat จะโหลดไฟล์ Manifest ของเว็บแอป และ:

• สร้างแท็กไอคอนเมตาสำหรับไอคอนทั้งหมดในไฟล์ Manifest (เช่น สำหรับไอคอน Fav, เบราว์เซอร์เวอร์ชันเก่า)
• สร้างเมตาแท็กสำรองสำหรับเบราว์เซอร์ต่างๆ (เช่น iOS, WebKit/Chromium Forks) ที่อธิบาย วิธีเปิดเว็บแอป
• ตั้งค่าสีธีมตามไฟล์ Manifest

สำหรับ Safari แล้ว PWACompat จะมีการดำเนินการต่อไปนี้ด้วย

• ตั้งค่า apple-mobile-web-app-capable (การเปิดโดยไม่ใช้เบราว์เซอร์ Chrome) สำหรับโหมดการแสดงผล standalone, fullscreen หรือ minimal-ui
• สร้างรูปภาพ apple-touch-icon รูป แล้วเพิ่มพื้นหลังไฟล์ Manifest ลงในไอคอนโปร่งใส มิเช่นนั้น iOS จะแสดงผลแบบโปร่งใสเป็นสีดำ
• สร้างรูปภาพแนะนำแบบไดนามิก ซึ่งตรงกับรูปภาพแนะนำที่สร้างขึ้นสำหรับเบราว์เซอร์ ที่ใช้ Chromium มากที่สุด

หากคุณต้องการให้ข้อมูลหรือความช่วยเหลือเพิ่มเติมเกี่ยวกับการสนับสนุนเบราว์เซอร์เพิ่มเติม PWACompat อยู่ใน GitHub แล้ว

ลองเลย

PWACompat เผยแพร่บน Airhorner, v8.dev และ Emojityper HTML ของส่วนหัวเว็บไซต์สามารถทำได้ง่าย เพียงระบุไฟล์ Manifest แล้วให้ PWACompat จัดการส่วนที่เหลือ

📢🤣🎉