ทำให้แอปของคุณทำงานแบบออฟไลน์กับพนักงานบริการ

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

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

สร้างเว็บไซต์? ปรับปรุงกระบวนการของคุณด้วยความยอดเยี่ยม สร้างเว็บไซต์ และรักษาไว้ด้วยดี เว็บโฮสติ้ง บริการ. และรับที่เก็บของคุณเรียงลำดับด้วยสิ่งเหล่านี้ การจัดเก็บเมฆ ตัวเลือก.

พนักงานบริการคืออะไร?

ดังนั้นพนักงานบริการคืออะไร? มันเป็นสคริปต์ที่เขียนใน JavaScript ว่าเบราว์เซอร์ของคุณทำงานในพื้นหลัง มันไม่ได้ส่งผลกระทบต่อเธรดหลัก (ที่จาวาสคริปต์มักจะทำงานบนเว็บเพจ) และจะไม่ขัดแย้งกับรหัสแอปของคุณหรือส่งผลต่อประสิทธิภาพการทำงานรันไทม์

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

วงจรชีวิตของพนักงานบริการ

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

การติดตั้ง & gt; รอ (ติดตั้ง) & gt; เปิดใช้งาน & gt; เปิดใช้งาน & gt; ซ้ำซ้อน

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

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

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

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

สิ่งสำคัญคือต้องทราบว่าคุณไม่ควรเปลี่ยนแปลง (หรือ rev) ชื่อของพนักงานบริการของคุณ และไม่ควรแคชไฟล์ของคนงานบนเซิร์ฟเวอร์เนื่องจากคุณจะไม่สามารถอัปเดตได้อย่างง่ายดายแม้ว่าตอนนี้เบราว์เซอร์จะฉลาดพอที่จะเพิกเฉยต่อส่วนหัวแคช

01. โคลนแอปสาธิต

โอเคเริ่มเรียนรู้วิธีการสร้างเว็บแอปด้วยความช่วยเหลือจากพนักงานบริการ สำหรับการกวดวิชานี้คุณจะต้องติดตั้ง Node.js และ NPM รุ่นล่าสุดบนคอมพิวเตอร์ของคุณ

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

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

02. รับกุญแจ API ของคุณ

ในการดึงข้อมูลสภาพอากาศจาก API คุณจะต้องได้รับกุญแจ API ฟรีจากตัวเอง openweathermap :

เมื่อคุณมีกุญแจของคุณเปิดขึ้น index.html และมองหา window.api_key ตัวแปรใน & lt; หัว & gt; . วางคีย์ของคุณลงในค่า:

    window.API_KEY = 'paste-your-key-here';

03. เริ่มต้นเซิร์ฟเวอร์การพัฒนา

ตอนนี้เราพร้อมที่จะเริ่มทำงานในโครงการ ก่อนอื่นให้ติดตั้งการอ้างอิงโดยการทำงาน:

    npm install

เครื่องมือสร้างสองงานมีสองภารกิจ วิ่ง การเริ่มต้น NPM ในการเริ่มต้นเซิร์ฟเวอร์การพัฒนาบนพอร์ต 3000 รัน NPM Run Build เพื่อเตรียมรุ่น 'การผลิต' จำไว้ว่านี่เป็นเพียงการสาธิตดังนั้นจึงไม่ใช่รุ่นผลิตจริง ๆ - ไม่มีการทำเครื่องหมายหรืออะไรเลย - ไฟล์เพิ่งได้รับ 'revved'

อัลกอริทึมใช้ในการสร้างแฮชเช่น 9C616053E5 จากเนื้อหาของไฟล์ อัลกอริทึมจะส่งออกแฮชเดียวกันเสมอสำหรับเนื้อหาเดียวกันหมายความว่าตราบใดที่คุณไม่ได้แก้ไขไฟล์แฮชจะไม่เปลี่ยนแปลง จากนั้นแฮชจะถูกผนวกเข้ากับชื่อไฟล์ดังนั้นตัวอย่างเช่น Styles.css อาจกลายเป็นสไตล์ -9C616053E5.css แฮชหมายถึงการแก้ไขของไฟล์ - ดังนั้น 'revved'

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

04. แนะนำพนักงานบริการของคุณ

ตอนนี้ขอเริ่มต้นกับพนักงานบริการของเรา สร้างไฟล์ที่เรียกว่า sw.js ในรากของ src ไดเรกทอรี. จากนั้นเพิ่มผู้ฟังสองเหตุการณ์เหล่านี้เพื่อเข้าสู่ระบบ ติดตั้ง และ เปิดใช้งาน เหตุการณ์:

 Self.addEventListener ('ติดตั้ง', (เหตุการณ์) = & gt; {
      console.log (กิจกรรม);
    });

    Self.addEventListener ('เปิดใช้งาน', (เหตุการณ์) = & gt; {
      console.log (กิจกรรม);
    }); 

