ทำให้ Progressive Web App ดูไม่เหมือนเว็บไซต์ แต่เหมือนแอป "จริง"
เมื่อเล่นบิงโกคำปากต่อปากของ Progressive Web App การตั้งค่าว่า "PWA เป็นเพียงแค่เว็บไซต์" ก็มีความปลอดภัย เอกสาร PWA ของ Microsoft ข้อตกลง เราระบุไว้ในเว็บไซต์นี้ และแม้แต่ Frances Berriman ผู้ได้รับการเสนอชื่อเข้าชิง PWA และ Alex Russell เขียนไว้ด้วยเช่นกัน ใช่แล้ว PWA เป็นแค่เว็บไซต์ แต่ยังมีมากกว่านั้นด้วย หากดำเนินการอย่างถูกต้อง PWA จะไม่ให้ความรู้สึกเหมือนเว็บไซต์ แต่เหมือนแอป "จริง" การให้ความรู้สึกเหมือนแอปจริงหมายความว่าอย่างไร
ในการตอบคำถามนี้ เราขออนุญาตใช้แอป Podcasts ของ Apple เป็นตัวอย่าง ซึ่งพร้อมให้ใช้งานใน macOS บนเดสก์ท็อปและ iOS (และ iPadOS ตามลำดับ) บนอุปกรณ์เคลื่อนที่ แม้ว่า Podcasts จะเป็นแอปพลิเคชันสื่อ แต่แนวคิดหลักที่ผมอธิบายพร้อมช่วยเหลือก็นำมาใช้กับแอปในหมวดหมู่อื่นๆ เช่นกัน
ทำงานแบบออฟไลน์ได้
หากมองย้อนกลับไปและนึกถึงแอปพลิเคชันเฉพาะแพลตฟอร์มที่คุณใช้ในโทรศัพท์มือถือหรือคอมพิวเตอร์เดสก์ท็อป สิ่งหนึ่งที่เห็นได้ชัดคือคุณจะไม่มีทางได้อะไรเลย แม้ว่าฉันจะออฟไลน์อยู่ แต่ฉันก็ยังมีอะไรใหม่ๆ อยู่ในแอป Podcasts เสมอ เมื่อไม่มีการเชื่อมต่อเครือข่าย แอปจะยังคงเปิดขึ้นตามปกติ ส่วนอันดับสูงสุดจะไม่แสดงเนื้อหาใดๆ แต่จะแสดงข้อความเชื่อมต่อไม่ได้ในขณะนี้ที่จับคู่กับปุ่มลองใหม่แทน อาจไม่ใช่ประสบการณ์ที่ไม่น่าพอใจที่สุด แต่ฉันก็มีอะไรบางอย่างอยู่
แอป Podcasts ใช้รูปแบบที่เรียกกันว่า App Shell เนื้อหาแบบคงที่ทั้งหมดที่จำเป็นต่อการแสดงแอปหลักจะได้รับการแคชไว้ในเครื่อง รวมถึงรูปภาพตกแต่ง เช่น ไอคอนเมนูด้านซ้ายมือและไอคอน UI หลักของโปรแกรมเล่น เนื้อหาแบบไดนามิก เช่น ข้อมูลอันดับสูงสุดจะโหลดตามคำขอเท่านั้น และมีเนื้อหาสำรองที่แคชไว้ในเครื่องในกรณีที่โหลดไม่สำเร็จ อ่านบทความโมเดล App Shell เพื่อดูวิธีนำโมเดลสถาปัตยกรรมนี้ไปใช้กับเว็บแอป
มีเนื้อหาออฟไลน์และเล่นสื่อได้
เมื่อออฟไลน์ผ่านลิ้นชักซ้ายมือ ฉันจะยังคงไปที่ส่วนดาวน์โหลดแล้วเพื่อเพลิดเพลินกับตอนของพอดแคสต์ที่ดาวน์โหลดไว้ให้เล่นได้ และจะแสดงพร้อมข้อมูลเมตาทั้งหมด เช่น อาร์ตเวิร์กและคำอธิบาย
เนื้อหาสื่อที่ดาวน์โหลดไว้ก่อนหน้านี้สามารถแสดงจากแคช เช่น ใช้สูตรอาหารแสดงเสียงและวิดีโอที่แคชไว้จากคลังกล่องงาน คุณเก็บเนื้อหาอื่นๆ ไว้ในแคชหรือใน IndexedDB ได้ทุกเมื่อ อ่านบทความพื้นที่เก็บข้อมูลสำหรับเว็บเพื่อดูรายละเอียดทั้งหมดและเพื่อให้ทราบว่าควรใช้เทคโนโลยีพื้นที่เก็บข้อมูลแบบใด หากมีข้อมูลที่ควรเก็บไว้ถาวรโดยไม่เสี่ยงต่อการถูกลบถาวรเมื่อหน่วยความจำที่ใช้ได้เหลือน้อย คุณอาจใช้ Persistent Storage API
การดาวน์โหลดในเบื้องหลังเชิงรุก
เมื่อกลับมาออนไลน์ ฉันจะค้นหาเนื้อหาได้ด้วยคำค้นหาอย่างเช่น http 203 และเมื่อฉันตัดสินใจสมัครรับข้อมูลผลการค้นหาพอดแคสต์ HTTP 203 ระบบจะดาวน์โหลดตอนล่าสุดของซีรีส์ทันทีโดยไม่ต้องถามคำถามใดๆ
การดาวน์โหลดตอนของพอดแคสต์เป็นการดำเนินการที่อาจใช้เวลานานกว่านั้น Background Fetch API จะช่วยให้คุณสามารถมอบสิทธิ์การดาวน์โหลดไปยังเบราว์เซอร์ ซึ่งจะดูแลการดาวน์โหลดในเบื้องหลัง สำหรับ Android เบราว์เซอร์ยังสามารถมอบสิทธิ์การดาวน์โหลดเหล่านี้ไปยังระบบปฏิบัติการเพิ่มเติมได้อีกด้วย ดังนั้น เบราว์เซอร์จึงไม่จำเป็นต้องทำงานอย่างต่อเนื่อง เมื่อดาวน์โหลดเสร็จเรียบร้อยแล้ว โปรแกรมทำงานของบริการของแอป (Service Worker) จะปลุกระบบและคุณเลือกได้ว่าจะดำเนินการอย่างไรกับการตอบกลับดังกล่าว
แชร์ไปยังและโต้ตอบกับแอปพลิเคชันอื่น
แอป Podcasts ทำงานร่วมกับแอปพลิเคชันอื่นๆ ได้อย่างเป็นธรรมชาติ เช่น เมื่อคลิกขวาที่ตอนที่ชอบ ผมสามารถแชร์ตอนนั้นกับแอปอื่นๆ ในอุปกรณ์ได้ เช่น แอป Messages นอกจากนี้ยังผสานรวมกับคลิปบอร์ดของระบบได้อย่างเป็นธรรมชาติอีกด้วย ผมสามารถคลิกขวาที่ตอนใดก็ได้ แล้วคัดลอกลิงก์ของตอนนั้น
Web Share API และ Web Share Target API ช่วยให้แอปแชร์และรับข้อความ ไฟล์ รวมถึงลิงก์ไปยังและจากแอปพลิเคชันอื่นๆ ในอุปกรณ์ได้ แม้ว่าเว็บแอปจะเพิ่มรายการเมนูลงในเมนูคลิกขวาในตัวของระบบปฏิบัติการไม่ได้ แต่ก็ยังมีวิธีอื่นๆ อีกมากมายที่สามารถลิงก์เข้าและออกจากแอปอื่นๆ ในอุปกรณ์ได้ Async Clipboard API ช่วยให้คุณอ่านและเขียนข้อมูลข้อความและรูปภาพ (รูปภาพ PNG) ไปยังคลิปบอร์ดของระบบได้โดยใช้โปรแกรม ใน Android คุณสามารถใช้ Contact Picker API เพื่อเลือกรายการจากโปรแกรมจัดการรายชื่อติดต่อของอุปกรณ์ หากให้บริการทั้งแอปเฉพาะแพลตฟอร์มและ PWA ให้ใช้ รับการติดตั้ง API แอปที่เกี่ยวข้อง เพื่อตรวจสอบว่าติดตั้งแอปเฉพาะแพลตฟอร์มหรือไม่ ซึ่งในกรณีนี้คุณไม่จำเป็นต้องกระตุ้นให้ผู้ใช้ติดตั้ง PWA หรือยอมรับข้อความ Push บนเว็บ
การรีเฟรชแอปในเบื้องหลัง
ในการตั้งค่าของแอป Podcasts ฉันกำหนดค่าแอปให้ดาวน์โหลดตอนใหม่ๆ โดยอัตโนมัติได้ แบบนั้นฉันก็ไม่ต้องคิดอะไรเลย เนื้อหาใหม่ๆ ก็จะยังคงอยู่ เวทมนตร์
Periodic Background Sync API ช่วยให้แอปรีเฟรชเนื้อหาเป็นประจำในเบื้องหลังโดยที่ไม่จำเป็นต้องเรียกใช้ ซึ่งหมายความว่าจะมีเนื้อหาใหม่พร้อมใช้งาน เพื่อให้ผู้ใช้เริ่มดูข้อมูลได้ทันทีเมื่อใดก็ตามที่ต้องการ
สถานะที่ซิงค์ผ่านระบบคลาวด์
และพร้อมกัน การสมัครใช้บริการของฉันจะซิงค์กับอุปกรณ์ทุกเครื่องที่ฉันเป็นเจ้าของ ในโลกที่ราบรื่น ฉันไม่ต้องกังวลกับการซิงค์การติดตามพอดแคสต์ด้วยตนเอง เช่นเดียวกัน ฉันไม่ต้องกลัวว่าตอนที่ฉันฟังไปแล้วบนเดสก์ท็อปจะใช้หน่วยความจำของอุปกรณ์เคลื่อนที่ไป สถานะการเล่นจะซิงค์กันและจะลบตอนที่ฟังโดยอัตโนมัติ
การซิงค์ข้อมูลสถานะแอปเป็นงานที่คุณมอบสิทธิ์ให้กับ Background Sync API ได้ การดำเนินการซิงค์ไม่จำเป็นต้องเกิดขึ้นทันที เพียงแค่ในที่สุดหรือแม้กระทั่งเมื่อผู้ใช้ปิดแอปอีกครั้งแล้ว
การควบคุมคีย์สื่อด้วยฮาร์ดแวร์
เวลาที่ฉันวุ่นกับแอปพลิเคชันอื่น เช่น อ่านหน้าข่าวในเบราว์เซอร์ Chrome ฉันก็ยังคงควบคุมแอป Podcasts ด้วยคีย์สื่อในแล็ปท็อปได้ ไม่จำเป็นต้องสลับไปที่แอป เพื่อข้ามไปข้างหน้าหรือข้างหลัง
คีย์สื่อได้รับการสนับสนุนโดย Media Session API วิธีนี้ช่วยให้ผู้ใช้ใช้คีย์สื่อฮาร์ดแวร์บนแป้นพิมพ์จริง หูฟัง หรือแม้กระทั่งควบคุมเว็บแอปจากคีย์สื่อซอฟต์แวร์บนสมาร์ทวอทช์ได้ แนวคิดเพิ่มเติมเพื่อให้การดำเนินการกรอวิดีโอเป็นไปอย่างราบรื่นคือการส่งรูปแบบการสั่นเมื่อผู้ใช้สำรวจเนื้อหาส่วนสำคัญ เช่น การส่งเครดิตเริ่มต้นหรือขอบเขตของบท
การทํางานหลายอย่างพร้อมกันและทางลัดของแอป
แน่นอนว่าผมทำงานหลายอย่างกลับไปใช้งานแอป Podcasts ได้จากทุกที่ แอปมีไอคอนที่เห็นได้ชัดเจนซึ่งผมสามารถวางไว้บนเดสก์ท็อปหรือแท่นชาร์จในแอปพลิเคชันได้ด้วย ระบบจึงเปิด Podcasts ได้ทันทีเมื่อต้องการ
Progressive Web App ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่สามารถติดตั้งลงในหน้าจอหลัก เมนูเริ่มต้น หรือแถบแอปพลิเคชันได้ การติดตั้งอาจเกิดขึ้นตามข้อความแจ้งเชิงรุก หรือควบคุมโดยนักพัฒนาแอปอย่างเต็มรูปแบบ บทความต้องทำอะไรบ้างเพื่อให้ติดตั้งได้ครอบคลุมทุกสิ่งที่คุณจำเป็นต้องทราบ เมื่อทํางานหลายอย่างพร้อมกัน PWA จะปรากฏขึ้นโดยแยกจากเบราว์เซอร์
การดำเนินการด่วนในเมนูตามบริบท
การดำเนินการของแอปที่พบบ่อยที่สุด เช่น การค้นหาเนื้อหาใหม่ และตรวจหาตอนใหม่จะพร้อมใช้งานจากเมนูตามบริบทของแอปใน Dock ฉันสามารถตัดสินใจเปิดแอปเมื่อเข้าสู่ระบบผ่านเมนูตัวเลือกได้ด้วย
เมื่อระบุทางลัดไอคอนแอปในไฟล์ Manifest ของเว็บแอปของ PWA คุณจะลงทะเบียนเส้นทางด่วนไปยังงานทั่วไปที่ผู้ใช้เข้าถึงได้โดยตรงจากไอคอนแอป ในระบบปฏิบัติการอย่าง macOS ผู้ใช้คลิกขวาที่ไอคอนแอปและตั้งค่าให้แอปเปิดขึ้นเมื่อเข้าสู่ระบบได้ด้วย เรากำลังดำเนินการกับข้อเสนอสำหรับเรียกใช้เมื่อเข้าสู่ระบบ
ทำหน้าที่เป็นแอปเริ่มต้น
แอปพลิเคชันอื่นๆ ของ iOS และแม้กระทั่งเว็บไซต์หรืออีเมลสามารถผสานรวมกับแอป Podcasts ได้โดยใช้ประโยชน์จากรูปแบบ URL ของ podcasts:// หากติดตามลิงก์อย่างเช่น podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 ขณะอยู่ในเบราว์เซอร์ ระบบจะนำฉันไปยังแอป Podcasts ทันทีและสามารถเลือกว่าจะติดตามหรือฟังพอดแคสต์นั้นได้
คุณยังจัดการสคีม URL ที่กำหนดเองอย่างเต็มรูปแบบไม่ได้ แต่ข้อเสนอการจัดการโปรโตคอล URL สำหรับ PWA ยังอยู่ระหว่างดำเนินการ ปัจจุบัน registerProtocolHandler() ที่มีคำนำหน้ารูปแบบ web+ คือทางเลือกที่ดีที่สุด
การผสานรวมระบบไฟล์ในเครื่อง
คุณอาจคิดไม่ออกในทันที แต่แอป Podcasts ผสานรวมกับระบบไฟล์ในเครื่องอยู่แล้ว เมื่อฉันดาวน์โหลดตอนของพอดแคสต์ ระบบจะจัดเก็บไฟล์ไว้ใน ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache ในแล็ปท็อป ไม่เหมือนกับ ~/Documents แน่นอนว่าไดเรกทอรีนี้ไม่ได้มีจุดประสงค์ให้ผู้ใช้ทั่วไปเข้าถึงโดยตรง แต่เป็นไดเรกทอรี
กลไกการเก็บข้อมูลอื่นๆ นอกเหนือจากการอ้างอิงไฟล์จะอยู่ในส่วนเนื้อหาออฟไลน์
File System Access API ช่วยให้นักพัฒนาซอฟต์แวร์มีสิทธิ์เข้าถึงระบบไฟล์ในเครื่องของอุปกรณ์ คุณจะใช้เครื่องมือดังกล่าวโดยตรงหรือผ่านไลบรารีที่รองรับ browser-fs-access ก็ได้ที่มีชุดสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ API แบบโปร่งใส ไดเรกทอรีของระบบไม่สามารถเข้าถึงเว็บได้เนื่องจากเหตุผลด้านความปลอดภัย
รูปลักษณ์ของแพลตฟอร์ม
สำหรับแอปพลิเคชัน iOS อย่าง Podcasts ยังมีข้อสรุปที่แน่ชัดอีกประการหนึ่งคือ จะไม่มีป้ายกำกับข้อความใดที่เลือกได้และข้อความทั้งหมดกลมกลืนไปกับแบบอักษรของระบบของเครื่อง และจะใช้ธีมสีของระบบ (โหมดมืด) ที่ฉันเลือกไว้ด้วย
การใช้ประโยชน์จากพร็อพเพอร์ตี้ CSS ของ user-select ที่มีค่า none จะช่วยป้องกันการเลือกองค์ประกอบ UI โดยไม่ได้ตั้งใจได้
อย่างไรก็ตาม โปรดระวังว่าอย่าใช้พร็อพเพอร์ตี้นี้ในทางที่ผิดเพื่อทำให้เลือกเนื้อหาแอปไม่ได้
ควรใช้สำหรับองค์ประกอบ UI เท่านั้น เช่น ข้อความบนปุ่ม ฯลฯ
ค่า system-ui
สำหรับพร็อพเพอร์ตี้ CSS font-family ช่วยให้คุณระบุแบบอักษร UI เริ่มต้นของระบบที่จะใช้สำหรับแอปได้
สุดท้าย แอปสามารถทำตามค่ากำหนดรูปแบบสีของผู้ใช้โดยอิงจากตัวเลือก prefers-color-scheme พร้อมตัวเลือกโหมดมืด (ไม่บังคับ) เพื่อลบล้างตัวเลือกนี้
อีกสิ่งหนึ่งที่ต้องตัดสินใจอาจเป็นสิ่งที่เบราว์เซอร์ควรทำเมื่อไปถึงขอบเขตของพื้นที่เลื่อน เช่น ในการใช้งานการดึงเพื่อรีเฟรชที่กำหนดเอง
คุณสามารถทำได้โดยใช้พร็อพเพอร์ตี้ CSS overscroll-behavior
แถบชื่อที่กำหนดเอง
เมื่อดูหน้าต่างแอป Podcasts คุณสังเกตเห็นว่าหน้าต่างไม่มีแถบชื่อและแถบเครื่องมือแบบคลาสสิกที่ผสานรวมอยู่ เช่น หน้าต่างเบราว์เซอร์ Safari แต่เป็นประสบการณ์ที่กำหนดเองซึ่งมีลักษณะเหมือนแถบด้านข้างกับหน้าต่างโปรแกรมเล่นหลัก
ขณะนี้เรากำลังดำเนินการปรับแต่งแถบชื่อไม่ได้ในขณะนี้
อย่างไรก็ตาม คุณสามารถ (และควร) ระบุพร็อพเพอร์ตี้ display และ theme-color ของไฟล์ Manifest ของเว็บแอปเพื่อ
กำหนดรูปลักษณ์ของหน้าต่างแอปพลิเคชันและตัดสินใจว่าจะแสดงการควบคุมเบราว์เซอร์เริ่มต้นรายการใด ซึ่งอาจไม่มีการควบคุมเลย
ภาพเคลื่อนไหวที่กระฉับกระเฉง
ภาพเคลื่อนไหวในแอปจะสั้นกระชับและลื่นไหลใน Podcasts ตัวอย่างเช่น เมื่อเปิดลิ้นชักหมายเหตุของตอนทางด้านขวา จะมีการเลื่อนเข้ามาอย่างสวยงาม เมื่อฉันนำ 1 ตอนออกจากการดาวน์โหลดของฉัน ตอนที่เหลือจะลอยขึ้นและใช้พื้นที่ของหน้าจอที่เป็นอิสระจากตอนที่ลบไปแล้ว
ภาพเคลื่อนไหวที่มีประสิทธิภาพในเว็บเป็นไปได้แน่นอนหากคุณคำนึงถึงแนวทางปฏิบัติแนะนำต่างๆ ที่ระบุไว้ในบทความภาพเคลื่อนไหวและประสิทธิภาพ คุณสามารถปรับปรุงภาพเคลื่อนไหวแบบเลื่อนตามที่เห็นได้ทั่วไปในเนื้อหาที่ใส่เลขหน้าหรือภาพสไลด์ของสื่อ โดยใช้ฟีเจอร์สแนปการเลื่อน CSS คุณใช้ Web Animations API เพื่อควบคุมได้อย่างเต็มรูปแบบ
เนื้อหาที่แสดงภายนอกแอป
แอป Podcasts ใน iOS สามารถแสดงเนื้อหาในตำแหน่งอื่นๆ นอกเหนือจากแอปพลิเคชันจริง เช่น ในมุมมองวิดเจ็ตของระบบหรือในรูปแบบคำแนะนำ Siri การมีคำกระตุ้นให้ดำเนินการ (Call-To-Action) เชิงรุกตามการใช้งานที่เพียงแค่แตะก็โต้ตอบด้วยสามารถเพิ่มอัตราการกลับมามีส่วนร่วมของแอปอย่างเช่น Podcasts ได้อย่างมาก
Content Index API ช่วยให้แอปพลิเคชันบอกเบราว์เซอร์ได้ว่าเนื้อหาของ PWA ใดพร้อมใช้งานแบบออฟไลน์ การดำเนินการนี้ช่วยให้เบราว์เซอร์แสดงเนื้อหานี้นอกแอปหลักได้ การมาร์กอัปเนื้อหาที่น่าสนใจในแอปว่าเหมาะสำหรับการเล่นเสียงที่พูดได้ และมาร์กอัปที่มีโครงสร้างโดยทั่วไปจะช่วยให้คุณช่วยให้เครื่องมือค้นหาและผู้ช่วยเสมือน เช่น Google Assistant นำเสนอข้อเสนอของคุณได้อย่างมีประสิทธิภาพสูงสุด
วิดเจ็ตควบคุมสื่อในหน้าจอล็อก
เมื่อเปิดตอนของพอดแคสต์ แอป Podcasts จะแสดงวิดเจ็ตตัวควบคุมที่สวยงามบนหน้าจอล็อก โดยจะแสดงข้อมูลเมตา เช่น อาร์ตเวิร์กของตอน ชื่อตอน และชื่อพอดแคสต์
Media Session API ช่วยให้คุณระบุข้อมูลเมตา เช่น อาร์ตเวิร์ก ชื่อแทร็ก ฯลฯ ที่จะปรากฏบนหน้าจอล็อก สมาร์ทวอทช์ หรือวิดเจ็ตสื่ออื่นๆ ในเบราว์เซอร์ได้
ข้อความ Push
ข้อความ Push กลายเป็นเรื่องน่ารำคาญในเว็บแล้ว (แต่ตอนนี้การแจ้งเตือนจะเลิกรบกวนแล้ว) แต่หากใช้อย่างเหมาะสม ก็จะเพิ่มคุณค่าได้มากมาย เช่น แอป iOS Podcasts สามารถเลือกที่จะแจ้งฉันเมื่อมีตอนใหม่ของพอดแคสต์ที่ฉันติดตามหรือแนะนำพอดแคสต์ใหม่ๆ รวมถึงแจ้งเตือนให้ฉันทราบเกี่ยวกับฟีเจอร์ใหม่ๆ ของแอป
Push API ช่วยให้แอปรับข้อความ Push ได้เพื่อให้คุณแจ้งให้ผู้ใช้ทราบเกี่ยวกับเหตุการณ์สำคัญเกี่ยวกับ PWA ได้ สำหรับการแจ้งเตือนที่ควรเริ่มทำงานในเวลาที่ทราบในอนาคตและที่ไม่ต้องใช้การเชื่อมต่อเครือข่าย ให้ใช้ Notification Triggers API
การติดป้ายไอคอนแอป
เมื่อใดก็ตามที่มีตอนใหม่สำหรับพอดแคสต์ที่ฉันติดตาม ป้ายไอคอนแอปบนไอคอนหน้าจอหลักของ Podcasts จะปรากฏขึ้นอีกครั้ง เพื่อกระตุ้นให้ฉันมีส่วนร่วมกับแอปอีกครั้งโดยไม่รบกวนคุณ
คุณกำหนดป้ายไอคอนแอปได้ด้วย Badging API ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อ PWA คิดว่ามีรายการที่ "ยังไม่อ่าน" หรือเมื่อคุณต้องการวิธีดึงดูดความสนใจของผู้ใช้ให้กลับมาที่แอปได้อย่างไม่น่ารำคาญ
การเล่นสื่อมีลำดับความสำคัญเหนือการตั้งค่าโหมดประหยัดพลังงาน
ขณะเล่นสื่อพอดแคสต์ หน้าจออาจปิด แต่ระบบจะไม่เข้าสู่โหมดสแตนด์บาย แอปจะเลือกให้หน้าจอเปิดอยู่เสมอได้เช่นกัน เช่น เพื่อแสดงเนื้อเพลงหรือคำบรรยาย
Screen Wake Lock API ช่วยให้คุณป้องกันไม่ให้หน้าจอปิดหน้าจอ การเล่นสื่อบนเว็บจะป้องกันไม่ให้ระบบเข้าสู่โหมดสแตนด์บายโดยอัตโนมัติ
การค้นพบแอปผ่าน App Store
แม้ว่าแอป Podcasts เป็นส่วนหนึ่งของการใช้งาน macOS บนเดสก์ท็อป แต่ใน iOS แอปจะต้องติดตั้งจาก App Store
การค้นหาด่วนสำหรับ podcast, podcasts หรือ apple podcasts จะทำให้แอปใน App Store ปรากฏขึ้นทันที
แม้ว่า Apple จะไม่อนุญาตให้ใช้ PWA ใน App Store แต่คุณส่ง PWA ที่รวมอยู่ในกิจกรรมบนเว็บที่เชื่อถือได้ใน Android ได้
สคริปต์ bubblewrap ทำให้การดำเนินการนี้เป็นเรื่องที่ไม่ยุ่งยาก
สคริปต์นี้ยังเป็นตัวขับเคลื่อนฟีเจอร์การส่งออกแอป Android ของ PWABuilder ภายใน
ซึ่งคุณใช้งานได้โดยไม่ต้องสัมผัสบรรทัดคำสั่ง
สรุปฟีเจอร์
ตารางด้านล่างแสดงภาพรวมแบบกะทัดรัดของฟีเจอร์ทั้งหมด และแสดงรายการแหล่งข้อมูลที่เป็นประโยชน์ต่อการตระหนักถึงฟีเจอร์เหล่านั้นบนเว็บ
บทสรุป
PWA ก้าวหน้าไปอย่างมากตั้งแต่เปิดตัวในปี 2015 ในบริบทของ Project Fugu 🐡 ทีม Chromium จากหลายบริษัทกำลังพยายามอุดช่องโหว่ที่เหลืออยู่ การทำตามคำแนะนำในบทความนี้บางข้อจะช่วยให้คุณเข้าใกล้ความรู้สึกที่คล้ายกับแอปมากขึ้น และทำให้ผู้ใช้ลืมว่ากำลังมี "แค่เว็บไซต์" เพราะจริงๆ แล้วผู้ใช้ส่วนใหญ่จะไม่สนใจว่าแอปของคุณสร้างขึ้นอย่างไร (และทำไมผู้ใช้จึงควร) ตราบใดที่ยังรู้สึกว่าเป็นแอปจริง
ข้อความแสดงการยอมรับ
บทความนี้ได้รับการตรวจสอบโดย Kayce Basques, Joe Medley, Joshua Bell, Dion Almaer, Ade Oshineye, Pete LePage, Sam Thorogood, Reilly Granteและเจฟฟ์ส