ข้ามไปยังเนื้อหา
v2.5.1

PWA ฟิตเนส: สร้างแอปไม่ต้องผ่าน App Store | 2025

วิธีสร้าง fitness PWA ที่หลีกเลี่ยงค่าคอมมิชชั่น 30% ปัญหา iOS ทางเทคนิคและกลยุทธ์การนำไปใช้ที่ทดสอบแล้วกับ WorkoutGen

Jean-Baptiste Thery อัปเดตเมื่อ
  • PWA
  • Progressive Web App
  • mobile development
  • fitness tech
  • workout
  • Lemon Squeezy
Developer on MacBook

ความจริงเกี่ยวกับการสร้างแอปโดยไม่ต้องผ่าน App Store

คุณไม่จำเป็นต้องขออนุญาต Apple หรือ Google เพื่อเปิดตัวแอปมือถือระดับมืออาชีพ ผมกับเพื่อนที่เป็น โค้ชกีฬาสร้าง WorkoutGen - เครื่องมือสร้างโปรแกรมออกกำลังกายที่สร้างโปรแกรมเวทเทรนนิ่งในยิมส่วนบุคคล - เป็น Progressive Web App ที่ทำงานได้อย่างราบรื่นบนทุกอุปกรณ์โดยไม่ต้องผ่าน App Store หรือ Google Play

บทความนี้แบ่งปันประสบการณ์จริงของผมในการสร้างและนำ PWA ไปใช้งาน รวมถึงข้อได้เปรียบทางเศรษฐกิจ (เก็บรายได้เพิ่มขึ้น ~25% ต่อลูกค้า) ปัญหาทางเทคนิค (โดยเฉพาะบั๊กการเล่นวิดีโอบน Safari) และกลยุทธ์การนำไปใช้งาน ความเป็นจริงมีรายละเอียดมากกว่าที่การตลาดบอกไว้ แต่โอกาสก็มีอยู่จริง

อะไรที่ทำให้ Fitness PWA ดี?

Workout PWA ระดับมืออาชีพต้องมีคุณสมบัติเหล่านี้ (และ WorkoutGen มีครบทุกอย่าง):

  • สถาปัตยกรรมแบบออฟไลน์เป็นหลัก - เข้าถึงโปรแกรมออกกำลังกายได้โดยไม่ต้องใช้อินเทอร์เน็ต
  • ประสิทธิภาพเหมือนแอปดั้งเดิม - แอนิเมชั่นลื่นไหล ตอบสนองทันที
  • การจัดการมีเดีย - วิดีโอหรือ GIF แสดงท่าออกกำลังกายที่ทำงานได้บนทุกแพลตฟอร์ม
  • พร้อมท์การติดตั้ง - คำแนะนำที่ชัดเจนสำหรับผู้ใช้ที่ไม่คุ้นเคยกับ PWA
  • การชำระเงินแบบตรง - เรียกเก็บเงินผ่าน Lemon Squeezy โดยตรง (0% ค่าคอมมิชชั่นแพลตฟอร์ม เทียบกับ 30% จาก store)
  • ความสอดคล้องข้ามแพลตฟอร์ม - ประสบการณ์เหมือนกันบน iOS, Android, desktop

ทำไมผมถึงเลือก PWA แทน Native Apps

เหตุผลทางเศรษฐกิจที่น่าสนใจ

App Stores แบบดั้งเดิม:

  • ค่าคอมมิชชั่น 30% จากทุกธุรกรรม (Apple, Google)
  • ค่าธรรมเนียมนักพัฒนารายปี ($99-$299)
  • ระบบซื้อในแอปบังคับ
  • การแบ่งรายได้จากการสมัครสมาชิก (ปีที่ 1: 30%, ปีที่ 2+: 19%)

PWA + Lemon Squeezy โดยตรง:

  • ค่าคอมมิชชั่นแพลตฟอร์ม 0%
  • ค่าธรรมเนียมการประมวลผล Lemon Squeezy 5%+50¢
  • ควบคุมระบบเรียกเก็บเงินได้เต็มที่
  • อัปเดตการชำระเงินทันที (ไม่ต้องรอ 24-48 ชั่วโมงอย่าง App Store)