ที่ ตัวเอง ตัวแปรที่นี่แสดงถึงขอบเขตการอ่านเฉพาะทั่วโลกของพนักงานบริการ มันเป็นเหมือน หน้าต่าง วัตถุในหน้าเว็บ

ต่อไปเราต้องอัปเดตไฟล์ index.html ของเราและเพิ่มคำสั่งเพื่อติดตั้งพนักงานบริการ เพิ่มสคริปต์นี้ก่อนปิด & lt; / body & gt; แท็ก. มันจะลงทะเบียนพนักงานของเราและบันทึกสถานะปัจจุบัน

 & lt; สคริปต์ & gt;
     ถ้า ('serviceworker' ใน Navigator) {
       navigator.serviceworker.register ('/ sw.js')
         . จากนั้น (ฟังก์ชั่น (reg) {
           ถ้า (reg.installing) {
             console.log ('การติดตั้ง SW');
           } อื่นถ้า (reg.waiting) {
             console.log ('sw รอ');
           } อื่นถ้า (reg.active) {
             console.log ('sw เปิดใช้งาน');
           }
         }). จับ (ฟังก์ชั่น (ข้อผิดพลาด) {
           // การลงทะเบียนไม่สำเร็จ
           console.log ('การลงทะเบียนล้มเหลวด้วย' + ข้อผิดพลาด);
         });
     }
   & lt; / script & gt; 

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

05. เปิดใช้งานคนงาน

เราจะบอกคนงานของเราเพื่อข้ามขั้นตอนรอและเปิดใช้งานตอนนี้ เปิดไฟล์ SW.JS และเพิ่มบรรทัดนี้ทุกที่ภายใน ติดตั้ง ผู้ฟังเหตุการณ์:

 Self.Skipwaiting (); 

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

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

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

06. ยืนยันการเปลี่ยนแปลง

มายืนยันสิ่งนี้ด้วยการเพิ่ม console.log ('foo') โทรในผู้ฟังเหตุการณ์อย่างใดอย่างหนึ่งและรีเฟรชหน้า สิ่งนี้จับเราเพราะเราคาดหวังว่าจะเห็นการเข้าสู่ระบบในคอนโซลเมื่อเรารีเฟรช แต่สิ่งที่เราเห็นคือข้อความ 'SW เปิดใช้งาน' ปรากฎว่าโครเมี่ยมรีเฟรชหน้าสองครั้งเมื่อการอัพเดตในตัวเลือกการโหลดซ้ำถูกทำเครื่องหมาย

คุณสามารถยืนยันได้โดยการฟ้องกล่องเก็บบันทึกการเก็บรักษาไว้ในแผงการตั้งค่าคอนโซลและรีเฟรชอีกครั้ง คุณควรเห็นการติดตั้งและเปิดใช้งานเหตุการณ์ที่บันทึกพร้อมด้วย 'Foo' ตามด้วย 'Navigated ไปยัง http: // localhost: 3000 /' เพื่อระบุว่าหน้าถูกโหลดซ้ำแล้วโหลดใหม่แล้วข้อความ 'SW เปิดใช้งาน' สุดท้าย

07. ติดตามเหตุการณ์การดึงข้อมูล

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

 Self.addeventListener ('Fetch', (เหตุการณ์) = & GT; {
 console.log (กิจกรรม);
}); 

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

 Self.addeventListener ('Fetch', (เหตุการณ์) = & GT; {
 // ละเว้นคำขอ Crossdomain
 ถ้า (! event.request.url.startswith (self.location.origin)) {
   กลับ;
 }
 // ไม่สนใจคำขอที่ไม่ได้รับ
 ถ้า (event.request.method! == 'รับ') {
   กลับ;
 }
 // ละเว้นเบราว์เซอร์ซิงค์
 ถ้า (event.request.url.indexof ('เบราว์เซอร์ซิงค์') & gt; -1) {
   กลับ;
 }
 // ป้องกันเส้นทางดัชนีถูกแคช
 ถ้า (event.request.url === (self.location.origin + '/')) {
   กลับ;
 }
 // ป้องกัน index.html ถูกแคช
 ถ้า (event.request.url.endswith ('index.html')) {
   กลับ;
 }
 console.log (กิจกรรม);
}); 

