สนใจเรียนรู้ JavaScript หรือไม่? รับ ebook ของฉันที่ jshandbook.com
Progressive Web Apps (PWA) เป็นเทรนด์ล่าสุดในการพัฒนาแอปพลิเคชันบนมือถือ โดยใช้เทคโนโลยีเว็บ ในขณะที่เขียน (ต้นปี 2018) สิ่งเหล่านี้ใช้ได้กับอุปกรณ์ Android เท่านั้น .
PWA กำลังจะมาใน iOS 11.3 และ macOS 10.13.4 เร็วๆ นี้
WebKit ซึ่งเป็นเทคโนโลยีพื้นฐานของ Safari และ Mobile Safari ได้ประกาศเมื่อเร็วๆ นี้ (ส.ค. 2017) ว่าพวกเขาได้เริ่มทำงานเพื่อแนะนำ Service Workers ในเบราว์เซอร์ ซึ่งหมายความว่าในไม่ช้าพวกเขาจะลงจอดในอุปกรณ์ iOS เช่นกัน ดังนั้นแนวคิด Progressive Web Apps จึงน่าจะใช้ได้กับ iPhone และ iPad หาก Apple ตัดสินใจที่จะสนับสนุนแนวทางนี้
ไม่ใช่เทคโนโลยีใหม่ที่ก้าวล้ำ แต่เป็นคำศัพท์ใหม่ที่ระบุชุดเทคนิคที่มีเป้าหมายในการสร้างประสบการณ์ที่ดีขึ้นสำหรับแอปบนเว็บ
Progressive Web App คืออะไร
Progressive Web App คือแอปที่สามารถให้คุณลักษณะเพิ่มเติมตามสิ่งที่อุปกรณ์สนับสนุน ให้ความสามารถแบบออฟไลน์ การแจ้งเตือนแบบพุช รูปลักษณ์และความเร็วของแอปที่เกือบจะมาพร้อมเครื่อง และการแคชทรัพยากรในเครื่อง
เทคนิคนี้เริ่มใช้โดย Google ในปี 2015 และพิสูจน์ให้เห็นแล้วว่านำข้อดีมากมายมาสู่ทั้งนักพัฒนาซอฟต์แวร์และผู้ใช้
นักพัฒนาสามารถเข้าถึงอาคารเกือบระดับเฟิร์สคลาส แอปพลิเคชันโดยใช้เว็บสแต็ก ซึ่งง่ายกว่าและถูกกว่าการสร้างแอปพลิเคชันแบบเนทีฟเสมอ โดยเฉพาะอย่างยิ่งเมื่อพิจารณาถึงผลกระทบของการสร้างและบำรุงรักษาแอปข้ามแพลตฟอร์ม
นักพัฒนาซอฟต์แวร์จะได้ประโยชน์จากความยุ่งยากในการติดตั้งที่ลดลง และในเวลาที่แอปในสโตร์ไม่ได้ทำให้เกิดความสามารถในการค้นพบแอปได้ถึง 99,99% การค้นหาของ Google ก็สามารถให้ประโยชน์เช่นเดียวกันได้หากไม่มากไปกว่านั้น
Progressive Web App คือเว็บไซต์ที่พัฒนาขึ้นด้วยเทคโนโลยีบางอย่างที่ทำให้ประสบการณ์บนมือถือน่าพึงพอใจมากกว่าเว็บไซต์ที่ปรับให้เหมาะกับมือถือทั่วไป เกือบจะรู้สึกเหมือนกำลังทำงานในแอปที่มาพร้อมเครื่อง เนื่องจากมีคุณลักษณะดังต่อไปนี้:
- รองรับออฟไลน์
- โหลดเร็ว
- ปลอดภัย
- สามารถส่งการแจ้งเตือนแบบพุชได้
- ให้ประสบการณ์ผู้ใช้แบบเต็มหน้าจอที่สมจริงโดยไม่ต้องมีแถบ URL
แพลตฟอร์มมือถือ (Android ในขณะที่เขียน แต่ไม่จำกัดในทางเทคนิคเท่านั้น) ให้การสนับสนุนที่เพิ่มขึ้นสำหรับ Progressive Web Apps พวกเขายังขอให้ผู้ใช้เพิ่มแอปไปที่หน้าจอหลัก เมื่อผู้ใช้รายนั้นเข้าชมเว็บไซต์ดังกล่าว
แต่ก่อนอื่นขอชี้แจงเล็กน้อยเกี่ยวกับชื่อ Progressive Web App อาจเป็นคำที่สับสน และคำจำกัดความที่ดีคือ:เว็บแอปที่ใช้ประโยชน์จากคุณลักษณะเบราว์เซอร์สมัยใหม่ (เช่น Web Worker และ Web App Manifest) เพื่อให้อุปกรณ์เคลื่อนที่ของตน "อัปเกรด" แอปเป็นบทบาทของแอปพลเมืองชั้นหนึ่ง
ทางเลือกของเว็บแอปแบบก้าวหน้า
การประปาส่วนภูมิภาคมีจุดยืนอย่างไรเมื่อเทียบกับทางเลือกอื่นในการสร้างประสบการณ์บนมือถือ
มาเน้นที่ข้อดีข้อเสียของแต่ละรายการ แล้วมาดูกันว่าการประปาส่วนภูมิภาคมีความเหมาะสม
แอปมือถือดั้งเดิม
แอพมือถือดั้งเดิมเป็นวิธีที่ชัดเจนที่สุดในการสร้างแอพมือถือ Objective-C หรือ Swift บน iOS, Java /Kotlin บน Android และ C# บน Windows Phone
แต่ละแพลตฟอร์มมี UI และ UX ของตัวเอง และวิดเจ็ตดั้งเดิมจะมอบประสบการณ์ที่ผู้ใช้คาดหวัง สามารถนำไปใช้และแจกจ่ายผ่านแพลตฟอร์ม App Store ได้
จุดปวดหลักของแอพที่มาพร้อมเครื่องคือการพัฒนาข้ามแพลตฟอร์มนั้นต้องการการเรียนรู้ การเรียนรู้ และความทันสมัยด้วยวิธีการและแนวทางปฏิบัติที่ดีที่สุดมากมาย ตัวอย่างเช่น หากคุณมีทีมเล็กๆ หรือคุณเป็นนักพัฒนาเดี่ยวที่สร้างแอปบน 3 แพลตฟอร์ม คุณต้องใช้เวลามากในการเรียนรู้เทคโนโลยีและสิ่งแวดล้อม คุณยังจะใช้เวลามากในการจัดการไลบรารีต่างๆ และใช้เวิร์กโฟลว์ที่แตกต่างกัน (เช่น iCloud ใช้งานได้บนอุปกรณ์ iOS เท่านั้น ไม่มีเวอร์ชันสำหรับ Android)
แอปไฮบริด
แอปพลิเคชันไฮบริดสร้างขึ้นโดยใช้เทคโนโลยีเว็บ แต่มีการปรับใช้กับ App Store ตรงกลางเป็นเฟรมเวิร์กหรือวิธีการจัดแพ็คเกจแอปพลิเคชัน ดังนั้นจึงสามารถส่งเพื่อตรวจสอบไปยัง App Store แบบเดิมได้
แพลตฟอร์มทั่วไปบางส่วน ได้แก่ Phonegap และ Ionic Framework เป็นต้น และโดยปกติสิ่งที่คุณเห็นบนหน้าเว็บคือ WebView ที่โหลดเว็บไซต์ท้องถิ่นเป็นหลัก
ตอนแรกฉันรวม Xamarin ไว้ในรายการ แต่ Carlos Eduardo Pérez ชี้ให้เห็นอย่างถูกต้องว่า Xamaring สร้างโค้ดเนทีฟ
ลักษณะสำคัญของ Hybrid Apps คือ เขียนครั้งเดียว เรียกใช้ได้ทุกที่ แนวคิด. โค้ดแพลตฟอร์มต่างๆ ถูกสร้างขึ้นในเวลาบิลด์ และคุณกำลังสร้างแอปโดยใช้ JavaScript, HTML และ CSS ซึ่งน่าทึ่งมาก ความสามารถของอุปกรณ์ (ไมโครโฟน กล้อง เครือข่าย gps…) ถูกเปิดเผยผ่าน JavaScript API
ส่วนที่ไม่ดีของการสร้างแอปไฮบริดคือ เว้นแต่คุณจะทำงานได้ดี คุณอาจตกลงกับการจัดหาตัวส่วนร่วมได้ สิ่งนี้สร้างแอปที่มีประสิทธิภาพรองลงมาในทุกแพลตฟอร์ม เนื่องจากแอปไม่สนใจหลักเกณฑ์การโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์เฉพาะแพลตฟอร์ม
นอกจากนี้ ประสิทธิภาพสำหรับมุมมองที่ซับซ้อนอาจได้รับผลกระทบ
แอปที่สร้างด้วย React Native
React Native เปิดเผยการควบคุมดั้งเดิมของอุปกรณ์มือถือผ่าน JavaScript API แต่คุณกำลังสร้างแอปพลิเคชันดั้งเดิมอย่างมีประสิทธิภาพ ไม่ใช่การฝังเว็บไซต์ภายใน WebView
คำขวัญของพวกเขาในการแยกแยะแนวทางนี้ออกจากแอปไฮบริดคือเรียนรู้ครั้งเดียว เขียนได้ทุกที่ ซึ่งหมายความว่าแนวทางปฏิบัติจะเหมือนกันในทุกแพลตฟอร์ม แต่คุณจะสร้างแอปแยกกันโดยสิ้นเชิงเพื่อมอบประสบการณ์ที่ยอดเยี่ยมในแต่ละแพลตฟอร์ม
ประสิทธิภาพเทียบได้กับแอปที่มาพร้อมเครื่อง เนื่องจากสิ่งที่คุณสร้างคือแอปที่มาพร้อมเครื่องซึ่งเผยแพร่ผ่าน App Store
คุณลักษณะของเว็บแอปแบบก้าวหน้า
ในส่วนที่แล้ว คุณจะเห็น คู่แข่ง . หลัก ของเว็บแอปโปรเกรสซีฟ กปปส.มีจุดยืนอย่างไรเมื่อเปรียบเทียบกับกปภ. และคุณสมบัติหลักคืออะไร
โปรดจำไว้ว่า ขณะนี้ Progressive Web App มีไว้สำหรับอุปกรณ์ Android เท่านั้น
คุณลักษณะ
Progressive Web Apps มีสิ่งหนึ่งที่แยกพวกเขาออกจากวิธีการข้างต้นโดยสิ้นเชิง:ไม่ได้ปรับใช้กับ App Store
นี่เป็นข้อได้เปรียบที่สำคัญ App Store มีประโยชน์หากคุณเข้าถึงได้และโชคดีที่จะนำเสนอ ซึ่งจะทำให้แอปของคุณเป็นที่รู้จัก แต่ถ้าคุณไม่อยู่ใน 0.001% แรก คุณจะไม่ได้รับประโยชน์มากนักจากการมีที่เล็กๆ ใน App Store
Progressive Web Apps ค้นพบได้โดยใช้เครื่องมือค้นหา และเมื่อผู้ใช้มาถึงไซต์ของคุณที่มีความสามารถ PWA เบราว์เซอร์ร่วมกับอุปกรณ์จะถามผู้ใช้ว่าต้องการติดตั้งแอปไปที่หน้าจอหลักหรือไม่ . นี่เป็นเรื่องใหญ่เพราะ SEO ปกติสามารถนำไปใช้กับ PWA ของคุณได้ ซึ่งนำไปสู่การพึ่งพาการได้มาโดยเสียค่าใช้จ่ายน้อยลงมาก
การไม่อยู่ใน App Store หมายความว่า คุณไม่จำเป็นต้องได้รับการอนุมัติจาก Apple หรือ Google ให้อยู่ในกระเป๋าของผู้ใช้ คุณเผยแพร่การอัปเดตได้ทุกเมื่อที่ต้องการ โดยไม่ต้องผ่านกระบวนการอนุมัติมาตรฐานซึ่งเป็นเรื่องปกติของแอป iOS
PWAs เป็นแอปพลิเคชัน HTML5 / เว็บไซต์ที่ตอบสนองต่อสเตียรอยด์โดยพื้นฐานด้วยเทคโนโลยีหลักบางอย่างที่เพิ่งเปิดตัวเพื่อทำให้คุณสมบัติหลักบางอย่างเป็นไปได้ หากคุณจำได้ iPhone ดั้งเดิมมาโดยไม่มีตัวเลือกในการพัฒนาแอพที่มาพร้อมเครื่อง นักพัฒนาซอฟต์แวร์ได้รับคำสั่งให้พัฒนาแอปมือถือ HTML5 ที่สามารถติดตั้งลงในหน้าจอหลักได้ แต่เทคโนโลยีในตอนนั้นยังไม่พร้อมสำหรับสิ่งนี้
Progressive Web App ทำงานแบบออฟไลน์ .
การใช้ พนักงานบริการ อนุญาตให้แอปมีเนื้อหาที่สดใหม่อยู่เสมอ ซึ่งสามารถดาวน์โหลดได้ในพื้นหลัง และเพื่อรองรับการแจ้งเตือนแบบพุช ซึ่งให้โอกาสในการกลับมามีส่วนร่วมอีกครั้ง
นอกจากนี้ ความสามารถในการแชร์ยังให้ประสบการณ์ที่ดียิ่งขึ้นสำหรับผู้ใช้ที่ต้องการแชร์แอปของคุณ เนื่องจากพวกเขาต้องการเพียงแค่ URL
ประโยชน์
เหตุใดผู้ใช้และนักพัฒนาจึงควรสนใจ Progressive Web Apps
- กปภ.เบากว่า แอปที่มาพร้อมเครื่องอาจมีขนาด 200MB ขึ้นไป ในขณะที่ PWA อาจอยู่ในช่วงของ KB
- ไม่มีโค้ดแพลตฟอร์มดั้งเดิม
- ต้นทุนในการได้มาซึ่งต่ำกว่า (เป็นการยากกว่ามากที่จะโน้มน้าวให้ผู้ใช้ติดตั้งแอป มากกว่าการเยี่ยมชมเว็บไซต์เพื่อรับประสบการณ์ครั้งแรก)
- ต้องใช้ความพยายามน้อยลงอย่างมากในการสร้างและเผยแพร่การอัปเดต
- รองรับลิงก์ในรายละเอียดมากกว่าแอปสโตร์ทั่วไป
แนวคิดหลัก
- ตอบสนอง :UI ปรับให้เข้ากับขนาดหน้าจอของอุปกรณ์
- ความรู้สึกเหมือนแอป :ไม่ได้รู้สึกเหมือนเป็นเว็บไซต์แต่เป็นเหมือนแอป (มากที่สุด)
- การสนับสนุนแบบออฟไลน์ :จะใช้ที่เก็บข้อมูลอุปกรณ์เพื่อมอบประสบการณ์ออฟไลน์
- ติดตั้งได้ :เบราว์เซอร์ของอุปกรณ์จะแจ้งให้ผู้ใช้ติดตั้งแอปของคุณ
- กลับมามีส่วนร่วมอีกครั้ง :การแจ้งเตือนแบบพุชช่วยให้ผู้ใช้ค้นพบแอปของคุณอีกครั้งเมื่อติดตั้งแล้ว
- ค้นพบได้ :เสิร์ชเอ็นจิ้นและการเพิ่มประสิทธิภาพ SEO สามารถให้ผู้ใช้ได้มากกว่า App Store
- สด :แอปจะอัปเดตตัวเองและเนื้อหาเมื่อออนไลน์แล้ว
- ปลอดภัย :ใช้ HTTPS
- ก้าวหน้า :ใช้งานได้กับทุกอุปกรณ์ แม้กระทั่งเครื่องรุ่นเก่า แม้ว่าจะมีฟีเจอร์น้อยกว่า (เช่น เป็นเว็บไซต์ ติดตั้งไม่ได้)
- เชื่อมโยงได้ :ชี้ไปที่ URL ได้ง่าย
พนักงานบริการ
ส่วนหนึ่งของคำจำกัดความ Progressive Web App คือต้องทำงานแบบออฟไลน์
เนื่องจากสิ่งที่อนุญาตให้เว็บแอปทำงานแบบออฟไลน์ได้คือ Service Worker นี่หมายความว่า พนักงานบริการเป็นส่วนบังคับของ Progressive Web App .
คำเตือน:ขณะนี้ Service Workers รองรับเฉพาะ Chrome (เดสก์ท็อปและ Android), Firefox และ Opera ดู https://caniuse.com/#feat=serviceworkers สำหรับข้อมูลที่อัปเดตเกี่ยวกับการสนับสนุน
เคล็ดลับ:อย่าสับสนระหว่างพนักงานบริการกับพนักงานเว็บ มันแตกต่างไปจากเดิมอย่างสิ้นเชิง
Service Worker คือไฟล์ JavaScript ที่ทำหน้าที่เป็นตัวกลางระหว่างเว็บแอปและเครือข่าย ด้วยเหตุนี้จึงสามารถให้บริการแคช เพิ่มความเร็วในการแสดงผลแอป และปรับปรุงประสบการณ์ผู้ใช้
ด้วยเหตุผลด้านความปลอดภัย เฉพาะไซต์ HTTPS เท่านั้นที่สามารถใช้งาน Service Workers ได้ และนี่เป็นส่วนหนึ่งของเหตุผลที่ต้องให้บริการ Progressive Web App ผ่าน HTTPS
พนักงานบริการไม่พร้อมใช้งานบนอุปกรณ์ในครั้งแรกที่ผู้ใช้เข้าชมแอป ในการเยี่ยมชมครั้งแรก พนักงานบริการจะได้รับการติดตั้ง จากนั้นในการเยี่ยมชมหน้าต่างๆ ของเว็บไซต์ในครั้งต่อไป เราจะเรียกพนักงานบริการนี้
ดูคู่มือฉบับสมบูรณ์สำหรับผู้ปฏิบัติงานบริการ
รายการแอพ
App Manifest เป็นไฟล์ JSON ที่คุณสามารถใช้เพื่อให้ข้อมูลอุปกรณ์เกี่ยวกับ Progressive Web App ของคุณ
คุณเพิ่มลิงก์ไปยังรายการใน ทุก ส่วนหัวในแต่ละหน้าของเว็บไซต์ของคุณ:
<link rel="manifest" href="/manifest.webmanifest">ไฟล์นี้จะบอกให้อุปกรณ์ทราบถึงวิธีการตั้งค่า:
- ชื่อและชื่อย่อของแอป
- ตำแหน่งของไอคอนในขนาดต่างๆ
- URL เริ่มต้น สัมพันธ์กับโดเมน
- การวางแนวเริ่มต้น
- หน้าจอสแปลช
ตัวอย่าง
{ "name": "The Weather App", "short_name": "Weather", "description": "Progressive Web App Example", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html?utm_source=app_manifest", "orientation": "portrait", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" }App Manifest เป็น W3C Working Draft ที่สามารถเข้าถึงได้ที่ https://www.w3.org/TR/appmanifest/
App Shell
App Shell ไม่ใช่เทคโนโลยี แต่เป็นแนวคิดการออกแบบ มีจุดมุ่งหมายเพื่อโหลดและแสดงผลคอนเทนเนอร์เว็บแอปก่อน และเนื้อหาจริงหลังจากนั้นไม่นาน เพื่อให้ผู้ใช้มีความประทับใจเหมือนแอป
ยกตัวอย่างเช่น คำแนะนำเกี่ยวกับ Human Interface Guidelines ของ Apple ในการใช้หน้าจอเริ่มต้นที่คล้ายกับส่วนต่อประสานผู้ใช้ นี่เป็นคำแนะนำทางจิตวิทยาที่พบว่าลดการรับรู้ว่าแอปใช้เวลาในการโหลดนาน
แคช
App Shell ถูกแคชแยกจากเนื้อหา และมีการตั้งค่าเพื่อให้ดึงข้อมูลการสร้างเชลล์จากแคชใช้เวลาน้อยมาก
สนใจเรียนรู้ JavaScript หรือไม่? รับ ebook ของฉันที่ jshandbook.com
