PWAs บน iOS 15: การปรับปรุง? [iOS 15.4 อัปเดต]

Apple อ้างว่า iOS 15 เป็นวิธีที่ดีกว่าในการเชื่อมต่อ จดจ่อ และสำรวจด้วยรายการคุณสมบัติใหม่ที่สำคัญ อย่างไรก็ตาม มีอะไรที่ทำให้ชีวิตของนักพัฒนา กปภ. ง่ายขึ้นหรือไม่? เราจะสำรวจการเปลี่ยนแปลงที่ยิ่งใหญ่ที่สุด การลดลง พร้อมกับข่าวที่น่าสนใจในบทความนี้

การปรับปรุงทั้งหมดสำหรับ กปภ

[iOS 15.4] พรีโหลดการนำทางสำหรับผู้ปฏิบัติงานบริการ

iOS 15.4 เปิดตัวการปรับปรุงใหม่สำหรับ Service Workers รวมถึงการโหลดล่วงหน้าสำหรับการนำทางและการสนับสนุนเพิ่มเติมสำหรับไฟล์ที่สร้างโดย Service Worker

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

[iOS 15.4] ปรับปรุง Web App Manifest: ไอคอนและอื่น ๆ

ข่าวดี! หลังจากที่รอคอยมาอย่างยาวนาน ในที่สุด นักพัฒนา PWA ก็สามารถใช้งานเว็บแอปบน iOS 15.4 ได้ด้วยไอคอนที่เหมาะสม หากไม่มี ไอคอน apple-touch ที่ กำหนดไว้ในไฟล์ Web App ไอคอน Web App Manifest จะถูกตั้งค่าเป็นค่าเริ่มต้น

อย่างไรก็ตาม การสนับสนุนยังไม่สมบูรณ์แบบ ยังมีข้อบกพร่องเล็กๆ น้อยๆ ที่ส่งผลต่อประสบการณ์ใช้งานสำหรับทั้งผู้ใช้และนักพัฒนา เช่น:

• รูปร่างและรูปแบบของไอคอนจำกัดเฉพาะ PNG สี่เหลี่ยมจัตุรัสเท่านั้น
• ไอคอนจะถูกปรับขนาดโดยอัตโนมัติหากไม่ตรงกับขนาดที่กำหนดไว้ล่วงหน้าของ iOS (Ipad - 152 x 152 & 167 x 167, iPhone - 120 × 120 & 180 x180)
• ไอคอนจะไม่แสดงขึ้นเมื่อคุณเปิดแผ่นงานแชร์ แต่จะปรากฏเมื่อคุณเลือกที่จะเพิ่มไปยังหน้าจอหลัก
• ไอคอนโปร่งใสจะมีพื้นหลังสีดำหรือสีขาว

นอกจากนี้ ในเวอร์ชันก่อนหน้า Web App Manifest จะถูกดึงมาเฉพาะเมื่อผู้ใช้เลือกที่จะ " เพิ่มในหน้าจอหลัก ” สำหรับ iOS 15.4 ไฟล์จะถูกแยกวิเคราะห์และโหลดเมื่อโหลดหน้าเว็บแล้ว ด้วยเหตุนี้ คุณจึงใช้ สีธีม ในการโหลดหน้าเว็บได้ ซึ่งทำให้ PWA มีความน่าเชื่อถือมากขึ้น

[iOS15.4] การแจ้งเตือนทางเว็บ

เมื่อเขียนบทความสำหรับ PWA iOS 15 เมื่อปีที่แล้ว เราได้แบ่งปันหลักฐานบางอย่างเกี่ยวกับการแจ้งเตือนทางเว็บที่อาจมาและคาดเดาว่าเกิดอะไรขึ้น ในที่สุดมันก็เกิดขึ้น

เช่นเดียวกับไอคอน Web App Manifest ยังมีความไม่สะดวกบางประการเกี่ยวกับการพุชเว็บ ตัวอย่างเช่น มันถูกปิดใช้งานโดยค่าเริ่มต้น ดังนั้นผู้คนต้องรู้จักมันก่อนจึงจะใช้งานได้ นอกจากนี้ นักพัฒนา PWA บางรายพบว่าไม่สามารถใช้ Web Push API เพื่อขอสิทธิ์การแจ้งเตือนได้ แม้ว่าจะมีตัวเลือกให้ใช้งานก็ตาม

อย่างไรก็ตาม เป็นข่าวที่ควรค่าแก่การฉลอง อะไรดีกว่ากัน? Web Kit ได้ประกาศรองรับ Web Push ใน Safari 16 บน macOS Ventura จากการล้อเล่น Web Push อาจพร้อมใช้งานบน iOS และ iPadOS ในปี 2023

รองรับสีธีม