ตอนนี้บันทึกควรทำความสะอาดมากและปลอดภัยที่จะเริ่มแคช

08. แคชสินทรัพย์

ตอนนี้เราสามารถเริ่มการตอบสนองเหล่านี้ได้ ก่อนอื่นเราต้องให้ชื่อแคชของเรา ลองโทรหาเรา v1- สินทรัพย์ . เพิ่มบรรทัดนี้ไปที่ด้านบนของไฟล์ sw.js:

 Const Assetscachename = 'V1- สินทรัพย์'; 

จากนั้นเราต้องจี้ FetchEvents เพื่อให้เราสามารถควบคุมสิ่งที่ส่งคืนไปยังหน้า เราสามารถทำได้โดยใช้เหตุการณ์ ตอบสนองด้วย วิธี. วิธีนี้ยอมรับสัญญาเพื่อให้เราสามารถเพิ่มรหัสนี้แทนที่ console.log :

 // บอกการดึงข้อมูลเพื่อตอบสนองกับห่วงโซ่สัญญานี้
 event.rondnith (
   // เปิดแคช
   Caches.Open (Assetscachename)
     . จากนั้น ((แคช) = & gt; {
       // ทำการร้องขอไปยังเครือข่าย
       ดึงกลับ (event.request)
         . จากนั้น ((ตอบสนอง) = & gt; {
           // แคชการตอบสนอง
           cache.put (event.request, response.clone ());
           // ส่งคืนการตอบกลับต้นฉบับไปยังหน้า
           กลับตอบกลับ;
         });
     })
 ); 

สิ่งนี้จะส่งต่อการร้องขอไปยังเครือข่ายจากนั้นเก็บการตอบสนองในแคชก่อนที่จะส่งการตอบกลับต้นฉบับกลับไปที่หน้า

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

รีเฟรชสองสามครั้งและตรวจสอบแคชใน DevTools & GT; แท็บแอปพลิเคชัน ขยายแผนผังการเก็บแคชในคอลัมน์ด้านซ้ายและคุณควรเห็นแคชของคุณพร้อมคำตอบที่เก็บไว้ทั้งหมด

09. เสิร์ฟจากแคช

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

// บอกการดึงข้อมูลเพื่อตอบโต้ด้วยห่วงโซ่นี้
 event.rondnith (
   // เปิดแคช
   Caches.Open (Assetscachename)
     . จากนั้น ((แคช) = & gt; {
       // มองหาคำขอจับคู่ในแคช
       ส่งคืน cache.match (event.request)
         . จากนั้น (จับคู่) = & gt; {
           // หากพบการแข่งขันส่งคืนรุ่นแคชก่อน
           ถ้า (จับคู่) {
             กลับมาจับคู่;
           }
           // ดำเนินการต่อไปยังเครือข่าย
           ดึงกลับ (event.request)
             . จากนั้น ((ตอบสนอง) = & gt; {
               // แคชการตอบสนอง
               cache.put (event.request, response.clone ());
               // ส่งคืนการตอบกลับต้นฉบับไปยังหน้า
               กลับตอบกลับ;
             });
         });
     })
); 

บันทึกไฟล์และรีเฟรช ตรวจสอบ devtools & gt; แท็บเครือข่ายและคุณควรเห็น (จาก serviceworker) ที่ระบุไว้ในคอลัมน์ขนาดสำหรับแต่ละสินทรัพย์คงที่

วววว. เราทำเสร็จแล้ว สำหรับรหัสจำนวนเล็กน้อยดังกล่าวมีจำนวนมากที่ต้องเข้าใจ คุณควรเห็นว่าการรีเฟรชหน้าเมื่อสินทรัพย์ทั้งหมดถูกแคชค่อนข้างเร็ว แต่มาตรวจสอบเวลาโหลดอย่างรวดเร็ว (ไม่มีวิทยาศาสตร์) ในการเชื่อมต่อที่ผ่านการเชื่อมต่อ (DevTools & GT แท็บเครือข่าย)

หากไม่มีพนักงานบริการกำลังโหลดผ่านเครือข่าย 3G ที่จำลองแบบจำลองใช้เวลาเกือบ 30 วินาทีในการโหลดทุกอย่าง กับคนงานบริการที่มีการเชื่อมต่อเทิร์ลด์เดียวกัน แต่กำลังโหลดจากแคชใช้เวลาเพียงไม่กี่วินาที

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

หน้าถัดไป: ใช้บริการพนักงานให้บริการเพื่อให้การเข้าถึงออนไลน์

• 1
• 2

หน้าปัจจุบัน: หน้า 1: โหลดเร็วขึ้น