หากคุณเป็นหัวหน้าทีมเทคนิคหรือนักวิเคราะห์การตลาดดิจิทัลที่สนใจมอบประสบการณ์การใช้งานเว็บที่ทันสมัยให้กับเว็บแอปพลิเคชันของ 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 และการกำหนดค่าอื่นๆ ที่อธิบายหน้าตาและลักษณะการทำงานของแอปพลิเคชัน
- Service Worker: สคริปต์ที่ให้บริการเบื้องหลังซึ่งทำให้ PWA สมบูรณ์ยิ่งขึ้นโดยกำหนดทรัพยากรที่ PWA ใช้และกลยุทธ์ในการเข้าถึงทรัพยากรเหล่านั้น
เวิร์กเกอร์บริการคืออะไร
หัวใจสําคัญของ Service Worker คือสคริปต์ที่เบราว์เซอร์เรียกใช้อย่างอิสระขณะที่คุณโต้ตอบกับเว็บแอปพลิเคชัน Service Worker ที่ใช้งานอยู่จะให้บริการต่างๆ เช่น การแคชอัจฉริยะโดยใช้ Cache API การอัปเดตข้อมูลโดยใช้ Background Sync API และการผสานรวมกับข้อความ Push Service Worker ที่มีกลยุทธ์การแคชที่เหมาะสมจะมอบประสบการณ์การใช้งานที่เสถียรและเชื่อถือได้สำหรับสถานการณ์ต่างๆ โดยจะแสดงทรัพยากรที่แคชไว้ล่วงหน้าทันที จัดเก็บข้อมูลไว้ในแคช และอัปเดตทรัพยากรเมื่อเชื่อมต่อกับเว็บ
โปรแกรมทำงานของบริการอาจเขียนโค้ดใหม่ได้ยาก Workbox จึงสร้างขึ้นเพื่ออำนวยความสะดวก Workbox คือชุดไลบรารีที่จะช่วยคุณเขียนและจัดการ Service Worker และการแคชด้วย 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 คือเครื่องมือสร้าง 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 เป็นบริการ Cloud และเลือกหน้าเว็บไซต์ 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 เริ่มต้น โหมดการแสดงผลจะกำหนดว่าแอปจะเป็นแบบหน้าต่างหรือเต็มหน้าจอ นอกจากนี้ คุณยังระบุการวางแนวหน้าจอของแอปพลิเคชันได้ด้วย สีธีมคือสีของหน้าต่างและแถบเครื่องมือ ส่วนสีพื้นหลังคือสีของหน้าจอแนะนำเมื่อเปิดแอปพลิเคชัน ไอคอนคือรูปภาพที่แสดงในหน้าจอหลักหรือลิ้นชักแอปพลิเคชันของอุปกรณ์เมื่อมีการติดตั้งแอปพลิเคชันบนอุปกรณ์ การกําหนดค่าที่แสดงในรูปภาพจะสร้างไฟล์ Manifest JSON ที่แสดงด้านล่าง
{
"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 Application Service Worker ใช้กลยุทธ์แคชที่อุ่น ซึ่งหมายความว่าประสบการณ์ของผู้ใช้จะไม่หยุดชะงักแม้ว่าคุณจะระบุเส้นทางที่ขาดหายไปหรือใช้งานไม่ได้
ใน AEM คำว่า "clientlibs" หมายถึงไลบรารีฝั่งไคลเอ็นต์ ซึ่งเป็นการรวม JavaScript, CSS และทรัพยากรแบบคงที่ที่เกี่ยวข้องซึ่งเพิ่มลงในโปรเจ็กต์ที่เว็บเบราว์เซอร์ไคลเอ็นต์แสดงและใช้งาน คุณสามารถตั้งค่าไลบรารีฝั่งไคลเอ็นต์ให้ใช้งานแบบออฟไลน์ได้ง่ายๆ โดยการระบุไลบรารีเหล่านั้นในอินเทอร์เฟซผู้ใช้
นอกจากนี้ คุณยังใส่แหล่งข้อมูลของบุคคลที่สาม เช่น แบบอักษร ได้ด้วย การกําหนดค่าแคชออฟไลน์นี้จะให้ข้อมูลการกําหนดค่าแก่ Service Worker ที่สร้างขึ้นสําหรับแอปพลิเคชันที่ใช้ Workbox ภายใน เท่านี้คุณก็ทำให้แอปพลิเคชันติดตั้งได้ เมื่อติดตั้งแล้ว ไอคอนแอปพลิเคชันจะแสดงบนหน้าจอหลักของอุปกรณ์เคลื่อนที่เช่นเดียวกับแอปพลิเคชันแพลตฟอร์ม การคลิกไอคอนจะเข้าสู่เว็บไซต์ wknd
โปรดทราบว่าคุณสามารถเปลี่ยนเนื้อหาหรือการตั้งค่าเหล่านี้ได้ทุกเมื่อ เมื่อคุณเผยแพร่การเปลี่ยนแปลง เบราว์เซอร์จะอัปเดต Service Worker ที่ไคลเอ็นต์ และระบบจะแสดงข้อความให้ผู้ใช้ทราบว่า PWA เวอร์ชันใหม่พร้อมใช้งานแล้ว ผู้ใช้คลิกข้อความเพื่อโหลดแอปพลิเคชันอีกครั้งและรับข้อมูลอัปเดตล่าสุดได้ คุณสามารถเปิดเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์และแผงแอปพลิเคชันเพื่อดูรายละเอียดของ Service Worker
คุณเพิ่มพื้นที่เก็บข้อมูลแคชเพื่อดูเนื้อหาที่แคชไว้ในเครื่องได้โดยทำดังนี้
ผลลัพธ์
ได้เวลาดูผลลัพธ์ของการทำงานหนักแล้ว คุณเพิ่งปรับปรุงเว็บไซต์ AEM ให้กลายเป็น Progressive Web App โดยใช้เพียงการกําหนดค่าและไม่ต้องเขียนโค้ด
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome มีการตรวจสอบ Lighthouse ที่ช่วยให้คุณตรวจสอบว่าเว็บแอปพลิเคชันและการกำหนดค่าเป็นไปตามมาตรฐาน Progressive Web App มากน้อยเพียงใด
บทสรุป
Progressive Web App ให้ประสบการณ์ที่เหมือนกับแอปสําหรับเว็บไซต์ของคุณ ซึ่งใช้ข้ามแพลตฟอร์มและธรรมชาติแบบเปิดของเว็บโดยมีต้นทุนในการพัฒนาและบำรุงรักษาที่ต่ำกว่า พร้อมทั้งให้การควบคุมการจัดจำหน่าย ซึ่งจะช่วยเพิ่มการมีส่วนร่วม การรักษาลูกค้า และที่สำคัญที่สุดคือช่วยเพิ่มอัตรา Conversion AEM ทำงานร่วมกับ Workbox เพื่อเพิ่มประสิทธิภาพเว็บไซต์ที่มีอยู่ให้เป็น PWA ได้ง่ายๆ เพียงกำหนดค่าโดยไม่ต้องเขียนโค้ด