แอปพลิเคชันเว็บแบบก้าวหน้า ( PWA ) หรือแอปเว็บแบบก้าวหน้า เป็น แอปพลิเคชันเว็บประเภทหนึ่งที่สามารถติดตั้งบนอุปกรณ์เป็นแอปพลิเคชัน แบบสแตนด์อโลน ได้^{[ 1 ]} PWA จะถูกติดตั้งโดยใช้แคชแบบออฟไลน์ของ เว็บ เบราว์เซอร์ ของอุปกรณ์ ^{[ 2 ]}

PWA ได้รับการแนะนำตั้งแต่ปี 2016 เป็นทางเลือกแทน แอปพลิเค ชันเนทีฟ (เฉพาะอุปกรณ์) โดยมีข้อดีคือไม่จำเป็นต้องรวมหรือแจกจ่ายแยกต่างหากสำหรับแพลตฟอร์มต่างๆ สามารถใช้งานได้บนระบบต่างๆ มากมาย รวมถึงอุปกรณ์เดสก์ท็อปและ มือถือ การเผยแพร่แอปไปยังระบบการจัดจำหน่ายดิจิทัล เช่นApple App Store , Google PlayหรือMicrosoft Storeบน Windows เป็นทางเลือกเสริม^{[ 2 ]}

เนื่องจาก PWA ถูกส่งในรูปแบบของเว็บเพจหรือเว็บไซต์ ที่สร้าง ^ขึ้นโดยใช้เทคโนโลยีเว็บทั่วไป เช่นHTML , CSS , JavaScriptและWebAssembly [ ^{3 ]}จึงสามารถทำงานได้บนแพลตฟอร์มใดก็ได้ที่มีเบราว์เซอร์ที่รองรับ PWA ณ ปี 2025 คุณสมบัติ PWA ได้รับการสนับสนุนในระดับที่แตกต่างกันโดยGoogle Chrome , Apple Safari , Brave , Firefox สำหรับ Android , Microsoft Edge [ ^{4 ] [ 5 ] และ} Firefox สำหรับ Windows ^{[ 6 ]}

ใน งานประชุมนักพัฒนาทั่วโลกของ Apple ในปี 2007 สตีฟ จ็อบส์ประกาศว่าiPhoneจะ "ใช้งานแอปพลิเคชันที่สร้างขึ้นตามมาตรฐานอินเทอร์เน็ต Web 2.0" ^{[ 7 ]} ไม่ จำเป็นต้องใช้ ชุดพัฒนาซอฟต์แวร์ (SDK) และแอปจะถูกรวมเข้ากับอุปกรณ์อย่างสมบูรณ์ผ่านเอ็นจิ้นเบราว์เซอร์Safari [ ^{8 ]}ต่อมาโมเดลนี้ได้เปลี่ยนไปใช้App Storeเพื่อเป็นการเอาใจนักพัฒนาที่ผิดหวัง^{[ 9 ]}ในเดือนตุลาคม 2007 จ็อบส์ประกาศว่า SDK จะเปิดตัวในปีถัดไป^{[ 8 ] ด้วยเหตุนี้ แม้ว่า Apple จะยังคงสนับสนุนเว็บแอป แต่}แอปพลิเคชัน iOS ส่วนใหญ่ได้เปลี่ยนไปใช้ App Store

ในช่วงต้นทศวรรษ 2010 เว็บเพจแบบไดนามิกทำให้เทคโนโลยีเว็บสามารถใช้สร้างเว็บแอปพลิ เคชันแบบโต้ตอบ ได้การออกแบบเว็บแบบตอบสนองและความยืดหยุ่นของขนาดหน้าจอทำให้การพัฒนา PWA เข้าถึงได้ง่ายขึ้น การปรับปรุงอย่างต่อเนื่องของ HTML, CSS และ JavaScript ทำให้เว็บแอปพลิเคชันสามารถรวมการโต้ตอบในระดับที่สูงขึ้น ทำให้ประสบการณ์ที่เหมือนเนทีฟเป็นไปได้บนเว็บไซต์^{[ 10 ]}

