ประสบการณ์การใช้งานเว็บที่ทันสมัยบน Adobe Experience Manager พร้อม WorkBox

Kalyanaraman Balasubramaniam Krishnan

Salvatore Denaro

หากคุณเป็นหัวหน้าฝ่ายเทคนิคหรือนักวิเคราะห์การตลาดดิจิทัลที่สนใจจะให้ประสบการณ์การใช้งานเว็บสมัยใหม่แก่เว็บแอปพลิเคชัน 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 ใช้และกลยุทธ์ในการเข้าถึง

โปรแกรมทำงานของบริการคืออะไร

โดยพื้นฐานแล้ว โปรแกรมทำงานของบริการเป็นเพียงสคริปต์ที่เบราว์เซอร์ทำงานอย่างอิสระเมื่อคุณโต้ตอบกับเว็บแอปพลิเคชัน Service Worker ที่ใช้งานอยู่จะให้บริการต่างๆ เช่น การแคชอัจฉริยะโดยใช้ Cache API การอัปเดตข้อมูลโดยใช้ Background Sync API และการผสานรวมกับข้อความ Push โปรแกรมทำงานของบริการที่มีกลยุทธ์การแคชที่เหมาะสมจะมอบประสบการณ์การใช้งานที่เสถียรและเชื่อถือได้แก่ผู้ใช้สำหรับสถานการณ์ต่างๆ การส่งคืนทรัพยากรที่แคชไว้ล่วงหน้าทันที การจัดเก็บข้อมูลในแคช และการอัปเดตทรัพยากรเมื่อเชื่อมต่อกับเว็บ

โปรแกรมทำงานของบริการอาจเขียนโค้ดใหม่ได้ยาก มีการสร้างกล่องงานขึ้นเพื่อการใช้งานที่ง่ายขึ้น Workbox คือชุดไลบรารีที่จะช่วยคุณเขียนและจัดการ Service Worker และการแคชด้วย Cache Storage API เมื่อใช้ Service Worker และ Cache Storage API ร่วมกัน จะควบคุมวิธีการขอเนื้อหา (HTML, CSS, JS, รูปภาพ ฯลฯ) จากเครือข่ายหรือแคช แม้ว่าคุณจะอนุญาตให้คุณส่งคืนเนื้อหาที่แคชไว้ขณะออฟไลน์ก็ตาม กล่องทำงานจะช่วยให้คุณตั้งค่าและจัดการทั้งและอื่นๆ ได้อย่างรวดเร็วด้วยโค้ดที่พร้อมใช้งานจริง

การอัปเกรดเว็บไซต์ AEM เป็น PWA

Adobe Experience Manager (AEM) เป็นโซลูชันการจัดการเนื้อหาที่ครอบคลุมสำหรับการสร้างเว็บไซต์ แอปบนอุปกรณ์เคลื่อนที่ แบบฟอร์ม และป้ายดิจิทัล ซึ่งช่วยให้คุณจัดการเนื้อหาและชิ้นงานการตลาดได้อย่างง่ายดาย

แม้ว่า AEM จะมีไลบรารีที่สมบูรณ์สำหรับการสร้างเว็บแอปพลิเคชัน แต่การสร้าง PWA ก็ทำได้ยากโดยการเพิ่ม Service Worker และไฟล์ Manifest มาจนถึงปัจจุบัน

เว็บไซต์ Adobe Experience Manager คือเครื่องมือสร้าง UI ที่เป็นส่วนหนึ่งของ Adobe Experience Manager เมื่อใช้ร่วมกับ Adobe Experience Manager เป็นบริการระบบคลาวด์ เว็บไซต์ AEM จะช่วยให้การแปลงเว็บไซต์ AEM หรือแอปพลิเคชันหน้าเว็บเดียวที่มีอยู่เป็น Progressive Web App ที่เปิดใช้งานออฟไลน์และติดตั้งได้ โดยใช้เพียงการกำหนดค่าและไม่ต้องเขียนโค้ด โดยจะใช้ Workbox เพื่อมอบแนวทางปฏิบัติแนะนำสำหรับ Progressive Web App และลดความซับซ้อนของการเขียนไฟล์ Manifest แบบ Boilerplate และ 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 มีอินเทอร์เฟซผู้ใช้เพื่อกำหนดค่าคุณสมบัติที่ใช้งานง่าย

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

