M

MLOG

ไทย

เรียนรู้วิธีการใช้ Service Worker เพื่อสร้างเว็บแอปพลิเคชันแบบ Offline-First ที่รวดเร็ว เชื่อถือได้ และดึงดูดผู้ใช้ทั่วโลก

Service Workers: การสร้างเว็บแอปพลิเคชันแบบ Offline-First

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

Service Worker คืออะไร?

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

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

ทำไมต้องเป็น Offline-First?

การสร้างเว็บแอปพลิเคชันแบบ Offline-First มีประโยชน์มากมาย:

Service Worker ทำงานอย่างไร

วงจรชีวิตของ Service worker ประกอบด้วยหลายขั้นตอน:

  1. การลงทะเบียน (Registration): Service worker จะถูกลงทะเบียนกับเบราว์เซอร์ โดยระบุขอบเขตของแอปพลิเคชันที่จะควบคุม
  2. การติดตั้ง (Installation): Service worker จะถูกติดตั้ง ซึ่งในระหว่างนี้โดยทั่วไปจะทำการแคชทรัพย์สินคงที่
  3. การเปิดใช้งาน (Activation): Service worker จะถูกเปิดใช้งานและเข้าควบคุมเว็บแอปพลิเคชัน ซึ่งอาจรวมถึงการยกเลิกการลงทะเบียน Service worker เก่าและการล้างแคชเก่า
  4. สถานะว่าง (Idle): Service worker จะอยู่ในสถานะว่าง รอการร้องขอเครือข่ายหรือเหตุการณ์อื่นๆ
  5. การดึงข้อมูล (Fetch): เมื่อมีการร้องขอเครือข่าย Service worker จะดักจับและสามารถให้บริการเนื้อหาที่แคชไว้หรือดึงทรัพยากรจากเครือข่าย

การนำ Offline-First มาใช้กับ Service Worker: คำแนะนำทีละขั้นตอน

นี่คือตัวอย่างพื้นฐานของวิธีการนำฟังก์ชันการทำงานแบบ Offline-First มาใช้โดยใช้ Service worker:

ขั้นตอนที่ 1: ลงทะเบียน Service Worker

ในไฟล์ JavaScript หลักของคุณ (เช่น `app.js`): 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

โค้ดนี้จะตรวจสอบว่าเบราว์เซอร์รองรับ Service worker หรือไม่ และทำการลงทะเบียนไฟล์ `service-worker.js` โดยขอบเขต (scope) จะเป็นตัวกำหนดว่า URL ใดบ้างที่ Service worker จะควบคุม

ขั้นตอนที่ 2: สร้างไฟล์ Service Worker (service-worker.js)

สร้างไฟล์ชื่อ `service-worker.js` พร้อมด้วยโค้ดต่อไปนี้:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // ทำขั้นตอนการติดตั้ง
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // พบในแคช - ส่งคืน response
        if (response) {
          return response;
        }

        // สำคัญ: ต้องโคลน request
        // request เป็นสตรีมและสามารถใช้ได้เพียงครั้งเดียว เพราะเรากำลังจะใช้มันครั้งหนึ่งโดยแคช
        // และอีกครั้งโดยเบราว์เซอร์เพื่อ fetch เราจึงต้องโคลน response
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // ตรวจสอบว่าเราได้รับ response ที่ถูกต้องหรือไม่
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // สำคัญ: ต้องโคลน response
            // response เป็นสตรีมและต้องใช้เพียงครั้งเดียว
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

โค้ดนี้ทำสิ่งต่อไปนี้:

ขั้นตอนที่ 3: ทดสอบฟังก์ชันการทำงานแบบออฟไลน์ของคุณ

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

เทคนิค Service Worker ขั้นสูง

เมื่อคุณมีความเข้าใจพื้นฐานเกี่ยวกับ Service worker แล้ว คุณสามารถสำรวจเทคนิคขั้นสูงเพิ่มเติมเพื่อปรับปรุงแอปพลิเคชันแบบ Offline-First ของคุณได้:

กลยุทธ์การแคช (Caching Strategies)

มีกลยุทธ์การแคชหลายแบบที่คุณสามารถใช้ได้ ขึ้นอยู่กับประเภทของทรัพยากรและข้อกำหนดของแอปพลิเคชันของคุณ:

การเลือกกลยุทธ์การแคชที่เหมาะสมขึ้นอยู่กับทรัพยากรเฉพาะและข้อกำหนดของแอปพลิเคชันของคุณ ตัวอย่างเช่น ทรัพย์สินคงที่อย่างรูปภาพและไฟล์ CSS มักจะเหมาะกับกลยุทธ์ Cache First ที่สุด ในขณะที่เนื้อหาแบบไดนามิกอาจได้รับประโยชน์จากกลยุทธ์ Network First หรือ Cache then Network

การซิงโครไนซ์ในเบื้องหลัง

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

การแจ้งเตือนแบบพุช

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

Workbox

Workbox คือชุดไลบรารี JavaScript ที่ช่วยให้การสร้าง Service worker ง่ายขึ้น โดยมี abstractions สำหรับงานทั่วไป เช่น การแคช, การกำหนดเส้นทาง (routing) และการซิงโครไนซ์ในเบื้องหลัง การใช้ Workbox สามารถทำให้โค้ด Service worker ของคุณง่ายขึ้นและบำรุงรักษาได้ง่ายขึ้น ปัจจุบันหลายบริษัทใช้ Workbox เป็นส่วนประกอบมาตรฐานในการพัฒนา PWA และประสบการณ์แบบ Offline-First

ข้อควรพิจารณาสำหรับผู้ใช้ทั่วโลก

เมื่อสร้างเว็บแอปพลิเคชันแบบ Offline-First สำหรับผู้ใช้ทั่วโลก สิ่งสำคัญคือต้องพิจารณาปัจจัยต่อไปนี้:

ตัวอย่างแอปพลิเคชันแบบ Offline-First

เว็บแอปพลิเคชันยอดนิยมหลายแห่งได้นำฟังก์ชันการทำงานแบบ Offline-First มาใช้โดยใช้ Service worker ได้สำเร็จ:

สรุป

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

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