Progressive Web Apps คืออะไรและฉันจะติดตั้งได้อย่างไร

Progressive Web Apps คืออะไรและฉันจะติดตั้งได้อย่างไร

แอพครองโทรศัพท์ของคุณ เป็นเวลานานที่แอพไม่ได้มีอิทธิพลต่อเดสก์ท็อปหรือเบราว์เซอร์ของคุณในลักษณะเดียวกัน ที่มีการเปลี่ยนแปลงในปีที่ผ่านมา Progressive Web Apps (PWAs) กำลังเติบโตขึ้นและเปลี่ยนแปลงการโต้ตอบของเรากับเว็บไซต์ทุกประเภท





แต่ Progressive Web App คืออะไรกันแน่? กปภ. ทำอะไรที่เว็บไซต์ไม่ทำ? นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับ Progressive Web Apps



Progressive Web App คืออะไร?

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





อะไรกำหนด กปภ.

  • สากล : PWA ต้องทำงานได้อย่างราบรื่น (เกือบ) สำหรับผู้ใช้ทุกคนโดยไม่คำนึงถึงเบราว์เซอร์
  • ตอบสนอง : PWA ควรใช้งานได้กับอุปกรณ์ทุกชนิด เช่น แล็ปท็อป แท็บเล็ต สมาร์ทโฟน และอื่นๆ
  • ออกแบบ : การออกแบบควรเลียนแบบแอพมือถือดั้งเดิม ซึ่งหมายถึงเมนูที่คล่องตัวและหาง่าย พร้อมการโต้ตอบที่เรียบง่ายสำหรับคุณสมบัติขั้นสูง
  • ปลอดภัย : กปภ. ควรใช้ HTTPS เพื่อรักษาความปลอดภัยข้อมูลผู้ใช้
  • ค้นพบได้: ผู้ใช้สามารถค้นหา PWA และสามารถระบุได้อย่างง่ายดายว่าเป็นแอปพลิเคชัน (แทนที่จะเป็น 'ไซต์')
  • การว่าจ้าง: การประปาส่วนภูมิภาคต้องมีสิทธิ์เข้าถึงคุณลักษณะการมีส่วนร่วมแบบเนทีฟ เช่น การแจ้งเตือนแบบพุช
  • อัปเดต: กปภ. ยังคงเป็นปัจจุบัน โดยให้บริการเวอร์ชันล่าสุดของบริการหรือไซต์
  • การติดตั้ง: อนุญาตให้ผู้ใช้ 'ติดตั้ง' PWA ไปยังหน้าจอหลักได้อย่างง่ายดายโดยไม่ต้องใช้แอพสโตร์
  • การแบ่งปัน: PWAs ต้องการเพียง URL เดียวในการแบ่งปัน โดยไม่ต้องติดตั้งใดๆ

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



Progressive Web App ทำงานอย่างไร

กุญแจสู่ Progressive Web Apps คือพนักงานบริการเบราว์เซอร์

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



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

ก่อนเจ้าหน้าที่บริการ สคริปต์แคชของเบราว์เซอร์ที่ใช้ได้คือ Application Cache (หรือ App Cache) คุณลักษณะแคชของแอปในบริการออฟไลน์แรกๆ ที่หลากหลาย แต่ค่อนข้างจะเกิดข้อผิดพลาดได้ นอกจากนี้ App Cache ยังมีข้อจำกัดที่รู้จักกันดีหลายประการ เช่น A List Apart อธิบาย



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

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

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

รองรับเบราว์เซอร์เว็บโปรเกรสซีฟ

มีข้อกำหนดสองประการสำหรับการใช้ Progressive Web App: เบราว์เซอร์ที่เข้ากันได้และบริการที่เปิดใช้งาน PWA

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

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

ตาราง Can I Use Service Workers ยืนยันว่าเบราว์เซอร์หลักทั้งหมดรองรับ PWA นอกจากนี้ยังแสดงให้เห็นว่า PWA รองรับเบราว์เซอร์เดสก์ท็อปทางเลือกและเบราว์เซอร์มือถือหลายตัว

ทำลายมันลงอีกเล็กน้อย:

  • เบราว์เซอร์เดสก์ท็อป (รองรับเต็มรูปแบบ): Chrome, Firefox, Opera, Edge, Safari
  • เบราว์เซอร์เดสก์ท็อป (รองรับบางส่วน/เวอร์ชันที่ล้าสมัย): เบราว์เซอร์ QQ, เบราว์เซอร์ Baidu
  • เบราว์เซอร์มือถือ (รองรับเต็มรูปแบบ): Chrome, Firefox, Safari, UC Browser, อินเทอร์เน็ต Samsung, Mint Browser, Wechat
  • เบราว์เซอร์มือถือ (รองรับบางส่วน/เวอร์ชันที่ล้าสมัย): เบราว์เซอร์ QQ, เบราว์เซอร์ Android, Opera Mobile

ดังนั้น เบราว์เซอร์หลักทั้งหมดจึงสนับสนุน PWAs Microsoft Edge และ Safari เป็นส่วนเพิ่มเติมล่าสุดในรายการการสนับสนุนทั้งหมด ในทางกลับกัน ทั้ง QQ Browser และ Baidu Browser ต่างก็ใช้เวอร์ชันที่ล้าสมัย และด้วยเหตุนี้จึงตกไปอยู่ในระดับที่สอง

วิธีค้นหาและติดตั้ง Progressive Web App