คุณกำหนดค่าเนื้อหาเพื่อแคชและกลยุทธ์การแคชที่จะใช้ได้

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

ใน AEM คำว่า "clientlibs" หมายถึงไลบรารีฝั่งไคลเอ็นต์: ชุดค่าผสมของ JavaScript, CSS และทรัพยากรแบบคงที่ที่เกี่ยวข้องซึ่งเพิ่มลงในโปรเจ็กต์ที่แสดงและใช้งานโดยเว็บเบราว์เซอร์ของไคลเอ็นต์ คุณสามารถตั้งค่าไลบรารีฝั่งไคลเอ็นต์ให้ใช้งานแบบออฟไลน์ได้ง่ายๆ โดยการระบุไลบรารีเหล่านั้นในอินเทอร์เฟซผู้ใช้

คุณยังรวมทรัพยากรของบุคคลที่สาม เช่น แบบอักษร ได้ด้วย การกำหนดค่าแคชออฟไลน์นี้จะให้ข้อมูลการกำหนดค่าแก่ Service Worker ที่สร้างขึ้นสำหรับแอปพลิเคชันของคุณที่ใช้ Workbox ภายใน เพียงเท่านี้ก็ทำให้แอปพลิเคชันของคุณสามารถติดตั้งได้ เมื่อติดตั้งแล้ว ไอคอนแอปพลิเคชันจะแสดงขึ้นบนหน้าจอหลักของอุปกรณ์เคลื่อนที่ เช่นเดียวกับแอปพลิเคชันแพลตฟอร์ม การคลิกที่ไอคอนจะเป็นการเข้าสู่ไซต์ wknd

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

คุณเพิ่มพื้นที่เก็บข้อมูลแคชเพื่อดูเนื้อหาที่แคชไว้ในเครื่องได้โดยทำดังนี้

ผลลัพธ์

ถึงเวลาดูผลลัพธ์จากความทุ่มเทของคุณกันแล้ว เพียงกำหนดค่าและไม่ต้องเขียนโค้ด คุณก็เพิ่งเพิ่มประสิทธิภาพเว็บไซต์ AEM ให้เป็น Progressive Web App

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome มีการตรวจสอบประภาคารซึ่งช่วยให้คุณตรวจสอบได้ว่าเว็บแอปพลิเคชันและการกำหนดค่าสอดคล้องกับมาตรฐาน Progressive Web App มากน้อยเพียงใด

บทสรุป

Progressive Web App ให้ประสบการณ์ที่เหมือนกับแอปสําหรับเว็บไซต์ของคุณ ซึ่งใช้ข้ามแพลตฟอร์มและธรรมชาติแบบเปิดของเว็บโดยมีต้นทุนในการพัฒนาและบำรุงรักษาที่ต่ำกว่า พร้อมทั้งให้การควบคุมการจัดจำหน่าย ซึ่งช่วยเพิ่มการมีส่วนร่วม การคงผู้ใช้ไว้ และที่สำคัญที่สุดคือช่วยเพิ่มอัตรา Conversion ให้สูงขึ้น AEM ทำงานร่วมกับ Workbox เพื่อปรับปรุงเว็บไซต์ที่มีอยู่ให้เป็น PWA ได้ง่ายๆ เพียงแค่กำหนดค่าโดยไม่ต้องเขียนโค้ด

ข้อมูลอ้างอิง

• บทแนะนำ WKND
• โปรแกรมทำงานของบริการ
• API แคช
• ไฟล์ Manifest ของเว็บแอปพลิเคชัน
• การรองรับไอคอนแบบปรับอัตโนมัติใน PWA ที่มีไอคอนที่มาสก์ได้
• ดูข้อมูลเพิ่มเติมเกี่ยวกับเว็บไซต์ Adobe Experience Manager
• ดูข้อมูลเพิ่มเติมเกี่ยวกับ Workbox ดังนี้
• กลยุทธ์การแคช Workbox:
• ดูข้อมูลเพิ่มเติมเกี่ยวกับ Progressive Web App