นักพัฒนาเว็บมักจะต้องเผชิญกับความต้องการที่หลากหลายของผู้จัดการผลิตภัณฑ์ในการพัฒนาระบบ แน่นอนว่าส่วนใหญ่ยังคงมีประโยชน์ต่อประสบการณ์ผลิตภัณฑ์ ตัวอย่างเช่นเมื่อเราพูดถึงวันนี้ให้รีเฟรชหน้าไปข้างหน้าและย้อนกลับและปิดแท็กเบราว์เซอร์เพื่อหลีกเลี่ยงการไม่ถูกต้องของผู้ใช้จำเป็นต้องมีช่องแจ้งเตือนที่สอง ฉันเชื่อว่าทุกคนคุ้นเคยกับสิ่งนี้มาก การใช้กลไกเหตุการณ์ BOM ที่ได้รับจากเบราว์เซอร์สามารถแก้ปัญหาได้ คุณสามารถใช้เหตุการณ์ onbeforeunload ของวัตถุหน้าต่าง หากผู้จัดการผลิตภัณฑ์ทำคำขอดังกล่าวเท่านั้นมันเป็นที่เข้าใจได้จริง แต่ต้องใช้มากกว่าสิ่งเหล่านี้ ...
ตัวอย่างเช่นในระหว่างการพัฒนาโครงการผู้จัดการผลิตภัณฑ์เสนอ "แผนการปรับปรุง" สำหรับการดำเนินการของเรา:
กล่องป๊อปอัพของคุณน่าเกลียดเกินไปมันไม่ตรงกับรูปแบบโดยรวมของระบบ คุณไม่สามารถใช้กล่องโต้ตอบในไลบรารีส่วนประกอบของเราเองได้หรือไม่? คำถามที่ดีมาก ... ฉันแค่อยากจะบอกว่าคุณสามารถขึ้น ...
การรีเฟรชของคุณเหมือนกับการปิดสำเนาที่แสดงในหน้าแท็บ คุณต้องปฏิบัติต่อมันแตกต่างกัน รีเฟรช XXX และ SSS พรอมต์เมื่อปิดเพื่อให้ผู้ใช้มีความชัดเจนมากขึ้น เมื่อพิจารณาถึงประสบการณ์ของผู้ใช้มันดีมาก ฉันยังอยากจะบอกว่าคุณสามารถขึ้นได้ ... อันที่จริงเมื่อเบราว์เซอร์ปิดและรีเฟรชมันได้รับการปฏิบัติแตกต่างกัน พรอมต์นั้นแตกต่างกัน แต่ชิ้นส่วนที่กำหนดเองของเราไม่สามารถแสดงการเขียนคำโฆษณาที่แตกต่างกันได้ แน่นอนว่ายังมีวิธีการแฮ็คบางอย่าง แต่ก็ยากที่จะปรับให้เข้ากับเบราว์เซอร์หลายตัว กลไกการใช้งานของแท็บปิดและรีเฟรชภายในแต่ละเบราว์เซอร์จะแตกต่างกัน
ทำไมคุณต้องล่าช้า 10 วินาทีเพื่อให้เอเจนต์เช็คอินระบบโทรศัพท์ทุกครั้งที่คุณเข้าสู่ระบบ? ขีด จำกัด นี้จะถูกลบออกได้หรือไม่? ประสบการณ์ผู้ใช้แย่เกินไป! นอกจากนี้เรายังต้องการลบออก แต่จะมีปัญหาเกี่ยวกับการเช็คอินบ่อยครั้งและออกจากระบบโทรศัพท์ ผู้ใช้รีเฟรชเบราว์เซอร์และตรวจสอบอีกครั้ง หากช่วงเวลาสั้นระบบโทรศัพท์จะล้มเหลว เพื่อหลีกเลี่ยงปัญหานี้เราได้เพิ่มข้อ จำกัด นี้ แต่ถ้าเราคิดย้อนกลับไปเราสามารถป้อนหัวข้อที่เรากำลังพูดถึงในวันนี้
แยกความแตกต่างระหว่างแท็บสดชื่นและปิด
เราไม่สามารถแยกแยะได้ว่าจะรีเฟรชหรือปิดหน้าแท็บตามเหตุการณ์เบราว์เซอร์จากนั้นดำเนินการที่แตกต่างกันก่อนที่การกระทำที่สอดคล้องกันจะถูกทริกเกอร์ อย่างไรก็ตามสำหรับความเห็นที่สามที่เกิดขึ้นจากผลิตภัณฑ์ด้านบนเราสามารถพิจารณาปรับให้เหมาะสมซึ่งก็คือมันจะลดลงเพียง 10 วินาทีเมื่อรีเฟรชและไม่ล่าช้าเมื่อเข้าสู่ระบบใหม่หรือปิดหน้าแท็บหลังจากช่วงเวลาหนึ่ง
จริงๆแล้วมันง่ายมากที่จะทำสิ่งนี้ คุณสามารถใช้กลไกการจัดเก็บข้อมูลท้องถิ่นของเบราว์เซอร์เช่นคุกกี้การจัดเก็บข้อมูลท้องถิ่น ฯลฯ คุณไม่สามารถใช้ SessionStorage ได้ที่นี่เพราะหลังจากการตอบกลับนี้แคชจะไม่ถูกต้อง เนื่องจากการจัดเก็บในคุกกี้จะเพิ่มจำนวนไบต์การส่งเครือข่ายที่สอดคล้องกันในแต่ละคำขอจะเพิ่มขึ้นเราใช้ LocalStorage; การดำเนินการของมันนั้นง่ายมากและกรอบส่วนหน้าที่เราใช้คือ AngularJS ซึ่งเป็นดังนี้:
const max_wait_time = 10; const currentDate = วันที่ใหม่ (). getTime (); const ล่าสุด leavetime = parseInt (นี่. $ window.localstorage.getItem ('สุดท้ายล่าสุด'), 10) || CurrentDate; this.secondCounter = math.max (max_wait_time - math.ceil ((currentdate - lastleavetime) / 1000), 0); ถ้า (this.secondcounter> 0) {this.logouttimeinterval = this. $ Interval () => {this.secondcounter -; false) .then (() => {this.updateByStatus (this.avayaservice.status.offline);});} else {this.updateByStatus (this.avayaservice.status.offline);};ฟังก์ชั่นหลักของรหัสข้างต้นคือหลังจากเข้าสู่ระบบแล้วมันจะไปที่ LocalStorage ก่อนเพื่อให้ได้เวลาออกจากครั้งสุดท้ายจากนั้นรับเวลาปัจจุบันและลบสองครั้ง หากค่าน้อยกว่า 10 วินาทีเราคิดว่านี่เป็นการรีเฟรช หากค่ามากกว่า 10 วินาทีเราคิดว่าเป็นการปิดแท็บหรือเข้าสู่ระบบและจากนั้นเราสามารถดำเนินการวิธีการที่แตกต่างกันเพื่อให้การบริการลูกค้ามีประสบการณ์ที่ดีขึ้น ไม่จำเป็นต้องรอ 10 วินาทีสำหรับการเข้าสู่ระบบทุกครั้งก่อนที่จะตรวจสอบระบบโทรศัพท์ ผู้จัดการผลิตภัณฑ์ยังคงสำคัญมาก ถ้ามันไม่ได้เป็นข้อสงสัยของเขาเราอาจไม่ได้มาเพื่อเพิ่มประสิทธิภาพสถานที่แห่งนี้ ... แน่นอน RD ควรค่อยๆปลูกฝังความคิดของประสบการณ์การใช้งานนี้ก่อน แม้ว่าจะมีนิดหน่อยที่สามารถปรับปรุงประสิทธิภาพการบริการลูกค้าได้ แต่ก็คุ้มค่ากับเวลาของเราในการปรับให้เหมาะสม
มาโพสต์รหัสทางออกที่เกี่ยวข้องด้านล่าง ฉันลืมที่จะพูดก่อนหน้านี้ว่าไม่ว่าจะเป็นการรีเฟรชหรือปิดหน้าแท็บตราบใดที่หน้าถูกทำลายเราจะดำเนินการบันทึกออกจากระบบโทรศัพท์ดังนั้นเราต้องเช็คอินอีกครั้งทุกครั้งที่เราเข้ามา
// รีเฟรชหน้าหรือปิดหน้า $ window.onbeforeunload = () => {return 'การดำเนินการจะทำให้ข้อมูลหน้าถูกล้างโปรดระวัง ... ';}; // ทุกครั้งที่มีการขนถ่ายหน้า $ window.onunload = () => {$ window.localstorage.setItem ('ล่าสุดล่าสุด', วันที่ใหม่ (). getTime ());};นอกจากนี้เรายังอาจสังเกตเห็นปัญหาบางอย่างนั่นคือรีเฟรชปิดหน้าไปข้างหน้าและย้อนกลับคุณต้องกระโดดออกจากช่องยืนยันการยืนยันทุติยภูมิเริ่มต้นของเบราว์เซอร์ แต่ถ้าผู้ใช้คลิกปุ่มระบบออกกล่องโต้ตอบในไลบรารีส่วนประกอบของเขาจะต้องปรากฏขึ้นและทั้งสองจะต้องไม่ปรากฏขึ้น รหัสเฉพาะมีดังนี้:
onstatusclick (ดัชนี, ชื่อ) {ถ้า (ชื่อ === 'ออก') {this.mgdialog.openconfirm ({showclose: false, เทมเพลต: 'แอป/ส่วนหัว/logoutdialog.html', controller: 'headerDialogController => {this. $ window.location.href = '/logout'; this.$window.onbeforeunload = null;});} anle {// การดำเนินการภายในทุกคนไม่ต้องกังวลเกี่ยวกับ ... }}}ข้างต้นเป็นเนื้อหาทั้งหมดของ JS ที่ตัวแก้ไขแนะนำให้คุณแยกแยะว่าหน้าเบราว์เซอร์จะรีเฟรชหรือปิด ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!