สิ่งที่ควรและไม่ควรทำล่วงหน้า

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

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

สิ่งที่ควรทำ: เนื้อหาแบบคงที่ที่สำคัญในแคชล่วงหน้า

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

• สไตล์ชีตสากล
• ไฟล์ JavaScript ที่มีฟังก์ชันการทำงานส่วนกลาง
• Application Shell HTML หากมีผลกับสถาปัตยกรรมของคุณ

โปรดทราบ: ข้อมูลเหล่านี้เป็นเพียงหลักเกณฑ์ทั่วไป ไม่ใช่คำแนะนำที่สำคัญ ขณะแคชเนื้อหาล่วงหน้า ควรจะเตรียมการแคชล่วงหน้าให้น้อยลงมากกว่าการแคชเนื้อหาล่วงหน้า

สิ่งที่ควรทำ: แคชสำรองแบบออฟไลน์ล่วงหน้าสำหรับเว็บไซต์ที่มีหลายหน้า

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

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

import {PrecacheFallbackPlugin, precacheAndRoute} from 'workbox-precaching';
import {registerRoute, Route} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
import * as navigationPreload from 'workbox-navigation-preload';

navigationPreload.enable();

// Ensure that /offline.html is part of your precache manifest!
precacheAndRoute(self.__WB_MANIFEST);

// The network-only callback should match navigation requests, and
// the handler for the route should use the network-only strategy, but
// fall back to a precached offline page in case the user is offline.
const networkOnlyNavigationRoute = new Route(({request}) => {
  return request.mode === 'navigate';
}, new NetworkOnly({
  plugins: [
    new PrecacheFallbackPlugin({
      fallbackURL: '/offline.html'
    })
  ]
}));

registerRoute(networkOnlyNavigationRoute);

วิธีนี้ช่วยให้มั่นใจว่าหากผู้ใช้ออฟไลน์และไปยังหน้าที่ไม่ได้อยู่ในแคช อย่างน้อยที่สุดผู้ใช้ก็จะได้รับเนื้อหาออฟไลน์

อาจควร: ลองพิจารณาการแคชล่วงหน้าแบบคาดเดา

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

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

อาจไม่ใช้: HTML คงที่แบบแคชล่วงหน้า

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

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

อย่างไรก็ตาม กฎนี้มีข้อยกเว้นบางประการ หากคุณกำลังทำให้เว็บไซต์ขนาดเล็กใช้งานได้ด้วยไฟล์ HTML แบบคงที่ไม่กี่ไฟล์ คุณสามารถแคชหน้าเว็บเหล่านั้นทั้งหมดล่วงหน้าเพื่อให้หน้าเว็บเหล่านั้นใช้งานแบบออฟไลน์ได้ หากคุณมีเว็บไซต์ขนาดใหญ่เป็นพิเศษ ให้พิจารณาการแคชหน้าเว็บที่มีคุณค่าสูงล่วงหน้าไว้สัก 2-3 หน้าและหน้าเว็บสำรองแบบออฟไลน์ แล้วใช้การแคชรันไทม์เพื่อแคชหน้าอื่นๆ ให้คุณ

อย่าแคชรูปภาพหรือไอคอน Fav ที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้า

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

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

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

ไม่ควร: โพลีฟิลล์สำหรับการแคชล่วงหน้า

การรองรับเบราว์เซอร์ที่แตกต่างกันสำหรับ API เป็นความท้าทายอย่างต่อเนื่องสําหรับนักพัฒนาเว็บ และ Polyfill ก็เป็นหนึ่งในวิธีที่ประสบผลสำเร็จ วิธีหนึ่งในการลดค่าใช้จ่ายด้านประสิทธิภาพของ Polyfill ก็คือการตรวจสอบฟีเจอร์และโหลดเฉพาะ Polyfill สำหรับเบราว์เซอร์ที่ต้องการใช้เท่านั้น

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

อย่าแคช Polyfill ล่วงหน้า ใช้การแคชรันไทม์เพื่อให้แน่ใจว่ามีการแคชเฉพาะในเบราว์เซอร์ที่ต้องใช้เพื่อหลีกเลี่ยงการสูญเสียข้อมูล

บทสรุป

การแคชล่วงหน้าต้องอาศัยการไตร่ตรองว่าผู้ใช้ต้องการเนื้อหาใดก่อนล่วงหน้า แต่คุณก็สามารถทำได้ในลักษณะที่ให้ความสำคัญกับประสิทธิภาพและความน่าเชื่อถือในอนาคตอย่างแน่นอน

หากไม่แน่ใจว่าเนื้อหาบางอย่างควรแคชล่วงหน้าหรือไม่ วิธีที่ดีที่สุดคือแจ้งให้ Workbox ยกเว้นเนื้อหาเหล่านั้นและสร้างเส้นทางการแคชรันไทม์เพื่อจัดการเนื้อหาเหล่านั้น อย่างไรก็ตาม เอกสารนี้มีการอธิบายรายละเอียดเกี่ยวกับการแคชล่วงหน้าเพื่อให้คุณใช้หลักการเหล่านี้กับตรรกะการแคชล่วงหน้าได้ในอนาคต