harvis
web app

ติดตั้ง harvis.dev เป็นแอป

harvis.dev มีเว็บแมนิเฟสต์มาให้ เบราว์เซอร์จึงติดตั้งมันได้เหมือนแอปอื่น ๆ — หน้าต่างของตัวเอง ไอคอนของตัวเองบน Dock หรือหน้าจอโฮม ไม่มีสโตร์ ไม่มีตัวติดตั้ง ไม่ขอสิทธิ์ใด ๆ

why bother

ติดตั้งแล้วต่างอย่างไร

  • หน้าต่างของตัวเอง

    ไม่มีแท็บ ไม่มีแถบที่อยู่ ตัวอัปโหลดและแดชบอร์ดเปิดในหน้าต่างแยกที่สะอาดตา และมีที่ของตัวเองในตัวสลับแอป

  • แตะครั้งเดียวก็เผยแพร่

    ไอคอนบน Dock แถบงาน หรือหน้าจอโฮม เปิดขึ้นมา ลากโฟลเดอร์ใส่ แล้วเว็บก็ออนไลน์ก่อนหน้าต่างจะนิ่งเสียอีก

  • ไม่มีอะไรต้องดาวน์โหลด

    มันคือเว็บเดียวกับที่คุณกำลังอ่านอยู่ — การติดตั้งแค่เพิ่มไอคอนกับหน้าต่าง ไม่มีไฟล์ติดตั้ง ไม่มีบัญชีสโตร์ ไม่มีอัปเดตเบื้องหลังให้อนุมัติ

วิธีติดตั้ง

เลือกเบราว์เซอร์ที่คุณกำลังอ่านหน้านี้อยู่ ทุกเส้นทางจบเหมือนกัน: harvis.dev ไปอยู่ข้างแอปเนทีฟของคุณ

Chrome, Edge หรือ Brave บนเดสก์ท็อป

  1. 01ดูที่ปลายขวาของแถบที่อยู่ จะเห็นไอคอนติดตั้ง — จอมอนิเตอร์เล็ก ๆ ที่มีลูกศรชี้ลง
  2. 02ไม่เห็นไอคอน? เปิดเมนูเบราว์เซอร์แล้วเลือก “ติดตั้งหน้าเว็บเป็นแอป” (ใน Edge อยู่ที่ แอป → ติดตั้งไซต์นี้เป็นแอป)
  3. 03ยืนยัน แล้ว harvis.dev จะเปิดในหน้าต่างของตัวเองและไปอยู่ในรายการแอปของคุณ

Chrome บน Android

  1. 01แตะเมนู ⋮ ที่มุมขวาบน
  2. 02เลือก “เพิ่มไปยังหน้าจอหลัก” แล้วแตะ “ติดตั้ง”
  3. 03ไอคอนจะไปอยู่บนหน้าจอหลักและเปิดขึ้นโดยไม่มีกรอบเบราว์เซอร์

Safari บน iPhone และ iPad

  1. 01แตะปุ่มแชร์ — รูปสี่เหลี่ยมที่มีลูกศรชี้ขึ้น
  2. 02เลื่อนแผงลงมา แตะ “เพิ่มไปยังหน้าจอโฮม” แล้วแตะ “เพิ่ม”
  3. 03iOS อ่านแมนิเฟสต์เดียวกัน แต่ไม่เคยขึ้นข้อความชวนติดตั้ง ทางนี้จึงเป็นทางเดียว

Safari บน Mac

  1. 01เปิด harvis.dev ในแท็บปกติ
  2. 02เลือก ไฟล์ → เพิ่มไปยัง Dock บนแถบเมนู ตั้งชื่อ แล้วคลิก เพิ่ม
  3. 03ต้องใช้ macOS Sonoma ขึ้นไป — Safari รุ่นก่อนหน้าติดตั้งเว็บแอปไม่ได้

Firefox บนเดสก์ท็อปเลิกรองรับการติดตั้งเว็บแอปแล้ว บุ๊กมาร์กจึงใกล้เคียงที่สุด ส่วน Firefox บน Android ยังมี “เพิ่มไปยังหน้าจอหลัก” ในเมนู

ในแมนิเฟสต์มีอะไร

การติดตั้งทั้งหมดขับเคลื่อนด้วยไฟล์เดียวที่ /site.webmanifest เบราว์เซอร์อ่านจากตรงนั้นว่าแอปชื่ออะไร ใช้ไอคอนไหน และหน้าต่างควรเปิดอย่างไร

site.webmanifest
{
  "name": "harvis.dev",
  "short_name": "harvis.dev",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#13161a",
  "theme_color": "#13161a",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

“standalone” คือฟิลด์ที่ตัดกรอบเบราว์เซอร์ออก ส่วนไอคอน maskable คือไอคอนที่ Android จะครอปเป็นรูปทรงของมันเอง

ทำให้เว็บของคุณติดตั้งได้

ทุกเว็บที่คุณเผยแพร่บน harvis.dev ติดตั้งได้แบบเดียวกันเป๊ะ วาง manifest.json ไว้ข้าง index.html อ้างถึงมันใน head แล้วใส่ไอคอนขนาด 192px กับ 512px — ข้อกำหนดมีเท่านี้

html
<!-- index.html -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#13161a">

เบราว์เซอร์ยังต้องการ HTTPS ก่อนจะเสนอให้ติดตั้ง ทุกที่อยู่ของ harvis.dev ให้บริการผ่าน HTTPS อยู่แล้ว จึงไม่ต้องตั้งค่าอะไร

เผยแพร่เว็บดาวน์โหลดทั้งหมด