ในปี 2013 Mozilla ได้เปิดตัวFirefox OSซึ่งมีจุดประสงค์เพื่อเป็นระบบปฏิบัติการโอเพนซอร์ส สำหรับใช้งานเว็บแอปเป็นแอปเนทีฟบนอุปกรณ์เคลื่อนที่ Firefox OS ใช้ เอนจินการเรนเดอร์ Geckoร่วมกับอินเทอร์เฟซผู้ใช้ที่เรียกว่า Gaia ซึ่งเขียนด้วย HTML5 การพัฒนา Firefox OS สิ้นสุดลงในปี 2016 ^{[ 11 ]}และโครงการถูกยกเลิกอย่างสมบูรณ์ในปี 2017 ^{[ 12 ]}แม้ว่า Firefox OS เวอร์ชันแยกจะถูกนำไปใช้เป็นพื้นฐานของKaiOSซึ่งเป็นแพลตฟอร์มโทรศัพท์ฟีเจอร์โฟน^{[ 13 ]}

ในปี 2015 นักออกแบบ Frances Berriman และ วิศวกร Google Chrome Alex Russell ได้บัญญัติศัพท์ "progressive web apps" ^{[ 14 ]}เพื่ออธิบายแอปที่ใช้ประโยชน์จากคุณสมบัติใหม่ที่รองรับโดยเบราว์เซอร์สมัยใหม่ รวมถึงservice workersและweb app manifestsซึ่งช่วยให้ผู้ใช้สามารถอัปเกรดเว็บแอปเป็น progressive web applications ในระบบปฏิบัติการ ดั้งเดิม (OS) ของตนได้ จากนั้น Google ก็ทุ่มเทความพยายามอย่างมากในการส่งเสริมการพัฒนา PWA สำหรับ Android ^{[ 15 ] [ 16 ]} Firefox ได้แนะนำการสนับสนุน service workers ในปี 2016 และ Microsoft Edge และ Apple Safari ก็ตามมาในปี 2018 ^{[ 17 ] [ 15 ]}ทำให้ service workers พร้อมใช้งานบนระบบหลักทั้งหมด

ภายในปี 2019 PWA ได้รับการสนับสนุนโดยเบราว์เซอร์เวอร์ชันเดสก์ท็อปบางตัว รวมถึงMicrosoft Edge ^{[ 18 ]} (บนWindows ) และGoogle Chrome ^{[ 19 ]} (บน Windows, macOS , ChromeOSและLinux )

ในเดือนธันวาคม 2020 Firefox สำหรับเดสก์ท็อปได้ยกเลิกการใช้งาน PWA (โดยเฉพาะอย่างยิ่ง ได้ลบการกำหนดค่า " เบราว์เซอร์เฉพาะไซต์ " ต้นแบบที่เคยมีให้เป็นฟีเจอร์ทดลอง) สถาปนิกของ Firefox กล่าวว่า "สัญญาณที่ผมหวังว่าเรากำลังส่งออกไปคือ การสนับสนุน PWA จะไม่มาถึง Firefox เวอร์ชันเดสก์ท็อปในเร็วๆ นี้" ^{[ 20 ]} Mozilla สนับสนุน PWA บน Android และวางแผนที่จะสนับสนุนต่อไป^{[ 21 ]} Firefox เวอร์ชัน 143.0 ซึ่งวางจำหน่ายในเดือนกันยายน 2025 ได้เพิ่มการสนับสนุน PWA บน Windows ^{[ 6 ]}

แอปเว็บแบบโปรเกรสซีฟได้รับการออกแบบให้ทำงานได้บนเบราว์เซอร์ใดๆ ก็ตามที่สอดคล้องกับมาตรฐานเว็บ ที่เหมาะสม เช่นเดียวกับโซลูชันข้ามแพลตฟอร์มอื่นๆ เป้าหมายคือการช่วยให้นักพัฒนาสร้างแอปข้ามแพลตฟอร์มได้ง่ายกว่าการสร้างแอปเนทีฟ^{[ ​​15 ]}แอปเว็บแบบโปรเกรสซีฟใช้กลยุทธ์การพัฒนาเว็บ แบบปรับปรุงแบบก้าวหน้า

แอปพลิเคชันเว็บแบบก้าวหน้าบางแอปใช้แนวทางสถาปัตยกรรมที่เรียกว่า App Shell Model ^{[ 25 ]}ในโมเดลนี้ Service Worker จะจัดเก็บส่วนติดต่อผู้ใช้พื้นฐานหรือ " shell " ของ เว็บแอปพลิเคชัน ที่ตอบสนองต่อการออกแบบเว็บไว้ ใน แคชออฟไลน์ของเบราว์เซอร์โมเดลนี้ช่วยให้ PWA สามารถคงการใช้งานแบบเนทีฟไว้ได้ไม่ว่าจะมีการเชื่อมต่อเว็บหรือไม่ก็ตาม ซึ่งสามารถปรับปรุงเวลาในการโหลดได้ โดยการจัดเตรียมเฟรมคงที่เริ่มต้น เลย์เอาต์ หรือสถาปัตยกรรมที่สามารถโหลดเนื้อหาได้แบบก้าวหน้าและแบบไดนามิก^{[ 26 ]}

