การใช้ Service Worker เพื่อสร้าง Progressive Web App (PWA)

สารจากนักเขียน

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

เขียนโดย

รติกร ศรอำพล

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 7 พฤศจิกายน 2023

Share Tweet

ที่มา : https://1stcraft.com/what-is-progressive-web-application/

รู้จัก Progressive Web Application

Progressive Web Application (PWA) คือการทำเว็บไซต์ธรรมดาให้ใกล้เคียงกับแอปพลิเคชันที่ดาวน์โหลดลงเครื่องมากที่สุด ทั้งในแง่รูปลักษณ์ ความเร็ว ไปจนถึงการใช้งาน สมกับคำเรียกที่ว่า “Progressive” (ก้าวหน้า) นั่นเอง
โดย Progressive Web Application จะมีการปรับการแสดงผลให้เหมาะกับอุปกรณ์ที่ใช้โดยเฉพาะ ไม่ว่าจะเป็น desktop, mobile หรือ tablet

คุณสมบัติของ Progressive Web Application

Google Developer ได้ระบุว่า Progressive Web Application ที่แท้จริงควรมีคุณสมบัติ 3 อย่างคือ:

1. Reliable (มีความน่าเชื่อถือ): สามารถใช้งานได้ตลอดแม้ว่าการทำงานของเครือข่ายจะไม่เสถียร
2. Fast (ต้องเร็ว): ไม่ว่าจะมีอนิเมชั่นสวยหรืออะไรก็แล้วแต่ การตอบสนองต่อผู้ใช้สำคัญที่สุด
3. Engaging (มีความน่าสนใจ): ผู้ใช้สามารถใช้งานมันไม่ต่างกับแอปพลิเคชั่นปกติ

ความแตกต่างระหว่าง Progressive Web Application กับ Web Application ทั่วไป

Progressive Web Application มีความแตกต่างที่สำคัญจาก Web Application ทั่วไปตรงที่:

• เปิดได้แม้ไม่มีอินเทอร์เน็ต: Progressive Web Application สามารถเก็บข้อมูลบางส่วนของผู้ใช้เอาไว้ในเครื่อง ทำให้สามารถทำงานแบบออฟไลน์ได้ แม้ไม่มีการเชื่อมต่ออินเทอร์เน็ต
• มีความรวดเร็ว: การโหลดข้อมูลมาใช้ทำให้มีการทำงานรวดเร็วกว่า Web Application ปกติ
• สามารถแสดงผลได้แบบเต็มจอ: ไม่มีหน้าจอส่วนควบคุมของเบราเซอร์มาครอบไว้ให้ดูขัดตา การทำงานจะเหมือนการใช้แอพเต็มจริงๆ
• มีการทำงานภายนอกเหมือนแอป: เช่น สามารถสร้างทางลัดไว้ด้านนอกเพื่อเปิดเข้าได้ทันที, ส่ง Notification ได้แม้ว่าจะไม่ได้เปิดแอปพลิเคชั่น, มีการอัพเดทตลอดเวลาเพื่อลดความผิดพลาด

ข้อดีของ Progressive Web Application

การบอกว่าความแตกต่างของ Progressive Web Application กับเว็บแอปปกตินั้นเป็นข้อดีก็เห็นจะไม่ผิดนัก เพราะ Progressive ต้องการอัพเกรดตัวขึ้นจากเว็บแอปนั่นเอง โดยข้อดีที่เห็นได้ชัดก็คือ:
• สามารถทำงานบางฟังก์ชั่นแบบออฟไลน์ได้
• กินทรัพยากรเครื่องต่ำ
• ปรับการแสดงผลได้ตามต้องการ
• มีความปลอดภัยสูงกว่าเว็บแอปธรรมดา
• ขั้นตอนการใช้งานไม่ยุ่งยาก เพราะไม่จำเป็นต้องเข้าผ่านสโตร์ รอโหลด Progressive web app แค่เข้าในหน้าเว็บก็ใช้งานได้ทันที
• ไม่ถูกจำกัดด้วย OS เนื่องจากรันผ่านเว็บเบราเซอร์

บทความนี้จะสอนให้คุณเข้าใจถึงการใช้ Service Worker เพื่อสร้าง Progressive Web App (PWA) และมีการนำเสนอตัวอย่างโค้ดเพื่อให้เข้าใจได้ง่ายขึ้น

1. Service Worker เป็นอะไร?

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

2. การลงทะเบียน Service Worker

การใช้ Service Worker เริ่มต้นด้วยการลงทะเบียน Service Worker จากแอปพลิเคชัน เพื่อบอกบราวเซอร์ว่าต้องเสาอยู่ที่ไหน เราสามารถทำการลงทะเบียนได้ดังนี้:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then((registration) => {
      console.log('Service Worker registered:', registration);
    })
    .catch((error) => {
      console.log('Error registering Service Worker:', error);
    });
}

3. การจัดเก็บแคช

Service Worker มีความสามารถในการจัดเก็บข้อมูลไว้ในหน่วยความจำของเครื่องผู้ใช้ เราสามารถทำการจัดเก็บแคชได้ดังนี้:

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/images/logo.png'
      ]);
    })
  );
});

Service Worker มีความสามารถในการจัดเก็บข้อมูลไว้ในหน่วยความจำของเครื่องผู้ใช้ เราสามารถทำการจัดเก็บแคชได้ดังนี้:

4. การรองรับการร้องขอ Fetch

เมื่อมีการร้องขอข้อมูลจากแอปพลิเคชัน เราสามารถให้ Service Worker จัดการการร้องขอนั้นๆ ได้ โดยการใช้เหตุการณ์ fetch:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

5. การทดสอบและติดตั้งแอป

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

สรุป

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