เมื่อคุณทราบแล้วว่าควรใช้เบราว์เซอร์ใด คุณก็สามารถคิดเกี่ยวกับการค้นหาและติดตั้ง PWA ได้ สำหรับตัวอย่างนี้ ฉันจะใช้ Samsung Galaxy S8 กับ Google Chrome

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

ดูวิดีโอด้านล่างเพื่อดูว่าจะเกิดอะไรขึ้นเมื่อคุณเยี่ยมชม เว็บไซต์มือถือทวิตเตอร์ .

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

ครั้งแรกลอง นอกเว็บ . มันแสดงรายการ PWA ที่ค่อนข้างเหมาะสม โดยมีตัวเลือกใหม่ๆ ปรากฏขึ้นบ่อยครั้ง ต่อไป ให้ลอง pwa.rocks มีตัวเลือกที่น้อยกว่า แต่มี PWA ที่มีประโยชน์ที่คุณต้องการเพิ่มลงในอุปกรณ์ของคุณ

นอกจากนี้ ในเดือนมกราคม 2019 Chrome 72 สำหรับ Android มาพร้อมกับ Trusted Web Activity (TWA) TWA อนุญาตให้แท็บ Chrome เปิดในโหมดสแตนด์อโลน ในทางกลับกัน สิ่งนี้ทำให้ PWA สามารถนำเสนอใน Google Play App Store PWAs สองสามรายการแรกที่ปรากฏใน Google Play คือ Twitter Lite , Instagram Lite และ Google Maps Go พร้อมชุดเพิ่มเติมที่จะปรากฏเมื่อเวลาผ่านไป

แกลเลอรี่ภาพ (2 รูปภาพ) ขยาย ขยาย ปิด I

เว็บแอปแบบโปรเกรสซีฟจะมาแทนที่แอปดั้งเดิมหรือไม่

Progressive Web Apps เป็นขั้นตอนไฮบริดที่ยอดเยี่ยมระหว่างเบราว์เซอร์และแอปมือถือที่มาพร้อมเครื่อง PWAs จะแทนที่แอพดั้งเดิมทั้งหมดหรือไม่ นั่นเป็นเรื่องยากสำหรับฉัน PWA นั้นยอดเยี่ยมในฐานะข้อเสนอที่ไม่หนักเครื่อง แต่เนื่องจากปัจจุบันพวกเขาเน้นที่การจำลองไซต์และบริการที่มีอยู่เป็นหลัก จึงไม่มาแทนที่แอปที่มาพร้อมเครื่อง

อย่างน้อยก็ไม่ใช่ในตอนนี้

วิธีอุทิศวิดีโอ ram เพิ่มเติม windows 10

PWAs ทำงานแม้ว่า ข้อมูลที่มีอยู่ในสถิติ กปภ. ก็สำรองข้อมูลไว้เช่นกัน ต่อไปนี้คือตัวเลขที่น่าสนใจบางส่วนที่แสดงให้เห็นว่า กปภ. กำลังเปลี่ยนแปลงการโต้ตอบของเรากับเว็บไซต์ที่ใช้กันทั่วไปอย่างไร:

  • Trivago พบว่าการมีส่วนร่วมเพิ่มขึ้น 150% สำหรับผู้ใช้ที่เพิ่ม PWA ลงในหน้าจอหลัก
  • หน้าแรกของ PWA ของ Forbes โหลดได้อย่างสมบูรณ์ในเวลาเพียง 0.8 วินาที ในขณะที่การแสดงผลต่อการเข้าชมเพิ่มขึ้น 10 เปอร์เซ็นต์ PWA ของ Forbes ยังเห็นความยาวของเซสชันผู้ใช้เพิ่มขึ้นเป็นสองเท่า
  • Twitter Lite มีหน้าเว็บเพิ่มขึ้น 65 เปอร์เซ็นต์ต่อเซสชัน โดยมีทวีตเพิ่มขึ้นอย่างมาก 75 เปอร์เซ็นต์ นอกจากนี้ยังเป็นแบบโต้ตอบ 'ในเวลาน้อยกว่า 5 วินาทีผ่าน 3G'
  • อาลีบาบาเห็น Conversion บนอุปกรณ์เคลื่อนที่เพิ่มขึ้น 76%

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

แบ่งปัน แบ่งปัน ทวีต อีเมล คู่มือสำหรับผู้เริ่มต้นในการพูดแบบเคลื่อนไหว

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

อ่านต่อไป หัวข้อที่เกี่ยวข้อง เกี่ยวกับผู้เขียน Gavin Phillips(เผยแพร่บทความ 945 ฉบับ)

Gavin เป็นบรรณาธิการรุ่นเยาว์สำหรับ Windows และเทคโนโลยีอธิบาย เป็นผู้มีส่วนร่วมประจำใน Podcast ที่มีประโยชน์จริงๆ และเป็นผู้ตรวจสอบผลิตภัณฑ์ประจำ เขามีศิลปศาสตรบัณฑิต (เกียรตินิยม) การเขียนร่วมสมัยพร้อมแนวทางปฏิบัติด้านศิลปะดิจิทัลที่ถูกปล้นจากเนินเขาของ Devon รวมถึงประสบการณ์การเขียนระดับมืออาชีพกว่าทศวรรษ เขาชอบดื่มชา บอร์ดเกม และฟุตบอลเป็นจำนวนมาก

เพิ่มเติมจาก Gavin Phillips

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก