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

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

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

PWACompat นำไฟล์ Manifest ของเว็บแอปและเพิ่มเมตา ลิงก์ แท็ก ฯลฯ แบบมาตรฐานและไม่เป็นมาตรฐาน
PWACompat นำไฟล์ Manifest ของเว็บแอปและเพิ่มเมตา ลิงก์ แท็ก ฯลฯ แบบมาตรฐานและไม่เป็นมาตรฐาน

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

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

การใช้ PWACompat

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

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

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

<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" />

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

<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 จะแสดงผลความโปร่งใสเป็นสีดํา
  • สร้างรูปภาพหน้าจอเริ่มต้น (Splash) แบบไดนามิก ใกล้เคียงกับภาพเริ่มต้น (Splash) ที่สร้างขึ้นสำหรับเวอร์ชัน Chromium เบราว์เซอร์

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

ลองเลย

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

📢🤣🎉