เกณฑ์พื้นฐานทางเทคนิคสำหรับเว็บไซต์ที่จะถือว่าเป็นแอปพลิเคชันเว็บแบบก้าวหน้าและสามารถติดตั้งโดยเบราว์เซอร์ได้นั้น ได้รับการอธิบายโดย Russell ในปี 2016 ^{[ 27 ]}และได้รับการปรับปรุงตั้งแต่นั้นมา: ^{[ 28 ] [ 29 ]}

• มาจากแหล่งที่มาที่ปลอดภัย ให้บริการผ่านTLSและไม่มีเนื้อหาผสม (Mixed Content) ที่ใช้งานอยู่ แอปพลิเคชันเว็บแบบโปรเกรสซีฟ (Progressive Web Apps) ต้องให้บริการผ่านHTTPSเพื่อรับประกันความเป็นส่วนตัวของผู้ใช้ ความปลอดภัย และความถูกต้องของเนื้อหา
• ลงทะเบียน service worker กับ fetch handler แอปพลิเคชันเว็บแบบก้าวหน้าต้องใช้ service worker เพื่อสร้างแคชเนื้อหาที่ตั้งโปรแกรมได้ แตกต่างจากแคชเว็บ HTTP ทั่วไป ซึ่งจะแคชเนื้อหาหลังจากการใช้งานครั้งแรก จากนั้นจึงอาศัยฮิวริสติกต่างๆ เพื่อเดาว่าเมื่อใดที่เนื้อหาไม่จำเป็นอีกต่อไป แคชที่ตั้งโปรแกรมได้สามารถดึงเนื้อหาล่วงหน้าได้อย่างชัดเจนก่อนที่จะใช้งานครั้งแรก และทิ้งเนื้อหานั้นอย่างชัดเจนเมื่อไม่จำเป็นอีกต่อไป^{[ 30 ]}ข้อกำหนดนี้ช่วยให้สามารถเข้าถึงหน้าเว็บแบบออฟไลน์หรือบนเครือข่ายคุณภาพต่ำได้
• อ้างอิงถึง ไฟล์ manifestของเว็บแอป ไฟล์manifest ต้องมีคุณสมบัติหลักอย่างน้อยห้าประการ ได้แก่nameหรือshort_name, start_url, และdisplay(โดยมีค่าเป็นหรือstandalone) และ(โดยมีเวอร์ชัน 192 พิกเซลและ 512 พิกเซล) ข้อมูลที่อยู่ในไฟล์ manifest ทำให้ PWA สามารถแชร์ได้ง่ายผ่าน URL ค้นพบได้โดยเครื่องมือค้นหา และลดขั้นตอนการติดตั้งที่ซับซ้อน (แต่ PWA อาจยังคงอยู่ในรายการแอปสโตร์ของ บุคคลที่สาม ) ^{[ 31 ]}นอกจากนี้ PWA ยังรองรับการโต้ตอบและการนำทางแบบแอปเนทีฟ รวมถึงการเพิ่มลงในหน้าจอหลักการแสดงหน้าจอสาดฯลฯfullscreenminimal-uiicons

มีเทคโนโลยีมากมายที่ใช้กันทั่วไปในการสร้างแอปพลิเคชันเว็บแบบก้าวหน้า แอปพลิเคชันเว็บจะถือว่าเป็น PWA หากตรงตามเกณฑ์การติดตั้ง ดังนั้นจึงสามารถทำงานแบบออฟไลน์ได้ และสามารถเพิ่มลงในหน้าจอหลักของอุปกรณ์ได้ เพื่อให้ตรงตามคำจำกัดความนี้ PWA ทั้งหมดต้องมีไฟล์ manifest และ service worker อย่างน้อยที่สุด^{[ 32 ] [ 33 ] [ 34 ]}อาจใช้เทคโนโลยีอื่นๆ ในการจัดเก็บข้อมูล สื่อสารกับเซิร์ฟเวอร์ หรือเรียกใช้โค้ด