สำหรับการสมัครสมาชิก $10/เดือน คุณจะได้ $7.00 กับ app stores เทียบกับ ~$9.00 กับ Lemon Squeezy นั่นคือรายได้เพิ่มขึ้น ~25% ต่อลูกค้า

ความเป็นจริงในการพัฒนา

ฟีเจอร์ Native Apps PWA
Codebase แยก 2-3 ส่วน (iOS/Android/Web) Codebase เดียว
การอัปเดต รีวิวจาก Store (3-7 วัน) Deploy ทันที
การกระจาย ต้องได้รับอนุมัติจาก Store แชร์ URL ตรงๆ
การติดตั้ง ดาวน์โหลด 50MB+ แคช 2-5MB
รองรับออฟไลน์ ต้องทำเอง มาตรฐาน Service Worker

แล้วโซลูชันข้ามแพลตฟอร์มอื่นๆ ล่ะ?

ก่อนจะตัดสินใจใช้ PWA เต็มตัว ผมได้ประเมินทางเลือกข้ามแพลตฟอร์มหลักๆ:

React Native / Flutter: สัญญาว่า "เขียนครั้งเดียว ใช้ได้ทุกที่" แต่ยังต้อง:

  • แยก build pipeline สำหรับ iOS และ Android
  • โค้ดเฉพาะแพลตฟอร์มสำหรับฟีเจอร์ดั้งเดิม
  • ส่งและรออนุมัติจาก app store
  • ดาวน์โหลดแอป 40-60MB+
  • เรียนรู้ Dart (สำหรับ Flutter) - ภาษาใหม่ที่มี ecosystem เล็กกว่า JavaScript

Capacitor (Hybrid Wrapper): มีประโยชน์สำหรับการเข้าถึง native API แต่เพิ่มความซับซ้อน:

  • Overhead 15MB เพียงแค่สำหรับ wrapper
  • ยังต้องได้รับอนุมัติจาก app store สำหรับการกระจาย
  • สูญเสียข้อได้เปรียบการอัปเดตทันทีของ pure web apps
  • ควรใช้เป็นส่วนเสริมเท่านั้น ไม่ใช่ความจำเป็น

PWA + Capacitor (ตัวเลือกของผม): ผมสร้าง WorkoutGen เป็น pure PWA ก่อน พร้อม Capacitor wrapper แบบเลือกใช้สำหรับฟีเจอร์ดั้งเดิมภายหลัง วิธีนี้ให้:

  • ประสบการณ์หลักใช้งานได้ทุกที่ผ่าน web (ไม่ต้องผ่าน store)
  • Native app wrappers พร้อมใช้สำหรับการค้นพบใน App Store
  • Codebase เดียวพร้อมการปรับปรุงแบบมีเงื่อนไข
  • Deploy อัปเดต web ทันที อัปเดต native เมื่อจำเป็น

ความท้าทายทางเทคนิค (และวิธีแก้ไข)

การเล่นวิดีโอบน iOS: บั๊กเก่าแก่ของ Safari

ปัญหาที่ไม่มีวันตาย:

Safari บน iOS มีบั๊กการเล่นวิดีโอที่ยังไม่ได้รับการแก้ไขซึ่งรบกวนนักพัฒนา PWA มาหลายปี นี่ไม่ใช่การคาดเดา - มีบันทึกไว้ใน bug tracker ของ WebKit เอง:

ปัญหาล่าสุด:

  • iOS 26 (2025): วิดีโอค้างที่เฟรมแรกหลังจากปิดและเปิด PWA อีกครั้ง (WebKit Bug #300990)
  • iOS 15-18 (ต่อเนื่อง): สตรีมวิดีโอ getUserMedia() แสดงหน้าจอดำบางครั้งใน PWA (WebKit Bug #252465, รายงานเดือนกุมภาพันธ์ 2023, ถูกทำเครื่องหมายว่า "แก้ไขแล้ว" แต่ยังเกิดขึ้นอยู่)

รูปแบบในอดีต:

  • Bug #232076 (2021): วิดีโอจาก blob URL ใช้หน่วยความจำ 200-300MB สำหรับวิดีโอ 2MB ใช้เวลา 10+ วินาทีในการเริ่มเล่น แก้ไขใน iOS 15 หลังจากตรวจสอบหลายเดือน
  • Bug #198277 (2019-2022): เสียงหยุดเล่นเมื่อ PWA ถูกย้ายไปเบื้องหลัง ใช้เวลา 3 ปีในการแก้ไข (แก้ไขในที่สุดใน iOS 15.4, กุมภาพันธ์ 2022)
  • รายงานจาก Stack Overflow: วิดีโอที่เสิร์ฟจากไดเรกทอรี /public/ ไม่สามารถโหลดหลังจากรีเฟรชหน้าหรือติดตั้ง PWA บน Safari (ทั้ง iOS และ macOS) วิธีแก้: โฮสต์วิดีโอบน CDN ภายนอก

รูปแบบชัดเจน: บั๊กวิดีโอ/มีเดียใน Safari PWA ถูกรายงาน บางครั้งถูกทำเครื่องหมายว่า "แก้ไขแล้ว" จากนั้นก็กลับมาอีกในเวอร์ชัน iOS ใหม่

กลยุทธ์วิธีแก้ของผม:

สำหรับ WorkoutGen ผมใช้วิธีแก้ไขหลายแบบ:

  1. ใช้แอตทริบิวต์ crossorigin="anonymous" บนองค์ประกอบวิดีโอทั้งหมด
  2. เพิ่ม playsInline, muted และ autoPlay สำหรับความเข้ากันได้กับ iOS
  3. โหลดข้อมูล metadata ของวิดีโอล่วงหน้าเพื่อลดปัญหาการโหลด
  4. ติดตามบั๊กเฉพาะเวอร์ชัน iOS และปรับตัว (วิดีโอแยกสำหรับ iOS 26)
  5. ออกแบบ UX โดยคาดว่าวิดีโออาจล้มเหลว - จัดเตรียมคำแนะนำแบบข้อความเป็นทางเลือก

ความเป็นจริงที่น่าหงุดหงิด: บั๊กอย่าง #198277 ใช้เวลา 3 ปีในการแก้ไข และปัญหาที่ควรจะ "แก้ไขแล้ว" เช่น การเล่นวิดีโอ getUserMedia() (#252465) ยังคงปรากฏในเวอร์ชัน iOS ใหม่ๆ การสนับสนุน PWA ของ Apple ได้รับความสำคัญน้อยกว่า native app API อย่างชัดเจน โดยการแก้ไขต้องการ "การเปลี่ยนแปลงในระดับแพลตฟอร์มพื้นฐาน" แทนที่จะเป็นแพตช์ WebKit แบบด่วน

ไม่มี Native Install Events บน iOS

ปัญหา: Safari ไม่ยิง event beforeinstallprompt ทำให้เป็นไปไม่ได้ที่จะ:

  • แสดงพร้อมท์การติดตั้งแบบโปรแกรม
  • ตรวจสอบว่าผู้ใช้ติดตั้ง PWA ของคุณแล้วหรือไม่ก่อนโหลดหน้า
  • ติดตามความสำเร็จในการติดตั้งโดยไม่ต้องให้ผู้ใช้ทำอะไร

วิธีแก้ของผม: Video Tutorial Overlays

เนื่องจากผู้ใช้ iOS ไม่สามารถรับพร้อมท์การติดตั้งอัตโนมัติ ผมจึงสร้างขั้นตอนการเริ่มต้นใช้งานแบบกำหนดเอง:

// ตรรกะการตรวจจับจาก WorkoutGen
const isPWAInstalled = () => {
  // การตรวจจับ iOS
  if (window.navigator.standalone) return true

  // Android/Desktop
  if (window.matchMedia("(display-mode: standalone)").matches) return true

  return false
}

// แสดงบทช่วยสอนสำหรับเบราว์เซอร์ที่ไม่มี beforeinstallprompt
const browserInfo = detectBrowser()
if (!browserInfo.canInstallPWA && !isPWAInstalled()) {
  showVideoTutorial() // บทช่วยสอนแบบกำหนดเองพร้อมคำแนะนำการติดตั้ง
}

WorkoutGen แสดงวิดีโอสอนสั้นๆ ที่แสดงให้ผู้ใช้เห็นวิธีแตะ "Share → Add to Home Screen" บน iOS วิดีโอแสดงตามบริบท - คำแนะนำที่แตกต่างกันสำหรับ iOS 26 เทียบกับเวอร์ชันก่อนหน้า Safari เทียบกับ Chrome บน iOS

การลงทุนด้าน UX นี้มีความสำคัญ: หากไม่มีพร้อมท์การติดตั้งแบบดั้งเดิม การนำ PWA ไปใช้บน iOS ขึ้นอยู่กับการศึกษาผู้ใช้โดยสิ้นเชิง

กลยุทธ์การแคชของ Service Worker

การออกกำลังกายแบบออฟไลน์ต้องการการแคชอย่างจริงจัง WorkoutGen ใช้ Vite PWA Plugin กับ Workbox:

// การกำหนดค่าจริงจาก apps/frontend/vite.config.ts
VitePWA({
  registerType: "prompt",
  workbox: {
    globPatterns: ["**/*.{js,css,html,ico,png,svg,woff,woff2}"],
    globIgnores: ["**/*.mp4", "**/*.webm", "**/*.gif", "**/*.jpg", "**/*.jpeg", "**/*.webp"],
    maximumFileSizeToCacheInBytes: 40 * 1024 * 1024,
    cleanupOutdatedCaches: true,
    navigateFallback: null,
  },
})

การตัดสินใจที่สำคัญ:

  • แคชแอสเซ็ตแบบสแตติก (JS, CSS, ฟอนต์) สำหรับการโหลดทันที
  • ยกเว้นมีเดียขนาดใหญ่จาก precache - ดึงตามต้องการผ่าน CDN
  • จำกัดแคช 40MB เพื่อหลีกเลี่ยงปัญหาโควต้าพื้นที่เก็บข้อมูลบน iOS (Safari จำกัดที่ 50MB)
  • registerType: 'prompt' ให้ผู้ใช้ควบคุมว่าจะอัปเดตเมื่อไหร่
  • การแคชแบบรันไทม์สำหรับมีเดียออกกำลังกายด้วยกลยุทธ์ CacheFirst

สิ่งนี้ให้ WorkoutGen มีฟังก์ชันออฟไลน์เต็มรูปแบบในขณะที่อยู่ภายในขีดจำกัดพื้นที่เก็บข้อมูล iOS

สิ่งที่ทำให้ผมผิดหวังเกี่ยวกับ PWA (และทำไมผมยังมองโลกในแง่ดี)

การสนับสนุนเบราว์เซอร์จำกัดสำหรับฟีเจอร์การติดตั้ง

Safari (iOS): ไม่มี event beforeinstallprompt ไม่มี UI การติดตั้งอัตโนมัติ ไม่มีแบนเนอร์ติดตั้ง ผู้ใช้ต้องไปที่เมนู Share ด้วยตนเอง → "Add to Home Screen" - กระบวนการ 4 แตะที่คนส่วนใหญ่ไม่รู้ว่ามีอยู่

Firefox (Desktop): การสนับสนุนการติดตั้ง PWA ไม่สม่ำเสมอ บางเวอร์ชันสนับสนุน บางเวอร์ชันไม่สนับสนุน ปุ่มติดตั้งปรากฏอย่างคาดเดาไม่ได้

Chrome/Edge (Android): ใช้งานได้อย่างสมบูรณ์แบบกับพร้อมท์การติดตั้งแบบดั้งเดิม แต่เป็นส่วนน้อยทั่วโลกเมื่อคุณพิจารณาส่วนแบ่งตลาดของ iOS

วิธีแก้? สร้าง UX การติดตั้งแบบกำหนดเองสำหรับทุกเบราว์เซอร์ สำหรับ WorkoutGen ผมใช้:

  • วิดีโอสอนแสดงขั้นตอนการติดตั้ง iOS
  • การตรวจจับเบราว์เซอร์เพื่อแสดงคำแนะนำที่เกี่ยวข้อง
  • ปุ่ม "Add to Home Screen" แบบกำหนดเองที่เรียกคำแนะนำตามบริบท
  • ขั้นตอนที่แตกต่างกันสำหรับ iOS 26 เทียบกับเวอร์ชันก่อนหน้า

สิ่งนี้เพิ่มภาระการพัฒนา แต่จัดการได้เมื่อเทียบกับการดูแล codebase แบบดั้งเดิมแยกกัน

ผู้ใช้ส่วนใหญ่ไม่รู้ว่า PWA มีอยู่

นี่คือความท้าทายที่ใหญ่กว่า เมื่อคุณบอกใครสักคนว่า "ติดตั้งแอปนี้" พวกเขาคาดหวังที่จะไปที่ app store การอธิบายว่า "จริงๆ แล้วให้แตะปุ่มนี้ในเบราว์เซอร์ของคุณ" สร้างแรงเสียดทาน

ผมพบว่ากลยุทธ์สองอย่างนี้ได้ผล:

  1. อย่าเรียกมันว่า PWA - แค่บอกว่า "เพิ่มไปที่หน้าจอหลักของคุณเพื่อประสบการณ์แบบเต็มรูปแบบ"
  2. แสดงอย่าบอก - ใช้วิดีโอสอนที่สาธิตกระบวนการติดตั้ง

การศึกษาผู้ใช้เป็นงานจริงจัง แต่คุ้มค่าที่จะหลีกเลี่ยงค่าคอมมิชชั่นแพลตฟอร์ม 30% และได้การ deploy ทันที

ทำไมผมยังมองโลกในแง่ดีแม้มีข้อจำกัดเหล่านี้

นี่คือสิ่งที่เป็นจริง: PWA ถูกประเมินค่าต่ำอย่างมากสำหรับแอปพลิเคชันบางประเภท

สำหรับผลิตภัณฑ์ SaaS แพลตฟอร์มเนื้อหา และเครื่องมืออย่าง WorkoutGen:

  • ✅ คุณส่งมอบไปยังทุกแพลตฟอร์มตั้งแต่วันแรก (iOS, Android, desktop, web)
  • ✅ ประสบการณ์แบบเต็มหน้าจอ รองรับออฟไลน์โดยไม่ต้องผ่าน app stores
  • ✅ อัปเดตทันทีโดยไม่ต้องรอการรีวิว
  • ✅ เก็บรายได้ ~90% แทน 70% (ค่าธรรมเนียม Lemon Squeezy เทียบกับค่าคอมมิชชั่น app store)
  • ✅ ความสัมพันธ์โดยตรงกับผู้ใช้ (ไม่มีตัวกลางแพลตฟอร์ม)

ใช่ การสนับสนุน Safari น่าหงุดหงิด ใช่ การรับรู้ของผู้ใช้ต่ำ แต่เหล่านี้คือปัญหา UX ที่แก้ไขได้ ไม่ใช่ข้อจำกัดทางเทคนิคพื้นฐาน เทคโนโลยีหลักทำงานได้อย่างสวยงาม - มันแค่ถูกใช้น้อยเกินไปเพราะนักพัฒนาส่วนใหญ่เลือก native apps โดยไม่ได้ประเมิน PWA อย่างจริงจัง

แล้ว AI/ChatGPT สำหรับการวางแผนการออกกำลังกายล่ะ?

ChatGPT สามารถสร้างโปรแกรมออกกำลังกายได้ แต่ไม่เพียงพอสำหรับการเทรนนิ่งจริงจัง:

  • ไม่มีไลบรารีวิดีโอออกกำลังกาย - ChatGPT สามารถอธิบายท่าออกกำลังกาย แต่ไม่สามารถแสดงท่าที่ถูกต้องให้คุณเห็น WorkoutGen มีฐานข้อมูลวิดีโอที่สร้างขึ้นเองครอบคลุมทุกท่าออกกำลังกายเพื่อความแข็งแรงหลักพร้อมการสาธิตระดับมืออาชีพ
  • การก้าวหน้าที่มีโครงสร้าง - ไม่มีการติดตามการเพิ่มภาระรายสัปดาห์ การจัดช่วงเวลา หรือสัปดาห์ลดภาระ
  • การเข้าถึงออฟไลน์ - ต้องการอินเทอร์เน็ตสำหรับทุกคำถาม (ใช้งานไม่ได้ในยิมที่สัญญาณไม่ดี)
  • ความจำในการปรับแต่งส่วนบุคคล - สูญเสียบริบทระหว่างเซสชัน เว้นแต่คุณจะรักษาประวัติการสนทนาด้วยตนเอง
  • ไม่มีอินเทอร์เฟซการดำเนินการ - คุณได้แผนแบบข้อความ แต่ไม่มี workout player เพื่อแนะนำคุณผ่านเซต ช่วงพัก และลำดับการออกกำลังกาย

การสร้างฐานข้อมูลวิดีโอออกกำลังกายของ WorkoutGen ใช้เวลาหลายเดือน - ถ่ายทำ แก้ไข บีบอัด และปรับให้เหมาะสมสำหรับการเล่นบนมือถือ นี่คือสิ่งที่ AI ไม่สามารถให้ได้เพราะมันทำงานด้วยข้อความล้วนๆ การรวมกันของอัลกอริทึมที่มีโครงสร้าง + การสาธิตด้วยภาพ + การเข้าถึงออฟไลน์คือจุดที่ PWA โดดเด่นกว่า conversational AI

แล้ว YouTube สำหรับบทช่วยสอนการออกกำลังกายล่ะ?

YouTube ยอดเยี่ยมสำหรับการเรียนรู้ท่าออกกำลังกาย แต่แย่มากสำหรับการเทรนจริง:

  • ไม่มีโครงสร้างการออกกำลังกาย - คุณต้องรวม 6 วิดีโอที่แตกต่างกัน
  • โฆษณาขัดจังหวะระหว่างเซต - ทำลายจังหวะกลางการออกกำลังกาย
  • ไม่มีการติดตามความก้าวหน้า - ไม่สามารถบันทึกจำนวนครั้ง น้ำหนัก หรือการปรับปรุง
  • ต้องการอินเทอร์เน็ต - ใช้งานไม่ได้ในยิมที่สัญญาณไม่ดี

PWA ให้คุณทั้งสองอย่างที่ดีที่สุด: เนื้อหาวิดีโอที่คัดสรรแล้วภายในระบบเทรนนิ่งที่มีโครงสร้าง

คำแนะนำที่จริงใจของผม

สำหรับนักพัฒนาที่สร้างแอป fitness/productivity/SaaS:

  • เริ่มด้วย PWA เว้นแต่คุณจะต้องการ native API โดยเฉพาะ (HealthKit, ARKit, Background App Refresh)
  • ใช้ React 19 + Vite 7 + Vite PWA Plugin + Workbox เพื่อประสบการณ์นักพัฒนาที่ดีที่สุด
  • เพิ่ม Capacitor ภายหลังก็ได้หากคุณต้องการ native wrappers แบบเลือกใช้สำหรับการปรากฏใน app store
  • ทดสอบบนอุปกรณ์ iOS จริงตลอดการพัฒนา - บั๊ก PWA ของ Safari จะทำให้คุณประหลาดใจ
  • จัดสรรเวลาสำหรับ UX การติดตั้งแบบกำหนดเอง (วิดีโอสอน การตรวจจับเบราว์เซอร์ พร้อมท์ตามบริบท)

สำหรับผู้ประกอบการและผู้ก่อตั้งแบบ bootstrapped:

  • PWA เป็นอันดับแรกสำหรับ MVP - ส่งมอบไปยังทุกแพลตฟอร์มในหลายสัปดาห์ ไม่ใช่หลายเดือน ด้วย codebase เดียว
  • เศรษฐศาสตร์เอื้อต่อ PWA - เก็บรายได้ ~90% (Lemon Squeezy 5%+50¢) เทียบกับ 70% (app stores 30%)
  • การปรับปรุงทันที - Deploy อัปเดตในหลายวินาทีโดยไม่ต้องรอการรีวิว
  • App stores เป็นทางเลือก - เพิ่ม native wrappers ภายหลังเพื่อการค้นพบหากต้องการ แต่ผลิตภัณฑ์หลักทำงานได้ทุกที่ผ่าน web
  • พิจารณา native apps เมื่อมี MRR มากกว่า $10K เพื่อให้คุ้มค่ากับภาระ

สำหรับผู้ใช้:

  • ลอง WorkoutGen PWA: my.workoutgen.app
  • ติดตั้งผ่านเมนูเบราว์เซอร์: แตะ Share → "Add to Home Screen" (iOS) หรือปุ่มติดตั้งเบราว์เซอร์ (Android)
  • ทำงานออฟไลน์ เต็มหน้าจอ รู้สึกเหมือนแอปดั้งเดิม - โดยไม่ต้องดาวน์โหลด 50MB+

สรุป

หลังจากสร้าง WorkoutGen เป็น production PWA นี่คือสิ่งที่ผมได้เรียนรู้:

ข้อดี:

  • เก็บรายได้เพิ่มขึ้น ~25% ต่อลูกค้า - Lemon Squeezy 5%+50¢ เทียบกับ App Store 30%
  • ส่งมอบไปยังทุกแพลตฟอร์มจาก codebase เดียว - iOS, Android, desktop, web พร้อมกัน
  • Deploy อัปเดตทันที - ไม่มีความล่าช้าในการรีวิว (ชั่วโมงเทียบกับวัน)
  • ฟังก์ชันออฟไลน์เต็มรูปแบบ - Service Workers แคชทุกอย่างที่ผู้ใช้ต้องการ
  • ความเร็วในการพัฒนาที่เร็วขึ้น - ไม่มี native build toolchains หรือ API เฉพาะแพลตฟอร์ม

ความท้าทาย:

  • ⚠️ การสนับสนุน Safari PWA น่าหงุดหงิด - บั๊กการเล่นวิดีโอไม่ได้รับการแก้ไขมาหลายปี API จำกัด
  • ⚠️ ไม่มีพร้อมท์การติดตั้งอัตโนมัติบน iOS - ต้องการ UX แบบกำหนดเองและการศึกษาผู้ใช้
  • ⚠️ ความเข้ากันได้ของเบราว์เซอร์แตกต่างกัน - สิ่งที่ทำงานใน Chrome อาจพังใน Safari
  • ⚠️ การรับรู้ของผู้ใช้ต่ำ - คนส่วนใหญ่ไม่รู้ว่า PWA มีอยู่
  • ⚠️ ไม่มีการค้นพบจาก app store - คุณต้องมีทราฟฟิกออร์แกนิกหรือการได้มาแบบจ่ายเงิน

คำตัดสิน:

PWA ถูกประเมินค่าต่ำอย่างมากสำหรับกรณีการใช้งานเฉพาะ: เครื่องมือ SaaS แอป productivity แพลตฟอร์มเนื้อหา และแอปพลิเคชันอย่าง WorkoutGen ที่การเข้าถึงออฟไลน์ที่มีโครงสร้างสำคัญกว่าการจัดวางใน app store

เทคโนโลยีมีความเป็นผู้ใหญ่และพร้อมใช้งานจริง ความท้าทายเป็นหลัก UX และการศึกษาผู้ใช้ - ปัญหาที่แก้ไขได้ ไม่ใช่ข้อจำกัดพื้นฐาน หากคุณกำลังสร้างแอปที่คุณสามารถขับเคลื่อนทราฟฟิกของคุณเองและต้องการหลีกเลี่ยงค่าคอมมิชชั่นแพลตฟอร์ม PWA เสนอทางเลือกที่น่าสนใจแทนการพัฒนาแบบดั้งเดิม

WorkoutGen พิสูจน์ว่ามันใช้งานได้ในระดับใหญ่ ปัญหา 2-3 อย่าง (บั๊ก Safari การศึกษาผู้ใช้) ถูกครอบงำด้วยประโยชน์: การ deploy ทันที ค่าคอมมิชชั่นแพลตฟอร์มศูนย์ และการเข้าถึงข้ามแพลตฟอร์มที่แท้จริง

เริ่มโปรแกรมออกกำลังกายจริง ฟรี

สร้างแผนแบบค่อยเป็นค่อยไปพร้อมวิดีโอและการติดตาม แอปฟรี WorkoutGen Max เพิ่มคำแนะนำโหลด AI การปรับแต่งเต็มรูปแบบ และ analytics ขั้นสูง

เริ่มฟรี →

อ้างอิง

คำถามที่พบบ่อย

PWA ทดแทน native apps สำหรับแอปฟิตเนสได้จริงหรือ?

ได้ สำหรับแอปฟิตเนสส่วนใหญ่ WorkoutGen พิสูจน์ว่าคุณสามารถสร้างแพลตฟอร์มออกกำลังกายที่มีฟีเจอร์ครบถ้วนพร้อมการสนับสนุนออฟไลน์ การสาธิตวิดีโอ และการเรียกเก็บเงินแบบสมัครสมาชิกด้วย PWA ทั้งหมด ข้อยกเว้นคือแอปที่ต้องการ HealthKit, Apple Watch หรือการติดตาม GPS ในเบื้องหลัง - แอปเหล่านั้นยังต้องใช้โค้ดแบบดั้งเดิม สำหรับการเทรนความแข็งแรง HIIT หรือโยคะ PWA ส่งมอบทุกอย่างที่ผู้ใช้ต้องการ

คุณจัดการกับการขาดพร้อมท์การติดตั้งอัตโนมัติบน iOS อย่างไร?

ด้วยวิดีโอสอนและการศึกษาตามบริบท บน WorkoutGen เมื่อตรวจพบผู้ใช้ iOS ที่ไม่มี event beforeinstallprompt จะแสดงวิดีโอสั้นที่สาธิตวิธีแตะ Share แล้ว Add to Home Screen สิ่งนี้ถูกเรียกหลังจากผู้ใช้ได้รับคุณค่าจริงเพื่อให้มีแรงจูงใจในการติดตั้ง น้อยกว่าการดูแลรักษาแอป iOS ดั้งเดิมมาก

แล้วการค้นพบจาก app store ล่ะ - คุณไม่สูญเสียทราฟฟิกออร์แกนิกทั้งหมดหรือ?

ใช่ นี่คือจุดอ่อนที่ใหญ่ที่สุดของ PWA - คุณไม่สามารถถูกค้นพบโดยการเรียกดู App Store คุณต้องมีแหล่งทราฟฟิกของคุณเอง: SEO การตลาดเนื้อหา โซเชียลมีเดีย หรือโฆษณา สำหรับ WorkoutGen ผมมุ่งเน้นการค้นหาออร์แกนิกสำหรับคำเช่น workout generator และโปรแกรมเทรนส่วนตัว หากการค้นพบจาก app store สำคัญ พิจารณาแนวทางแบบผสมกับ native wrappers แบบเลือกใช้

PWA ทำงานออฟไลน์บน iOS ได้จริงหรือเป็นแค่การตลาด?

ทำงานออฟไลน์ได้อย่างแน่นอน - นี่คือพื้นที่ที่การสนับสนุน iOS PWA มั่นคง Service Workers ได้รับการสนับสนุนอย่างเต็มที่ตั้งแต่ iOS 11.3 ปี 2018 WorkoutGen แคชข้อมูลการออกกำลังกาย วิดีโอ และแอสเซ็ตเพื่อให้ผู้ใช้สามารถเทรนในโหมดเครื่องบิน ขีดจำกัดแคช 50MB บน Safari คือข้อจำกัดเดียว แต่สำหรับแอปส่วนใหญ่ก็เพียงพอ

ขนาดไฟล์เทียบกับ native apps เป็นอย่างไร?

PWA ของ WorkoutGen มีขนาด 2.8MB ของแอสเซ็ตที่แคชไว้ (JavaScript, CSS, ฟอนต์, ภาพ UI) มีเดียออกกำลังกายถูกดึงตามต้องการจาก CDN แอปดั้งเดิมที่เทียบเท่าจะมีขนาดอย่างน้อย 40-60MB PWA ยังอัปเดตแบบเพิ่มขึ้นด้วย - ดาวน์โหลดเฉพาะไฟล์ที่เปลี่ยนแปลง ไม่ใช่แอปทั้งหมด

คุณสามารถสร้างรายได้ด้วย PWA ได้จริงหรือ?

คุณสร้างรายได้มากกว่าด้วย PWA โดยใช้การผสานรวม Lemon Squeezy โดยตรง ไม่มีค่าคอมมิชชั่น app store 30% ไม่มีข้อจำกัดด้านราคา การประมวลผลการชำระเงินทันที ผมเก็บรายได้ประมาณ 90% หลังจากค่าธรรมเนียม 5%+50 เซนต์ Lemon Squeezy ยังจัดการกับความสอดคล้องด้านภาษีทั่วโลก - VAT, GST และภาษีขายในทุกประเทศ

คุณใช้ tech stack อะไรในการสร้าง WorkoutGen?

Frontend: React 19 กับ TypeScript strict mode. Build tool: Vite 7 กับ Vite PWA Plugin. แคช PWA ผ่าน Workbox. State management: TanStack Query สำหรับ server state, TanStack Store สำหรับ UI state. UI ด้วย shadcn/ui และ Tailwind CSS v4. Backend: Strapi v5 CMS. การชำระเงินผ่าน Lemon Squeezy. Frontend บน Cloudflare Pages. Native wrappers แบบเลือกใช้ผ่าน Capacitor 7.