ในขณะที่สถานะการสนับสนุนสำหรับรายการเว็บแอปยังคงเป็น "การสนับสนุนบางส่วน" ตอนนี้ Safari 15 ได้เปิดใช้งานสีของธีมใน แท็กเมตา HTML และ Web Manifest อย่างเป็นทางการแล้ว ดังนั้นตอนนี้ คุณสามารถ เปลี่ยนสี ใน แถบสถานะ และ พื้นที่โอเวอร์ สโครล ซึ่งสามารถนำไปใช้กับ แถบแท็บ และ สีพื้นหลังโอเวอร์ สโครลในเลย์ เอาต์ Safari 15 Compact Tab บน Ipad OS 15, Big Sur และ MacOS Monterey

นอกจากนี้ ด้วยการใช้แอตทริบิวต์สื่อ คุณยังสามารถเปิดใช้งานโหมดมืด/สว่างสำหรับ Progressive Web App บน Safari 15 ได้อีกด้วย

 <meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

Enhanced WebGL (Web Graphic Library) และ Web-Share API

iOS 15 เป็นพยานในการอัพเกรดจาก WebGL 1 เป็น WebGL2 WebGL 2 ได้รับการพิสูจน์แล้วว่าเป็นการปรับปรุงที่สำคัญซึ่งเร็วกว่ามาก มีพื้นผิวมากกว่า WebGL รวมทั้งคุณประโยชน์อื่นๆ อีกมากมาย

นอกจากนี้ Safari 15 ยังรองรับ Web Share ระดับ 2 ซึ่งปูทางให้นักพัฒนาสามารถแลกเปลี่ยนไฟล์จากเบราว์เซอร์ไปยังแอพได้อย่างมีประสิทธิภาพด้วยบทสนทนาการแชร์แบบเนทีฟ ปัจจุบันรองรับไฟล์รูปภาพ วิดีโอ เสียง ไฟล์ข้อความ และอื่นๆ

ตัวอย่างเช่น การเปลี่ยนแปลงนี้ทำให้ผู้ใช้สามารถแชร์รูปภาพจากเพจ กปภ. ไปยังแอพ Twitter ของตนได้โดยตรง โดยไม่ต้องมีขั้นตอนเพิ่มเติมในการบันทึกรูปภาพลงในไลบรารีและอัปโหลดซ้ำ

API เซสชันสื่อที่ดีขึ้น

Media Session API ให้ข้อมูลและการควบคุมการเล่นที่มากขึ้น นำประสบการณ์สื่อไปสู่ระดับที่สูงขึ้น จาก iOS 15 ผู้ใช้สามารถเข้าถึง การ์ด NOW PLAY จาก Control Central , Lock Screen รวมถึง แถบเมนูของ MacOS Monterey และควบคุมตัวเลือกการเล่นง่ายๆ บางอย่างได้ นอกจากนี้ Media Session ใหม่ยังนำเสนอ ประสบการณ์ SharePlay ซึ่งช่วยให้สามารถชมภาพยนตร์ ฟังเพลงกับเพื่อน ๆ ของคุณผ่าน Facetime นี่อาจเป็นข่าวดีสำหรับแอปพอดคาสต์บนเว็บ

รองรับเสียง WebM สำหรับ Safari, รองรับ WebM/VP9 สำหรับ Ipad

WebM เป็นเทคโนโลยีการสตรีมวิดีโอบนเว็บแบบโอเพนซอร์สที่ไม่มีค่าลิขสิทธิ์ หลังจากเปิดตัว WebM Image ใน iOS 14 เป็นครั้งแรก ตอนนี้ Apple รองรับคอนเทนเนอร์ Opus audio codec WebM ใน Safari 15 นอกจากนี้ ผู้ใช้สามารถสตรีมวิดีโอ WebM/VP9 บน IpadOS15 ได้แล้ว

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

รองรับโมดูล ES6 ใน Service Worker

ES6 ถือเป็นโมดูลแรกของ JavaScript ที่บิวท์อิน โดยมีโครงสร้างที่มั่นคงซึ่งง่ายต่อการใช้งาน บำรุงรักษา ขยายขนาด และสรุปพฤติกรรม ด้วยโมดูล ES6 ใหม่ใน Service Worker ตอนนี้นักพัฒนาสามารถเพิ่มประสิทธิภาพและเปิดใช้งานการเข้าถึงแบบออฟไลน์สำหรับ iOS PWA ได้อย่างเป็นระเบียบมากขึ้น ส่งผลให้การขยายขนาดอย่างรวดเร็วเป็นเรื่องง่าย เพิ่มฟังก์ชัน PWA เพื่อตอบสนองความต้องการของตลาดเมื่อจำเป็น

มัลติทาสกิ้งที่ง่ายกว่าสำหรับ iPad

