เนื้อหา
- การขึ้นของ PWA
- กปภ. ในวันนี้
- การติดตั้ง
- เปิดตัวออฟไลน์และทันที
- ประสบการณ์ชั้นหนึ่ง
- ร้านค้าแอป
- การรวมแพลตฟอร์ม
- ความท้าทายด้านการออกแบบและ UX
- ปีของกปภ
เช่นเดียวกับการออกแบบเว็บที่ตอบสนองได้ปิดช่องว่างระหว่างเว็บไซต์บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่เมื่อไม่กี่ปีที่ผ่านมาเทคนิคแอปพลิเคชันเว็บแบบก้าวหน้ากำลังปิดช่องว่างระหว่างเว็บและโลกของแอป ด้วยประสบการณ์ของผู้ใช้จากเดสก์ท็อปไปยังแอปบนอุปกรณ์เคลื่อนที่ที่มาบรรจบกันอย่างรวดเร็วดูเหมือนว่าอินเทอร์เน็ตที่ทันสมัยและมีประสิทธิภาพมากขึ้นกำลังพัฒนาขึ้นมากแม้ว่าจะหลีกเลี่ยงไม่ได้หากไม่มีการเปลี่ยนแปลงรหัสพันธุกรรมที่สำคัญ
- วิธีสร้าง Progressive Web App
เห็นได้ชัดว่ามีแรงกดดันในการคัดเลือกที่สำคัญบางประการที่ผลักดันให้เกิดสิ่งนี้ ก่อนอื่นการสร้างแอปเนทีฟสำหรับทุกช่องไม่จำเป็นต้องใช้ทรัพยากรอย่างมีประสิทธิภาพ: ผู้ใช้พบกับแอปขนาดใหญ่หลายร้อยแอปที่สิ้นเปลืองแบนด์วิธและพื้นที่ดิสก์อันมีค่าและ บริษัท ต่างๆใช้เงินจำนวนมากในการสร้างแอปเพื่อให้พวกเขาถูกละทิ้ง หลังจากเวอร์ชันแรก และแอปเหล่านี้ส่วนใหญ่ขับเคลื่อนด้วยเนื้อหาเว็บเท่านั้น: ข้อมูลที่มาจากบริการเว็บหรือระบบจัดการเนื้อหา
คำจำกัดความของเว็บแอปแบบโปรเกรสซีฟไม่เป็นรูปธรรม PWA เป็นเพียงเว็บแอปที่ใช้ API และความสามารถใหม่ ๆ ในแพลตฟอร์มเว็บโดยใช้การปรับปรุงแบบก้าวหน้าเพื่อมอบประสบการณ์ที่เหมือนแอปบนทุกแพลตฟอร์มที่มีฐานรหัสเดียวกัน เป็นชุดแนวทางปฏิบัติที่ดีที่สุดและการใช้งาน API ที่สร้างประสบการณ์ที่ยอดเยี่ยมเหมือนแอปให้กับผู้ใช้ของคุณดังนั้นจึงไม่เหมือนกับที่คุณมีหรือไม่มี PWA มันเหมือนกับว่าไซต์ของคุณมี PWA มากหรือน้อย
คุณกำลังจะเริ่มสร้างไซต์ใหม่หรือไม่? ลองใช้โปรแกรมสร้างเว็บไซต์ และตรวจสอบให้แน่ใจว่าคุณได้รับการสนับสนุนจากบริการเว็บโฮสติ้งที่ดีด้วย หรือสำหรับสิ่งที่แตกต่างกันเล็กน้อยโปรดดูคำแนะนำเกี่ยวกับพื้นที่เก็บข้อมูลบนคลาวด์ที่ดีที่สุด
การขึ้นของ PWA
ในขณะที่ชื่อ PWA ได้รับการประกาศเกียรติคุณในปี 2015 ในบทความ Escaping Tabs Without Losing our Soul โดย Alex Russell ซึ่งทำงานที่ Google สำหรับทีม Chrome แต่การเดินทางของพวกเขาไม่ได้เริ่มต้นที่นั่นจริงๆ เราเคยมีแอปพลิเคชัน HTML (HTA) ซึ่งสร้างโดย Microsoft ในปี 2542 พร้อมกับแพลตฟอร์มเว็บแอปอื่น ๆ จาก Nokia, BlackBerry และ บริษัท อื่น ๆ จากนั้นในปี 2550 สตีฟจ็อบส์ได้นำเสนอสิ่งที่เป็นวิธีเดียวในการสร้างแอปสำหรับ iPhone รุ่นเดิม: PWA แม้ว่าจะใช้ชื่ออื่น Chrome เริ่มต้นจากที่นั่นปรับปรุง API ในไม่กี่ปีต่อมาและคิดค้นชื่อ PWA
ด้วยประสบการณ์ที่ล้มเหลวก่อนหน้านี้มากมายที่พยายามนำเนื้อหาเว็บมาสู่โลกของแอปทำไมเราถึงคิดว่ามันใช้งานได้ในตอนนี้ โดยหลักแล้วมันขึ้นอยู่กับ บริษัท ที่กำลังทำงานและส่งเสริมเทคโนโลยีที่อยู่เบื้องหลัง PWA เช่น Microsoft, Google, Apple และ Mozilla ซึ่งมีชื่ออยู่เพียงไม่กี่แห่ง นอกจากนี้ประสิทธิภาพของแพลตฟอร์มเว็บก็มาถึงจุดที่มองไม่เห็นความแตกต่างเมื่อคุณเปรียบเทียบ PWA ที่ออกแบบมาอย่างดีกับแอปเนทีฟ เงื่อนไขเหล่านี้ไม่เคยมีมาก่อนและนั่นเป็นเหตุผลหนึ่งที่ชุมชนเว็บตัดสินใจว่าถึงเวลาสำหรับ PWA แล้ว
กปภ. ในวันนี้
ปัจจุบัน PWA ทำงานได้อย่างสมบูรณ์และสามารถติดตั้งได้บน:
- Android ที่มีเบราว์เซอร์ส่วนใหญ่โดย Chrome จะมอบประสบการณ์ที่ดีที่สุด
- iOS กับ Safari
- Chromebook
- Windows 10 จาก Microsoft Store
- ฟีเจอร์โฟนที่มี KaiOS ซึ่งเป็นส่วนหนึ่งจาก Firefox OS - ปัจจุบันมีให้บริการสำหรับผู้ใช้หลายล้านคนส่วนใหญ่ในอินเดีย
การสนับสนุนจะมาถึง macOS, Windows และ Linux ผ่าน Chrome ในปลายปีนี้ วันนี้มีให้ใช้งานเป็นค่าสถานะทดลอง "Desktop PWA" หากคุณต้องการทดลองใช้ตอนนี้ การติดตั้งบน Windows บน Edge โดยไม่มีการใช้งานสโตร์จะมาในภายหลังเช่นกันแม้ว่าจะไม่มีการกำหนดกรอบเวลาที่เฉพาะเจาะจง
หากคุณอ่านรายการซ้ำคุณจะเห็นทุกแพลตฟอร์มที่มีหรือกำลังจะรองรับ PWA ที่ติดตั้งได้อย่างสมบูรณ์ในเดือนต่อ ๆ ไป และเนื่องจาก PWA เป็นเพียงเว็บไซต์ที่มีคุณลักษณะอยู่ด้านบนซึ่งจะเปิดใช้งานบนเบราว์เซอร์ที่เข้ากันได้เท่านั้นเราจึงสามารถพูดได้ว่ามันเข้ากันได้กับเบราว์เซอร์ทั้งหมดจากฟังก์ชันพื้นฐาน
นอกจากนี้ PWA ยังถูกสร้างขึ้นจาก CLI ส่วนใหญ่สำหรับเฟรมเวิร์กที่แตกต่างกันซึ่งรวมถึง Angular 6+ CLI, React Create App, PWA Starter Kit จาก Polymer และ Preact CLI ในที่สุดทีม Ionic Framework ก็ได้แนวคิดเรื่อง Capacitor ซึ่งเป็นอุปกรณ์ทดแทน Cordova แบบโอเพนซอร์สที่ทำให้ PWA แบบเนทีฟเป็นไปได้ในทุกแอพสโตร์
การติดตั้ง
สิ่งสำคัญอย่างหนึ่งของ PWA คือการติดตั้งแอป กระบวนการนี้ทำได้ในสองขั้นตอนที่เลือกได้ ได้แก่ การดาวน์โหลดและการจัดเก็บข้อมูลออฟไลน์ของไฟล์ของแอปและการติดตั้งไอคอนในระบบปฏิบัติการ เนื่องจากทั้งสองขั้นตอนเป็นทางเลือกคุณสามารถนำเสนอประสบการณ์ออฟไลน์ในเบราว์เซอร์หรือเสนอไอคอนโดยไม่ต้องติดตั้งออฟไลน์ แต่ PWA ที่แท้จริงควรมีทั้งสองอย่าง: ต้องให้บริการด้วย TLS ภายใต้ HTTPS และผู้ใช้จะตัดสินใจว่าจะใช้ในเบราว์เซอร์หรือภายในไอคอนที่ติดตั้งเอง
เปิดตัวออฟไลน์และทันที
สมองของ PWA คือผู้ให้บริการซึ่งเป็นไฟล์ JavaScript ที่ติดตั้งบนอุปกรณ์ของผู้ใช้ซึ่งมีหน้าที่ดาวน์โหลดไฟล์ของแอปเก็บไว้ในแคชและให้บริการในภายหลังเมื่อจำเป็น เมื่อติดตั้งผู้ปฏิบัติงานบริการแล้วจะทำหน้าที่เหมือนพร็อกซีเครือข่ายสำหรับทุกทรัพยากรที่เว็บแอปต้องการโดยสามารถตัดสินใจดึงข้อมูลจากเครือข่ายหรือส่งจากแคชภายในเครื่องซึ่งทำให้แอปสามารถใช้งานออฟไลน์ได้และยังพร้อมใช้งานในเวลาเพียง สองสามมิลลิวินาทีแม้ว่าผู้ใช้จะมีการเชื่อมต่อซึ่งเลียนแบบการเปิดแอปเนทีฟ
ในการติดตั้งพนักงานบริการเอกสาร HTML ของคุณจะต้องมีสิ่งต่างๆเช่น:
ถ้า ('serviceWorker' ในเนวิเกเตอร์) navigator.serviceWorker.register ("sw.js");
ซึ่งจะติดตั้งไฟล์ "sw.js" ลงในอุปกรณ์ของผู้ใช้สำหรับโฟลเดอร์ปัจจุบันในโดเมนปัจจุบันซึ่งเป็นแนวคิดที่เรียกว่าขอบเขต หลังจากติดตั้งแล้วการเข้าชมครั้งถัดไปไปยัง URL ใด ๆ ภายในขอบเขตจะได้รับการจัดการโดยผู้ให้บริการรายนั้น
สมมติว่าเรามี PWA ที่มีไฟล์ 4 ไฟล์ ได้แก่ index.html, app.js, app.css และ logo.png สิ่งแรกคือการติดตั้งไฟล์เหล่านั้นลงในแคชในไฟล์ sw.js
ทรัพยากร const = ["index.html", "app.js", "app.css", "logo.png"]; ตัวเอง. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .hen (cache => cache.addAll (resources)));});
จากนั้นเพื่อให้ PWA ได้รับการบริการจากแคชเสมอเราจำเป็นต้องฟังเหตุการณ์การดึงข้อมูลภายในโปรแกรมทำงานของบริการและตัดสินใจว่าจะใช้นโยบายแคชเช่นแคชก่อนด้วยข้อมูลโค้ดต่อไปนี้
self.addEventListener ("ดึง", e => e.respondWith (caches.match (e.request) แล้ว (res => res);
ในกรณีนี้ทุกครั้งที่ผู้ใช้เข้าถึง PWA (ทั้งจากเบราว์เซอร์หรือจากไอคอนที่ติดตั้ง) เอ็นจิ้นจะรับไฟล์จากแคช ข้อดีของ PWA เทียบกับแอปเนทีฟคืออุปกรณ์ไม่จำเป็นต้องดาวน์โหลดไฟล์ทั้งหมดอีกครั้งเมื่อมีการเปลี่ยนแปลงมีเพียงไฟล์ที่เปลี่ยนแปลงด้วยกระบวนการที่โปร่งใส นอกจากนี้เรายังสามารถดาวน์โหลดบางส่วนของแอปได้ตามต้องการ
แต่ความท้าทายคือคุณจะรู้ได้อย่างไรว่าไฟล์ใดได้รับการอัปเดตบนเซิร์ฟเวอร์เพื่อให้คุณสามารถแทนที่ในแคชได้ หากคุณไม่ต้องการเขียนผู้ปฏิบัติงานบริการระดับต่ำเพื่อจัดการสิ่งนี้คุณสามารถใช้ Workbox ไลบรารีโอเพนซอร์สซึ่งจะช่วยคุณในการสร้างโปรแกรมทำงานของบริการและรายการทรัพยากรเพื่ออัปเดตแพ็กเกจที่ติดตั้ง
โปรดทราบว่าไฟล์ของ PWA ของคุณจะถูกลบหากมีแรงกดดันในการจัดเก็บข้อมูลบนอุปกรณ์เว้นแต่คุณจะร้องขอที่เก็บถาวรหากมี:
ถ้า ('ที่เก็บข้อมูล' ในเนวิเกเตอร์ && 'คงอยู่' ใน navigator.storage) navigator.storage.persist ();
ใน Chrome และเบราว์เซอร์ Android ส่วนใหญ่แอปของคุณไม่สามารถใช้พื้นที่ได้เกินห้าเปอร์เซ็นต์ บน iOS มีขนาด 50MiB (ใกล้ 50MB) ต่อโฮสต์เท่านั้น ใน Edge มีการเปลี่ยนแปลงตามขนาดหน่วยความจำทั้งหมดและใน Windows Store ไม่ จำกัด
ประสบการณ์ชั้นหนึ่ง
เรามีสมองและตอนนี้ก็ถึงเวลาสำหรับหัวใจ: รายการเว็บแอป จุดประสงค์ของการเปลี่ยนเว็บไซต์ให้เป็น PWA ไม่ใช่เพียงเพื่อให้แน่ใจว่าสามารถใช้งานได้อย่างรวดเร็วหรือขณะออฟไลน์ แต่ยังช่วยให้เว็บไซต์มีไอคอนของตัวเองในระบบปฏิบัติการและมอบประสบการณ์การใช้งานแบบสแตนด์อโลนทั้งหมดเหมือนกับแอปที่ติดตั้งอื่น ๆ
ไฟล์ Manifest คือไฟล์ JSON ที่กำหนดข้อมูลเมตาสำหรับ PWA ที่เบราว์เซอร์หรือที่เก็บแอปใช้เพื่อกำหนดพฤติกรรมการติดตั้ง
ไฟล์กำหนดคุณสมบัติหลายอย่างเป็นข้อมูลเมตาสำหรับ PWA ของคุณ แต่ละระบบปฏิบัติการจะอ่านคุณสมบัติเหล่านี้และพยายามอย่างเต็มที่เพื่อให้ตรงกับประสบการณ์ที่คุณต้องการ ตัวอย่างเช่น Android จะอ่าน "display: standalone" และสร้างประสบการณ์การใช้งานแอปตามปกติ ด้วย "display: minimal-ui" จะสร้างประสบการณ์ด้วย URL ที่มองเห็นได้และใบรับรอง TLS ซึ่งมีประโยชน์สำหรับแอปที่ไวต่อความปลอดภัย ด้วย "จอแสดงผล: เต็มหน้าจอ" จะสร้างแอปที่เต็มอิ่มโดยไม่มีแถบสถานะหรือปุ่มย้อนกลับที่มองเห็นได้ ชุดไอคอนและสีจะกำหนดลักษณะที่หน้าจอเริ่มต้นหรือแถบชื่อเรื่องจะมองหาหน้าต่างแอปของคุณ
มีตัวสร้างรายการบางอย่างเช่น Web App Manifest Generator หรือ PWA Builder ที่จะปรับขนาดไอคอนให้คุณด้วยความละเอียดที่แตกต่างกันหากคุณให้ความละเอียดสูง (ขั้นต่ำ 512 พิกเซล)
เมื่อคุณมีไฟล์ Manifest ที่เชื่อมโยงในเอกสาร HTML ของคุณผู้ใช้จะสามารถติดตั้งแอปโดยใช้เทคนิคต่างๆขึ้นอยู่กับเบราว์เซอร์โดยทั่วไปเรียกว่า Add to Home Screen, Install หรือ Add หาก Bing ของคุณรวบรวมข้อมูลได้ Microsoft จะเพิ่มลงใน Microsoft Store โดยอัตโนมัติเพื่อให้ผู้ใช้ Windows 10 สามารถติดตั้งได้จากที่นั่น
ในระบบปฏิบัติการบางระบบ PWA ของคุณจะมีความสามารถในการจับลิงก์ ซึ่งหมายความว่าหลังจากที่ผู้ใช้ติดตั้งแอปแล้ว URL ใด ๆ ที่อยู่ในขอบเขตของรายการของคุณจะถูกเปิดขึ้นภายในขอบเขตของแอปของคุณไม่ใช่ในเบราว์เซอร์ไม่ว่าจะปรากฏในเบราว์เซอร์หรือแอปอื่น ๆ เช่น WhatsApp, Facebook หรืออีเมล
หากคุณผ่านข้อกำหนดของ PWA ที่เรากำหนดไว้ที่นี่บางแพลตฟอร์มจะมีการติดป้ายโดยรอบ (โดยปกติจะมีไอคอนขนาดเล็กในแถบ URL ระบุว่าสามารถติดตั้งเว็บได้) หรือแบนเนอร์ของเว็บแอป หากคุณต้องการคุณยังสามารถเพิ่มปุ่มติดตั้งของคุณเองโดยใช้ตัวอย่างต่อไปนี้:
window.addEventListener ("beforeinstallpr ompt" ฟังก์ชัน (e) {e.prompt (); // จะแสดงข้อความแจ้งการติดตั้ง})
หากมีการติดตั้ง PWA เหตุการณ์ "ติดตั้งแอป" จะเริ่มทำงานบนวัตถุหน้าต่างเพื่อให้คุณสามารถติดตามสถิติที่ฟังได้
ร้านค้าแอป
ประโยชน์หลักอย่างหนึ่งของการติดตั้งจากเบราว์เซอร์คือสามารถหลีกเลี่ยงกระบวนการอนุมัติของร้านค้าแอปหรือต้องจ่ายเงินเพื่อเป็นผู้เผยแพร่ ซึ่งมาพร้อมกับข้อดีที่ชัดเจนเช่นการเผยแพร่ทันทีการสร้างแอปส่วนตัวสำหรับ บริษัท หรือแอปที่ไม่ควรได้รับการยอมรับในร้านค้า
แต่บาง บริษัท ต้องการที่จะอยู่ในร้านค้า ณ วันนี้ร้านค้าเดียวที่ยอมรับ PWA อย่างเป็นทางการคือ Windows Store และ kaiOS Store โชคดีที่มีเครื่องมือเช่น Capacitor (ปัจจุบันอยู่ในรุ่น Alpha) หรือ PWA Builder เราสามารถสร้างและเซ็นชื่อแพ็กเกจเนทีฟสำหรับแพลตฟอร์มอื่น ๆ ได้เช่นกัน
มี PWA บางส่วนที่เผยแพร่แล้วใน Google Play Store เช่น Twitter Lite และ Google Maps Go ซึ่งอยู่ระหว่างการใช้งานแบบกำหนดเอง Chrome จะนำเสนอโซลูชันจาก Chrome 68 ผ่านกิจกรรมบนเว็บที่เชื่อถือได้ จากจุดนั้นเราจะสามารถสร้างแพ็คเกจ Android (APK) พร้อมตัวเรียกใช้งานไปยัง PWA ของเราและอัปโหลดไปยังร้านค้า สำหรับ Microsoft Store บน Windows 10 ไซต์ PWA Builder กำลังช่วยในการสร้างแพ็กเกจ APPX Windows 10 เมื่อใช้มุมมองเว็บคุณอาจสร้างแอป iOS สำหรับ App Store ได้ด้วยตนเอง แต่โปรดระวังกฎของร้านให้มาก
การรวมแพลตฟอร์ม
ด้วยการใช้เทคนิคการเพิ่มประสิทธิภาพแบบก้าวหน้าคุณจะสามารถใช้คุณสมบัติมากมายรวมถึงการแจ้งเตือนแบบพุชการเข้าถึงกล้องและไมโครโฟนตำแหน่งทางภูมิศาสตร์เซ็นเซอร์การชำระเงินกล่องโต้ตอบแชร์และพื้นที่เก็บข้อมูลออฟไลน์ คุณลักษณะทั้งหมดนี้ทำงานโดยตรงภายในรูปแบบความปลอดภัยของเบราว์เซอร์รวมถึงกล่องโต้ตอบการอนุญาต
นอกจากนี้เรายังสามารถสื่อสารกับแอปอื่น ๆ ผ่านโครงร่าง URI เช่นการเปิด Twitter, YouTube หรือ WhatsApp ผ่าน URL หรือ URI ที่กำหนดเองเช่น whatsapp: //
สุดท้ายเมื่อสร้าง PWA ดั้งเดิมที่เผยแพร่ไปยังร้านค้าโดยใช้ Capacitor หรือไปยัง Microsoft Store เราจะสามารถเชื่อมโยงกับ API ดั้งเดิมที่จะช่วยให้เราสามารถรันโค้ดเนทีฟได้แทบทุกชนิด การรวมเข้ากับ Windows 10 นั้นรวมถึงการเข้าถึงฮาร์ดแวร์ แต่ยังรวมเข้ากับระบบปฏิบัติการด้วยโดยเสนอตัวเลือกต่างๆเช่น Pin to Start ตัวอย่างเช่น Twitter PWA ช่วยให้คุณสามารถตรึงผู้ใช้ไว้ที่หน้าจอเริ่มต้นของคุณได้
ความท้าทายด้านการออกแบบและ UX
การออกแบบ PWA มีความท้าทายที่ไม่เหมือนใครดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องใช้เวลาในการค้นคว้าทดสอบให้มากที่สุดและพิจารณาสิ่งต่อไปนี้:
- ผู้ใช้จะคาดหวังประสบการณ์ที่เหมือนแอป
- ขั้นตอนการติดตั้งยังใหม่อยู่ดังนั้นเราจึงต้องใช้ความพยายามเป็นพิเศษเพื่ออธิบายวิธีการติดตั้งแอป
- การอัปเดตแอปในพื้นหลังโดยไม่มีการโต้ตอบกับผู้ใช้นั้นยอดเยี่ยม แต่ยังเพิ่มความท้าทายให้กับ UX อีกด้วย
- บนเดสก์ท็อปการออกแบบเว็บแบบตอบสนองจะนำหน้าใหม่เนื่องจากหน้าต่าง PWA อาจมีขนาดเล็กเล็กกว่าวิวพอร์ตมือถือมาก ซึ่งหมายความว่าเราจำเป็นต้องสร้างมุมมองเฉพาะหรือวิดเจ็ตขนาดเล็กสำหรับรูปแบบนี้ดังที่เห็นใน Chrome OS ในปัจจุบัน
- การแจ้งเตือนแบบพุชควรเพิ่มมูลค่าให้กับผู้ใช้เท่านั้นดังนั้นเรียนรู้ที่จะถามในเวลาที่เหมาะสมและอย่าเสียโอกาสในการส่งข้อความที่ไม่เป็นประโยชน์หรือน่าสนใจ
- เราจำเป็นต้องออกแบบเพื่อประสิทธิภาพของเว็บและสำหรับการเข้าถึงแบบออฟไลน์
ปีของกปภ
ด้วยการเพิ่ม iOS และเดสก์ท็อปในปีนี้ PWA จึงมีอยู่ทั่วไปในปัจจุบัน แต่เราต้องจำไว้ว่าการเดินทางของพวกเขาเพิ่งเริ่มต้นดังนั้นควรมีการเปลี่ยนแปลงบ่อยๆและอย่าลืมอัปเดตตัวเองด้วยเทคนิคและแนวคิดล่าสุดเพื่อมอบประสบการณ์การใช้งานที่ยอดเยี่ยมในขณะที่แพลตฟอร์มพัฒนา
บทความนี้เผยแพร่ครั้งแรกในฉบับที่ 308 ของ สุทธินิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์ ซื้อฉบับ 308 ที่นี่ หรือ สมัครสมาชิกที่นี่.