รายการ แสดงรายละเอียดของเว็บแอป^{[ 35 ]}เป็นข้อกำหนดของWorld Wide Web Consortium (W3C) ที่กำหนด รายการแสดงรายละเอียดแบบ JSON (โดยปกติจะมีชื่อว่า manifest.json) ^{[ 31 ]}เพื่อให้นักพัฒนาสามารถมีสถานที่ส่วนกลางในการใส่ข้อมูลเมตาที่เกี่ยวข้องกับเว็บแอปพลิเคชัน ซึ่งรวมถึง:

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

ข้อมูลเมตาเหล่านี้มีความสำคัญอย่างยิ่งสำหรับการเพิ่มแอปไปยังหน้าจอหลักหรือแสดงรายการร่วมกับแอปพื้นฐานอื่นๆ

iOS Safari ใช้ manifest เพียงบางส่วน ในขณะที่เมตาเดต้า PWA ส่วนใหญ่สามารถกำหนดได้ผ่านส่วนขยายเฉพาะของ Apple สำหรับเมตาแท็ก แท็กเหล่านี้อนุญาตให้นักพัฒนาสามารถเปิดใช้งานการแสดงผลแบบเต็มหน้าจอ กำหนดไอคอนและหน้าจอสแปลช และระบุชื่อสำหรับแอปพลิเคชัน^{[ 36 ] [ 37 ]}

Service worker คือweb workerที่ใช้พร็อกซีเครือข่ายแบบโปรแกรมได้ซึ่งสามารถตอบสนองต่อคำขอเว็บ/HTTP จากเอกสารหลักได้ Service worker สามารถตรวจสอบความพร้อมใช้งานของเซิร์ฟเวอร์ระยะไกล แคชเนื้อหาเมื่อเซิร์ฟเวอร์นั้นพร้อมใช้งาน และให้บริการเนื้อหานั้นแก่เอกสารในภายหลัง Service worker เช่นเดียวกับ web worker อื่นๆ ทำงานแยกต่างหากจากบริบทของเอกสารหลัก Service worker สามารถจัดการการแจ้งเตือนแบบพุชและซิงโครไนซ์ข้อมูลในพื้นหลัง แคชหรือเรียกค้นคำขอทรัพยากร ดักจับคำขอเครือข่าย และรับการอัปเดตส่วนกลางโดยอิสระจากเอกสารที่ลงทะเบียนไว้ แม้ว่าเอกสารนั้นจะไม่ได้โหลดก็ตาม^{[ 38 ]}

พนักงานบริการจะผ่านวงจรชีวิตสามขั้นตอน ได้แก่ การลงทะเบียน การติดตั้ง และการเปิดใช้งาน การลงทะเบียนเกี่ยวข้องกับการบอกตำแหน่งของพนักงานบริการให้เบราว์เซอร์ทราบเพื่อเตรียมพร้อมสำหรับการติดตั้ง การติดตั้งจะเกิดขึ้นเมื่อไม่มีพนักงานบริการติดตั้งอยู่ในเบราว์เซอร์สำหรับเว็บแอป หรือหากมีการอัปเดตพนักงานบริการ การเปิดใช้งานจะเกิดขึ้นเมื่อปิดหน้าเว็บทั้งหมดของ PWA เพื่อไม่ให้เกิดความขัดแย้งระหว่างเวอร์ชันก่อนหน้ากับเวอร์ชันที่อัปเดตแล้ว วงจรชีวิตนี้ยังช่วยรักษาความสม่ำเสมอเมื่อสลับระหว่างเวอร์ชันของพนักงานบริการ เนื่องจากมีพนักงานบริการเพียงคนเดียวเท่านั้นที่สามารถใช้งานได้สำหรับโดเมน^{[ 38 ]}

WebAssembly ช่วยให้ โค้ดที่คอมไพ ล์ไว้ล่วงหน้าสามารถทำงานในเว็บเบราว์เซอร์ได้ด้วยความเร็วใกล้เคียงกับเนทีฟ^{[ ​​39 ]}ดังนั้นไลบรารีที่เขียนด้วยภาษาต่างๆ เช่นCจึงสามารถเพิ่มลงในเว็บแอปได้ WebAssembly ได้รับการประกาศในปี 2015 และเปิดตัวครั้งแรกในเดือนมีนาคม 2017 และกลายเป็นคำแนะนำของ W3C เมื่อวันที่ 5 ธันวาคม 2019 ^{[ 40 ] [ 41 ]}และได้รับรางวัล Programming Languages ​​Software AwardจากACM SIGPLANในปี 2021 ^{[ 42 ]}

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

พื้นที่จัดเก็บข้อมูลบนเว็บ