iOS 15 ได้ทำการปรับปรุงบางอย่างสำหรับประสบการณ์มัลติทาสก์ที่ใช้งานง่ายยิ่งขึ้นบน iPad ในขณะที่ยังคงรักษาสิ่งที่เคยได้ผลมาก่อน ตัวอย่างเช่น มีแท็บสามจุดเล็กใหม่ที่แสดงเมนูมัลติทาสก์ที่ด้านบนของจอแสดงผล ซึ่งจะทำให้แอปเต็มหน้าจอ แบ่งหน้าจอ หรือเลื่อนผ่าน นอกจากนี้ยังมีการแนะนำหน้าต่างแบบโฮเวอร์เซ็นเตอร์ใน SplitScreen ซึ่งคุณสามารถเปิดหน้าต่างที่ด้านบนสุดของแอพแยกหน้าจอ จากนั้นส่งไปที่ Slider Over, Split View หรือ Full Screen

ยิ่งไปกว่านั้น แป้นพิมพ์ลัดใหม่และอินเทอร์เฟซผู้ใช้แบบมัลติทาสก์ใหม่ที่ดูแอปทั้งหมด (รวมถึงแอปใน Slide Over) เป็นสิ่งที่ควรค่าแก่การกล่าวถึงอย่างรวดเร็ว

จนถึงตอนนี้จากบทวิจารณ์ ดูเหมือนว่าการอัปเกรดใหม่บน Ipad multitasking สำหรับเว็บและ PWA ได้รับการตอบรับในเชิงบวกว่าเป็นมิตรกับผู้ใช้มากกว่า iOS 14 มาก

คลิปแอปใหม่ – การอัปเดตอื่นที่เห็นได้ชัดเจน

เราได้กล่าวถึง App Clip ในการสรุป PWA iOS 14 ว่าเป็นสิ่งที่คาดหวังสำหรับ PWA ที่ติดตั้งได้เหมือน Android แล้วตอนนี้เป็นยังไงบ้าง?

ตอนนี้ App Clip สามารถรวมเข้ากับเว็บไซต์ได้ ดังนั้นจึงแสดงใน Safari การ์ดนี้อนุญาตให้ผู้ใช้ทำงานเบื้องต้นให้เสร็จ เช่น สั่งอาหาร เช่าจักรยาน จากนั้นให้ติดตั้งแอพที่มาพร้อมเครื่องบน App Store การเปลี่ยนแปลงใหม่นี้จะตัดขั้นตอนพิเศษบางอย่างของ iOS 14 เพื่อค้นหาคลิปแอปภายในหน้าเว็บและแอปของบริษัทอื่น

น่าเสียดายที่ยังไม่เห็นป้ายประกาศการติดตั้ง กปภ. Apple จะทำให้แอพคลิปเป็นมิตรกับ PWA หรือไม่? หรือพวกเขากำลังพยายามสร้างเวอร์ชัน กปภ. ของตัวเอง? หรือคลิปแอพและ กปปส. ไม่เกี่ยวกันเลย? คำตอบยังอยู่ในอนาคต

ไม่มีการระบุข้อจำกัดที่สำคัญ

การเปิดตัว iOS 15 ใหม่นำมาซึ่งความผิดหวังในการพัฒนา PWA อย่างแน่นอน สิ่งที่เรากำลังมองหานั้นยังไม่สามารถทำได้ การปรับใช้ PWA บน iOS 15 นั้นยังค่อนข้างยากหากไม่มีฟีเจอร์เหล่านี้:

• ซิงค์พื้นหลัง
• เว็บพุช
• ก่อนติดตั้งพร้อมท์และแบนเนอร์การติดตั้ง
• เสียงพื้นหลังสำหรับ กปปส

นอกจากนี้ ยังไม่มีการแก้ไขจุดเสียที่เรากล่าวถึงในบทความ iOS 14 เช่นกัน

• ไม่มีไอคอน PWA ใน App Library
• มีการเปลี่ยนแปลงไม่มากใน Web App Manifest Support (นอกเหนือจากสีของธีม)
• แถบสถานะยังคงเป็น black และ black-translucent เท่านั้น
• ข้อ จำกัด ของคุณสมบัติขนาดใหญ่บนเว็บเบราว์เซอร์อื่น ๆ

ซื้อกลับบ้าน

คุณมีทุกสิ่งที่ iOS15 มีสำหรับ PWA แม้ว่าการเปลี่ยนแปลงส่วนใหญ่ในเวอร์ชัน 15 จะเป็นเพียงเล็กน้อย แต่ iOS 15.4 ที่มี Web Push และ Web App Manifest อื่นๆ ก็รองรับการเปิดโปงอนาคตที่สดใสสำหรับ PWA บน iOS ด้วย iOS 16 เบต้าที่เผยแพร่ในเดือนกันยายน 2022 เราหวังว่าจะมีการเปลี่ยนแปลงที่สำคัญกว่านี้