มาทำเว็บให้ใช้งาน offline ด้วย sw-toolbox กัน

มาทำเว็บให้ใช้งาน offline ด้วย sw-toolbox กัน

Feature นึงเลยของ ServiceWorker คือ การทำ Cache เพื่อใช้งาน Offline ไอ้คำว่า offline ที่ว่าก็คือ เน็ตไม่ติดก็ยังโหลดบางส่วนมาแสดงผลได้ หรือบาง App ที่ทำเป็น Progressive Web App ก็ยังสามารถ ใช้งานโดยไม่ใช่เน็ตได้ แต่คราวนี้ถ้าจะให้เขียนแบบ Original เลยก็ค่อนข้างวุ่ยวายหน่อย ผมก็เลยแนะนำว่าให้ใช้ sw-toolbox จะง่ายกว่าจะไม่ต้องทำอะไรมาก โอเคมาเริ่มกันเลย

Github ของ sw-toolbox

เริ่มกันที่การ install sw-toolbox สามารถเลือกได้ตามสะดวกเลยว่าชอบแบบไหน

bower install — save sw-toolbox

npm install — save sw-toolbox

git clone https://github.com/GoogleChrome/sw-toolbox.git

หลังจากนั้นก็ เพิ่มตัว register Service worker เข้าไปที่ ไฟล์ html หลัก โดยผม register ไฟล์ชื่อ sw.js เข้าไปนะครับ

<script type="text/javascript">
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js');
    }
</script>

คราวนี้ในไฟล์ sw.js เราก็เริ่มด้วยการ import sw-toolbox เข้าไปก่อน อันนี้ก็ต่างกันไปตามวิธีการลงนะครับของผมลงด้วย npm เพื่อให้สมบูรณ์ ให้เติม addEventListener ของ event Install และ Active ลงไปด้วย ก็เอาง่ายๆก็ copy ข้างล่างไปเลยครับ

importScripts('node_modules/sw-toolbox/sw-toolbox.js');

self.addEventListener('install', (event) => {
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

คราวนี้ก็ เป็นจั้นตอนการ cache แล้วครับ หลักๆเนี่ย เราก็คงต้อง cache asset (css,HTML,js) ทั้งหมดเอาไว้ก่อน โดยที่เราสามารถให้ cache ตอนที่เรียกใช้ หรือ cache ไว้ก่อน (Precache ก็ได้) โดยการเพิ่มบันทัดล่างลงไป ใน array ก็ไฟล์ที่จะ cahce trick ตรงนี้คือ ให้ใส่ part ที่จะ cache นะครับ

toolbox.precache(['/','/index.html', 'asset/jquery-3.0.0.min.js','asset/materialize.min.css','asset/materialize.min.js'

อันนี้จะเป็นวิธีแรก ส่วนวิธีต่อมาก็ คือการ cache ด้วย router โดย ไม่มีอะไรมากครับ อย่างแรกต้องบอกก่อนว่า cache method ไหน GET,POST,PUT โดยใน ตัวอย่างของผมเป็น get ครับ หลังจากนั้นก็ระบุว่าให้ cache ไฟล์ไหน ส่วนอันสุดท้ายเนี่ยจะเป็น handler ครับโดยที่เอาไว้กำหนดเงื่อนไขว่า ของการแสดงผลหลังจาก cache ซึ่งมี 5 แบบให้เลือกครับ
toolbox.networkFirst = ให้load ก่อน ถ้า offline ค่อยใช้ cache

toolbox.cacheFirst = เอาจาก cahce ก่อน ถ้าไม่มีค่อย load

toolbox.fastest = เอาอะไรก็ได้ที่โหลดเสร็จก่อน

toolbox.cacheOnly = เอามาจาก Cache เท่านั้น ต่อให้ online อย่ก็ให้เอามาจาก Cache

toolbox.networkOnly = ให้เอาจาก remote ตลอดเวลา (แล้วจะ cache ทำไม?)

toolbox.router.get('/index.html', toolbox.fastest);

หลักจากนั้นลองตัดเน็ตเลยครับ App ของเราเข้าได้ตามปกติครับ ตอนนี้ พวกไฟล์ css js html ก็จะถูก cache หลังจากเปิดเข้าหน้าเว็บครั้งแรก

แต่พอเราจะ cache API หรือ เว็บที่ไม่ใช่เว็บเรามันก็มีเรื่องต้องทำเพิ่มอยู่สองข้อ

1. เวลาเรียก API ต้องใช้ Fetch API ซึ่งไปอ่านได้ที่นี่

2. วิธีการเช็ท router ต้องเซ้ท origin ด้วย แบบนี้

toolbox.router.get(‘/(.*)’, toolbox.cacheFirst, {origin: ‘https://graph.facebook.com'});

แค่นี้เวลาเรา request จาก API Service worker ก็จะ cache เอาไว้แล้ว

ข้างล่างนี่เป้ตัวอย่างไฟล์ index.html ครับ

https://gist.github.com/thangman22/8c1f9fe98d40179b23eb7378620ada5d

นี่ก็ sw.js ครับ

https://gist.github.com/thangman22/05604168225ef4f5b26224fe2b98e386

ใครอยากลองทำให้เว็บตัวเอง รองรับการใช้งาน offline หรือ อยากลอง cache asset ให้เว็บเร็วขึ้นก็ลองเอาไปเล่นกันครับ