Web storageเป็น API มาตรฐานของ WHATWG ที่ช่วยให้สามารถจัดเก็บข้อมูลแบบคีย์-ค่าในเบราว์เซอร์สมัยใหม่ได้ API นี้ประกอบด้วยวัตถุสองชิ้นsessionStorage(ซึ่งช่วยให้สามารถจัดเก็บข้อมูลเฉพาะเซสชันที่จะถูกลบเมื่อสิ้นสุดเซสชันของเบราว์เซอร์) และlocalStorage(ซึ่งช่วยให้สามารถจัดเก็บข้อมูลที่คงอยู่ข้ามเซสชันได้) ^{[ 43 ]}

API ฐานข้อมูลที่จัดทำดัชนี

Indexed Database APIเป็น API ฐานข้อมูลมาตรฐาน W3C ที่มีให้ใช้งานในเบราว์เซอร์หลักทุกตัว API นี้รองรับโดยเบราว์เซอร์สมัยใหม่และช่วยให้สามารถจัดเก็บอ อบเจ็กต์ JSONและโครงสร้างใดๆ ที่สามารถแสดงเป็นสตริงได้^{[ 44 ]} Indexed Database API สามารถใช้งานร่วมกับไลบรารี wrapperที่ให้โครงสร้างเพิ่มเติมรอบๆ ได้

ในปี 2017 Twitter ได้เปิดตัว Twitter Lite ซึ่งเป็น PWA ทางเลือกแทนแอป AndroidและiOSอย่างเป็นทางการตามข้อมูลของ Twitter Twitter Lite ใช้พื้นที่เพียง 1–3% ของขนาดแอปแบบเนทีฟ^{[ ​​45 ]} Starbucksให้บริการ PWA ที่มีขนาดเล็กกว่าแอป iOS ที่เทียบเท่ากันถึง 99.84% หลังจากเปิดตัว PWA แล้ว Starbucks ก็มียอดสั่งซื้อออนไลน์เพิ่มขึ้นเป็นสองเท่า โดยผู้ใช้เดสก์ท็อปสั่งซื้อในอัตราใกล้เคียงกับผู้ใช้แอปบนมือถือ^{[ 46 ]}

จากการตรวจสอบที่เผยแพร่โดยForbes ในปี 2018 พบว่าผู้ใช้ PWA ของ Pinterestใช้เวลาบนเว็บไซต์มากกว่าเว็บไซต์บนมือถือรุ่นก่อนหน้าถึง 40% อัตรารายได้จากโฆษณาก็เพิ่มขึ้น 44% และการมีส่วนร่วมหลักเพิ่มขึ้น 60% ^{[ 47 ]} Flipkartพบว่าลูกค้า 60% ที่ถอนการติดตั้งแอปดั้งเดิมกลับมาใช้ PWA ของ Flipkart อีกครั้งLancômeพบว่าเวลาจนกว่าหน้าเว็บจะโต้ตอบได้ลดลง 84% ส่งผลให้การแปลงเพิ่มขึ้น 17% และเซสชันบนมือถือบน iOS เพิ่มขึ้น 53% ด้วย PWA ของพวกเขา^{[ 48 ]}

เนื่องจาก PWA ไม่จำเป็นต้องมีการรวมหรือแจกจ่ายแยกต่างหากสำหรับแพลตฟอร์มต่างๆ และสามารถใช้งานได้ผ่านทางเว็บ จึงไม่จำเป็นที่นักพัฒนาจะต้องเผยแพร่ผ่านระบบการจัดจำหน่ายดิจิทัล เช่นApple App Store , Google Play , Microsoft StoreหรือSamsung Galaxy Storeร้านค้าแอปหลักๆ รองรับการเผยแพร่ PWA ในระดับที่แตกต่างกัน^{[ 2 ]} Google Play, Microsoft Store ^{[ 49 ]}และ Samsung Galaxy Store รองรับ PWA แต่ Apple App Store ไม่รองรับ Microsoft Store เผยแพร่ PWA ที่มีคุณสมบัติบางรายการโดยอัตโนมัติ (แม้ว่าจะไม่มีคำขอจากผู้เขียนแอป) หลังจากค้นพบผ่านการจัดทำดัชนีของ Bing ^{[ 50 ]}

• Google Lighthouseคือเครื่องมือตรวจสอบแบบโอเพนซอร์สสำหรับ PWA ที่พัฒนาโดย Google

• ดัชนีมาตรฐานของกลุ่มทำงานด้านแอปพลิเคชันเว็บ