เว็บแอปแม니เฟสต์
เขียน manifest.json ที่มี name, icons, start_url, display และ theme_color เพื่อให้เบราว์เซอร์เสนอคำสั่งเพิ่มไปยังหน้าจอหลัก
เว็บแอปแม니เฟสต์ เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
PWA คืออะไร
เว็บแอปแบบก้าวหน้า คือเว็บไซต์ที่มีความสามารถแบบแอปเนทีฟ เช่น ติดตั้งบนหน้าจอหลัก ใช้งานแบบออฟไลน์ และรับการแจ้งเตือนแบบพุชได้ องค์ประกอบหลักสามอย่างคือ Web App Manifest, Service Worker และ HTTPS
ไฟล์ Manifest
manifest.json (หรือ .webmanifest) คือไฟล์ JSON ที่อธิบายข้อมูลเมตาของแอป เบราว์เซอร์จะอ่านไฟล์นี้เพื่อเปิดใช้การเพิ่มลงหน้าจอหลัก และเปิดแอปของคุณในลักษณะเดียวกับแอปเนทีฟ
Manifest พื้นฐาน
Manifest ขั้นต่ำประกอบด้วยชื่อ ไอคอน URL เริ่มต้น และโหมดการแสดงผล
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}การเชื่อมโยง Manifest
เชื่อมโยงไฟล์นี้จาก HTML <head>
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">โหมดการแสดงผล
"display" ควบคุมส่วนควบคุมของหน้าต่างแอป ได้แก่ "standalone" (ไม่มีส่วนติดต่อของเบราว์เซอร์ ให้ความรู้สึกเหมือนแอป), "fullscreen" (เต็มหน้าจอและซ่อนแถบสถานะ), "minimal-ui" (มีส่วนควบคุมของเบราว์เซอร์บางส่วน) และ "browser" (แท็บปกติ)
ไอคอน — หลายขนาด
เตรียมไอคอนหลายขนาด Android รุ่นใหม่ต้องการขนาด 192 และ 512 ส่วน Apple ต้องการขนาดเพิ่มเติม ใช้ "purpose": "maskable" สำหรับไอคอน Android แบบปรับตามรูปทรง
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]แท็กเฉพาะของ Apple
iOS ยังรองรับ Manifest ได้ไม่ครบถ้วน ให้เพิ่มแท็กเมตาเฉพาะของ Apple สำหรับการเพิ่ม PWA ลงหน้าจอหลักบน iOS
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">ข้อความแจ้งการติดตั้ง
เบราว์เซอร์จะส่งเหตุการณ์ beforeinstallprompt เมื่อผ่านเงื่อนไขต่าง ๆ (มี Manifest, service worker, HTTPS และการมีส่วนร่วมของผู้ใช้) คุณสามารถเลื่อนการแสดงเหตุการณ์นี้ไว้ แล้วเรียกใช้จากส่วนติดต่อของคุณเองได้
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}ทางลัด (ทางลัดของแอป)
Manifest สามารถประกาศทางลัดที่จะปรากฏเมื่อกดไอคอนแอปที่ติดตั้งค้างไว้
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]หมวดหมู่และภาพหน้าจอ
เพิ่ม categories และ screenshots เพื่อให้ส่วนติดต่อการติดตั้งบน Chrome Android และ Windows มีรายละเอียดมากขึ้น
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]การทดสอบ Manifest
เปิด DevTools → Application → Manifest Chrome จะแสดงฟิลด์ของ Manifest ที่แยกวิเคราะห์แล้ว ตัวอย่างไอคอน และคำเตือนต่าง ๆ เช่น ไม่มีไอคอนหรือความเปรียบต่างต่ำ
เฟรมเวิร์กช่วยให้ทำได้ง่าย
Next.js: วาง manifest.webmanifest ไว้ใน public/ Nuxt: ติดตั้งโมดูล @vite-pwa/nuxt Vite: vite-plugin-pwa จะสร้าง Manifest และ service worker ให้โดยอัตโนมัติ
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};ตรวจสอบอย่างรวดเร็ว
ค่า display ใดใน Web App Manifest ที่ทำให้ PWA ซึ่งติดตั้งแล้วเปิดขึ้นโดยไม่มีส่วนติดต่อของเบราว์เซอร์เลย เหมือนแอปเนทีฟ
สรุป: Web App Manifest
ไฟล์ JSON ที่อธิบายข้อมูลเมตาของ PWA ให้ใส่ชื่อ ชื่อสั้น URL เริ่มต้น โหมดการแสดงผล สีธีม และไอคอนหลายขนาดพร้อมแบบ maskable เชื่อมโยงใน HTML ด้วย rel=manifest ส่วน iOS ต้องใช้แท็กเมตาเฉพาะของ Apple เหตุการณ์ก่อนแสดงข้อความติดตั้งใช้สำหรับสร้างส่วนติดต่อการติดตั้งแบบกำหนดเอง เพิ่มทางลัดและภาพหน้าจอเพื่อให้การติดตั้งมีรายละเอียดมากขึ้น เฟรมเวิร์กต่าง ๆ เช่น Vite PWA, Next และ Nuxt PWA ช่วยสร้างไฟล์โดยอัตโนมัติ
คำถามที่พบบ่อย
บทเรียน “เว็บแอปแม니เฟสต์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เว็บแอปแม니เฟสต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เว็บแอปแม니เฟสต์”
เขียน manifest.json ที่มี name, icons, start_url, display และ theme_color เพื่อให้เบราว์เซอร์เสนอคำสั่งเพิ่มไปยังหน้าจอหลัก คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “เว็บแอปแม니เฟสต์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เว็บแอปแม니เฟสต์
- การลงทะเบียนและวงจรชีวิตของ Service Worker
- กลยุทธ์การแคชออฟไลน์: CacheFirst และ NetworkFirst
- การแจ้งเตือนแบบพุช