หากคุณเป็นหัวหน้าฝ่ายเทคนิคหรือนักวิเคราะห์การตลาดดิจิทัลที่สนใจนำเสนอประสบการณ์เว็บสมัยใหม่ให้กับเว็บแอปพลิเคชัน Adobe Experience Manager (AEM) และกำลังมองหาตัวเลือกในการดำเนินการดังกล่าวอยู่ คุณมาที่บทความที่เหมาะสมแล้ว ซึ่งจะอธิบายว่า Progressive Web App (PWA) คืออะไรและคุณต้องทำอะไรเพื่อสร้าง PWA ใน AEM ที่ใช้ประโยชน์จากไลบรารี WorkBox ผ่านการกำหนดค่าโดยไม่ต้องเขียนโค้ด
เหตุผลที่ควรใช้ PWA
Progressive Web App ใช้ประโยชน์จากสิ่งที่เว็บสมัยใหม่ทำได้ แอปนี้ติดตั้งได้ในอุปกรณ์ของคุณ โหลดได้เร็ว และการเข้าชมครั้งต่อๆ มาจะโหลดได้ทันที อุปกรณ์ตอบสนองต่อการป้อนข้อมูลอย่างรวดเร็ว อุปกรณ์เหล่านี้ทำงานได้ดีในการเชื่อมต่อที่ไม่น่าเชื่อถือหรือเมื่อออฟไลน์ PWA จะใช้ API ที่ทันสมัยเพื่อมอบประสบการณ์การใช้งานที่เหมือนกับแอป ซึ่งจะมี UI แบบเต็มหน้าจอที่ไม่บังคับ การอัปเดตในเบื้องหลัง และการเข้าถึงข้อมูลแบบออฟไลน์
ในการปรับปรุงเว็บแอปให้เป็น Progressive Web App จะต้องเพิ่มอาร์ติแฟกต์ 2 รายการดังนี้
- ไฟล์ Manifest ของเว็บแอป: ไฟล์การกำหนดค่า JSON ที่กำหนด URL จุดแรกเข้าของแอป ไอคอนที่ใช้แสดง PWA และการกำหนดค่าอื่นๆ ที่อธิบายลักษณะและการทำงานของแอปพลิเคชัน
- โปรแกรมทำงานของบริการ: สคริปต์ที่ให้บริการเบื้องหลังเพื่อเพิ่มประสิทธิภาพของ PWA โดยกำหนดทรัพยากรที่ PWA ใช้และกลยุทธ์ในการเข้าถึง
โปรแกรมทำงานของบริการคืออะไร
โดยพื้นฐานแล้ว โปรแกรมทำงานของบริการเป็นเพียงสคริปต์ที่เบราว์เซอร์ของคุณทำงานอย่างอิสระเมื่อคุณโต้ตอบกับเว็บแอปพลิเคชัน โปรแกรมทำงานของบริการที่ใช้งานอยู่จะให้บริการ เช่น การแคชอัจฉริยะโดยใช้ Cache API การอัปเดตข้อมูลโดยใช้ Background Sync API และการผสานรวมกับข้อความ Push โปรแกรมทำงานของบริการที่มีกลยุทธ์การแคชที่เหมาะสมจะมอบประสบการณ์ของผู้ใช้ที่เสถียรและเชื่อถือได้สำหรับสถานการณ์ต่างๆ การส่งคืนทรัพยากรที่แคชล่วงหน้าโดยทันที การจัดเก็บข้อมูลไว้ในแคช และการอัปเดตทรัพยากรเมื่อเชื่อมต่อกับเว็บ
Service Worker อาจเขียนใหม่ตั้งแต่ต้นได้ยาก เราสร้าง Workbox ขึ้นเพื่อให้ทำงานได้ง่ายขึ้น Workbox คือชุดไลบรารีที่จะช่วยคุณเขียนและจัดการโปรแกรมทำงานของบริการและการแคชด้วย Cache Storage API เมื่อใช้ร่วมกัน Service Worker และ Cache Storage API จะควบคุมวิธีการขอเนื้อหา (HTML, CSS, JS, รูปภาพ ฯลฯ) จากเครือข่ายหรือแคช แม้จะให้คุณแสดงผลเนื้อหาที่แคชไว้เมื่อออฟไลน์ก็ตาม Workbox ช่วยให้คุณตั้งค่าและจัดการทั้ง 2 อย่างนี้และอื่นๆ ได้อย่างรวดเร็วด้วยโค้ดที่พร้อมสำหรับการใช้งานจริง
การอัปเกรดเว็บไซต์ AEM เป็น PWA
Adobe Experience Manager (AEM) เป็นโซลูชันการจัดการเนื้อหาที่ครอบคลุมสำหรับการสร้างเว็บไซต์ แอปบนอุปกรณ์เคลื่อนที่ แบบฟอร์ม และป้ายดิจิทัล ซึ่งช่วยให้คุณจัดการเนื้อหาการตลาดและเนื้อหาทางการตลาดได้อย่างง่ายดาย
แม้ว่า AEM จะมีไลบรารีที่สมบูรณ์สำหรับการสร้างเว็บแอปพลิเคชัน แต่ก่อนหน้านี้การสร้าง PWA ด้วยการเพิ่ม Service Worker และไฟล์ Manifest ก็ทำได้ยากในช่วงที่ผ่านมา
Adobe Experience Manager Sites คือเครื่องมือสร้าง UI ซึ่งเป็นส่วนหนึ่งของ Adobe Experience Manager เมื่อใช้งานร่วมกับ Adobe Experience Manager เป็นบริการระบบคลาวด์ เว็บไซต์ AEM Sites จะช่วยให้การแปลงเว็บไซต์ AEM หรือแอปพลิเคชันแบบหน้าเดียวที่มีอยู่เป็น Progressive Web App แบบติดตั้งได้ง่ายดาย เพียงกำหนดค่าและไม่จำเป็นต้องเขียนโค้ด โดยใช้ Workbox เพื่อมอบแนวทางปฏิบัติแนะนำสำหรับ Progressive Web App และตัดความซับซ้อนของการเขียนไฟล์ Manifest แบบสำเร็จรูปและ Service Worker
AEM สนับสนุนการแปลเนื้อหา ซึ่งหมายความว่าคุณมีการสร้างแบรนด์ที่แตกต่างกัน และแม้แต่เนื้อหาออฟไลน์ที่แตกต่างกันสำหรับแต่ละพื้นที่ได้ ในการดำเนินการนี้ให้สร้างการกำหนดค่า PWA ที่ต่างกันสำหรับต้นฉบับแต่ละภาษา
การเริ่มต้นใช้งานการกำหนดค่า PWA ใน AEM
เข้าสู่ระบบ Adobe Experience Manager เป็นบริการระบบคลาวด์ แล้วเลือกหน้าเว็บไซต์ Adobe Experience Manager หรือหลักภาษาใดก็ได้ แล้วคลิกพร็อพเพอร์ตี้ คุณควรเห็นแท็บชื่อ Progressive Web App (หมายเหตุ: หากไม่เห็นแท็บนี้ โปรดติดต่อ Adobe เพื่อเปิดใช้ฟีเจอร์นี้) คุณกําหนดค่าการติดตั้งและรูปลักษณ์ของ Progressive Web App ได้ด้วยการคลิกเพียงไม่กี่ครั้ง
หากคุณเคยดูบทแนะนำเกี่ยวกับเว็บไซต์ AEM มาแล้ว คุณอาจเคยเห็นเว็บไซต์ WKND มาก่อน บทความนี้ใช้การสาธิต WKND เป็นจุดเริ่มต้น เมื่อดำเนินการเสร็จแล้ว ระบบจะอัปเดต WKND จากเว็บแอปเป็น PWA โดยใช้ WorkBox
กำหนดค่าไฟล์ Manifest
ไฟล์ Manifest ของเว็บแอปเป็นไฟล์ JSON ที่มีพร็อพเพอร์ตี้ที่อธิบายรูปลักษณ์และการทำงานของ PWA Adobe Experience Manager Sites มีอินเทอร์เฟซผู้ใช้ที่ใช้งานง่ายในการกำหนดค่าพร็อพเพอร์ตี้
URL เริ่มต้นคือจุดแรกเข้าของ PWA เมื่อผู้ใช้แตะไอคอน PWA ในโทรศัพท์ ผู้ใช้จะเข้าถึง URL เริ่มต้นใช้งานได้ โหมดการแสดงผลจะกำหนดค่าว่าแอปจะเป็นแบบหน้าต่างหรือแบบเต็มหน้าจอ นอกจากนี้ คุณยังระบุการวางแนวหน้าจอของแอปพลิเคชันได้ด้วย สีธีมคือสีของหน้าต่างและแถบเครื่องมือ โดยสีพื้นหลังจะเป็นสีของหน้าจอเริ่มต้นเมื่อมีการเปิดใช้งานแอปพลิเคชัน ไอคอนเป็นรูปภาพที่แสดงบนหน้าจอหลักของอุปกรณ์หรือลิ้นชักแอปพลิเคชันเมื่อติดตั้งแอปพลิเคชันในอุปกรณ์แล้ว การกำหนดค่าที่แสดงในรูปภาพจะสร้าง JSON ไฟล์ Manifest ที่แสดงด้านล่าง
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
โดย URL เริ่มต้นอาจแตกต่างจากหน้า Landing Page เริ่มต้นสำหรับโดเมนของคุณได้ การเปลี่ยนพารามิเตอร์ start_url จะช่วยให้คุณส่งผู้ใช้ไปยังประสบการณ์การใช้งานแอปพลิเคชันได้โดยตรงแทนที่จะแสดงหน้าเริ่มต้นที่ผู้ใช้ไม่ผ่านการตรวจสอบสิทธิ์หรือผู้ใช้ใหม่ ซึ่งทำให้ผู้ใช้ PWA ได้รับประสบการณ์ที่ราบรื่นและคล้ายกับแอปมากขึ้น
AEM เข้าใจดีว่าพื้นที่ที่แตกต่างกันอาจมีรูปลักษณ์ต่างกันได้ คุณสามารถกำหนดค่าคุณสมบัติ สี และไอคอนที่แตกต่างกันสำหรับภาษาหรือภาษาต่างๆ จากนั้นซิงโครไนซ์การกำหนดค่ากับหน้าเว็บที่เชื่อมโยง
เมื่อเข้าถึง PWA ในเบราว์เซอร์แล้ว คุณคลิกขวาและตรวจสอบเพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บและดูไฟล์ Manifest ในแผงแอปพลิเคชันได้
กำหนดค่า Service Worker
คุณกำหนดค่าเนื้อหาเป็นแคชและกลยุทธ์การแคชที่จะใช้ได้
หากเคยใช้ Service Worker แล้ว คุณอาจคุ้นเคยกับกลยุทธ์การแคช กลยุทธ์การแคชจะระบุทรัพยากรที่จะแคชและพิจารณาว่าจะหาทรัพยากรเหล่านั้นในแคชก่อน กำหนดเครือข่ายก่อน หรือในแคชที่มีเครือข่ายสำรอง จากนั้นคุณจะเลือกทรัพยากรที่จะแคชล่วงหน้าเมื่อติดตั้ง Service Worker ได้ โปรแกรมทำงานของบริการแอปพลิเคชัน AEM จะใช้กลยุทธ์แคชอุ่น ซึ่งหมายความว่าประสบการณ์การใช้งานของผู้ใช้จะไม่หยุดชะงักแม้ว่าคุณจะระบุเส้นทางที่ขาดหายหรือใช้งานไม่ได้ก็ตาม
ใน AEM คำว่า "clientlibs" ในที่นี้หมายถึงไลบรารีฝั่งไคลเอ็นต์ ซึ่งเป็นการรวมกันของทรัพยากร JavaScript, CSS และทรัพยากรแบบคงที่ที่เกี่ยวข้องซึ่งถูกเพิ่มลงในโปรเจ็กต์ของคุณซึ่งเว็บเบราว์เซอร์ของไคลเอ็นต์จะสามารถใช้ได้ คุณสามารถตั้งค่าไลบรารีฝั่งไคลเอ็นต์ให้ใช้แบบออฟไลน์ได้ง่ายๆ โดยระบุไลบรารีเหล่านั้นในอินเทอร์เฟซผู้ใช้
นอกจากนี้ คุณยังรวมทรัพยากรของบุคคลที่สาม เช่น แบบอักษร ได้อีกด้วย การกำหนดค่าแคชออฟไลน์นี้จะให้ข้อมูลการกำหนดค่าแก่โปรแกรมทำงานของบริการที่สร้างขึ้นสำหรับแอปพลิเคชันของคุณซึ่งใช้เวิร์กบ็อกซ์เป็นการภายใน ทั้งหมดนี้คือการทำให้แอปพลิเคชันของคุณสามารถติดตั้งได้ เมื่อติดตั้งแล้ว ไอคอนแอปพลิเคชันจะปรากฏบนหน้าจอหลักของอุปกรณ์เคลื่อนที่เช่นเดียวกับแอปแพลตฟอร์ม การคลิกที่ไอคอนจะเป็นการเข้าสู่เว็บไซต์ wknd
โปรดทราบว่าคุณสามารถเปลี่ยนเนื้อหาหรือการตั้งค่าเหล่านี้ได้ทุกเมื่อ เมื่อคุณเผยแพร่การเปลี่ยนแปลง เบราว์เซอร์จะอัปเดต Service Worker ที่ไคลเอ็นต์และจะมีข้อความแจ้งผู้ใช้ว่า PWA เวอร์ชันใหม่พร้อมใช้งานแล้ว ผู้ใช้สามารถคลิกข้อความเพื่อโหลดแอปพลิเคชันซ้ำและรับอัปเดตล่าสุด คุณสามารถเปิดแผงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และเบราว์เซอร์เพื่อดูรายละเอียดของโปรแกรมทำงานของบริการได้
คุณขยายพื้นที่เก็บข้อมูลแคชเพื่อดูเนื้อหาที่แคชไว้ในเครื่องได้โดยทำดังนี้
ผลลัพธ์
ถึงเวลาดูผลลัพธ์ของความทุ่มเทของคุณแล้ว เพียงแค่การกำหนดค่าและไม่เขียนโค้ด ก็เท่ากับคุณได้ปรับปรุงเว็บไซต์ AEM ให้กลายเป็น Progressive Web App แล้ว
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome จะมีการตรวจสอบประภาคารซึ่งให้คุณตรวจสอบว่าเว็บแอปพลิเคชันและการกำหนดค่าของคุณสอดคล้องกับมาตรฐาน Progressive Web App มากน้อยเพียงใด
บทสรุป
Progressive Web App ให้ประสบการณ์ที่เหมือนแอปสำหรับเว็บไซต์ ซึ่งใช้ข้ามแพลตฟอร์มและลักษณะแบบเปิดของเว็บ โดยใช้ต้นทุนในการพัฒนาและบำรุงรักษาต่ำกว่า พร้อมกับให้คุณควบคุมการเผยแพร่ได้ วิธีนี้จะช่วยเพิ่มการมีส่วนร่วม การคงผู้ใช้ไว้ และที่สำคัญที่สุดคือช่วยกระตุ้นอัตรา Conversion ให้สูงขึ้น AEM ร่วมกับ Workbox ช่วยให้คุณเพิ่มประสิทธิภาพเว็บไซต์ที่มีอยู่ให้เป็น PWA ได้ง่ายๆ ด้วยการกำหนดค่าเพียงและไม่ต้องเขียนโค้ด