ทั้งหมดเกี่ยวกับ Progressive Web Apps และการใช้งานใน Drupal 9

เผยแพร่แล้ว: 2020-10-20

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

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

คุณสมบัติของ Native Mobile Apps

เป็นแอพเฉพาะแพลตฟอร์ม นอกจากนี้ยังหมายความว่าจะต้องสร้างใหม่สำหรับทุกแพลตฟอร์มใหม่ (iOS, Android)
จำเป็นต้องดาวน์โหลด
มักจะเร็วมาก
เต็มไปด้วยคุณสมบัติและฟังก์ชันการทำงาน
สามารถผสมผสานเข้ากับอุปกรณ์ใด ๆ ได้อย่างลงตัวและรู้สึกเหมือนเป็นส่วนหนึ่งของมัน
สามารถทำงานออฟไลน์ได้
พวกเขาสามารถเข้าถึงข้อมูลอุปกรณ์ ฮาร์ดแวร์อุปกรณ์ และระบบไฟล์ในเครื่องได้อย่างง่ายดาย
มีราคาแพงกว่าในการพัฒนา บำรุงรักษา และอัปเกรด
ได้รับการอนุมัติล่วงหน้าเพื่อความปลอดภัยและสามารถดาวน์โหลดได้ที่ App Store
ยากสำหรับเครื่องมือค้นหาที่จะรวบรวมข้อมูล

คุณสมบัติของเว็บแอป

ไม่ได้ขึ้นอยู่กับแพลตฟอร์ม สิ่งที่คุณต้องมีคือเบราว์เซอร์เพื่อเข้าถึง รองรับเบราว์เซอร์ที่ทันสมัยที่สุด ไม่จำเป็นต้องดาวน์โหลด
ไม่มี SDK เฉพาะสำหรับการพัฒนา ส่วนหน้าได้รับการพัฒนาโดยใช้ HTML, CSS, JavaScript และ LAMP หรือ MEAN stack สำหรับแบ็กเอนด์
ไม่จำเป็นต้องอัพเกรด ต้นทุนการพัฒนาและบำรุงรักษาที่น้อยลง
แม้ว่าจะต้องมีการรับรองความถูกต้อง แต่ความปลอดภัยก็เป็นปัญหาเพราะอาจเสี่ยงต่อการเข้าถึงโดยไม่ได้รับอนุญาต
พวกเขาไม่ทำงานแบบออฟไลน์และอาจช้ากว่าแอพมือถือดั้งเดิม
พวกเขาไม่ได้ระบุไว้ใน App Store ดังนั้นการค้นหาอาจยากขึ้น

Progressive Web Apps คืออะไรและจะเติมช่องว่างได้อย่างไร

กล่าวโดยย่อ เว็บแอปแบบเนทีฟนั้นมีความสามารถสูง แต่ยังขาดในแง่ของการเข้าถึง ในขณะที่เว็บแอปเข้าถึงได้กว้างกว่าแต่ขาดความสามารถ และนั่นคือที่มาของ Progressive Web Apps เพื่อลดช่องว่าง

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

คุณสมบัติของ Progressive Web Apps

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

ก่อนที่จะพูดถึงโมดูล PWA ใน Drupal มาดูข้อกำหนดขั้นต่ำในการสร้าง PWA -

ควรรันบน HTTPS
ควรรวม Service Worker – Service Worker คือสคริปต์ (javascript) ที่ทำงานบน https บนเบราว์เซอร์และให้การเข้าถึงเบราว์เซอร์ มันมีคุณสมบัติเหมือนแอพดั้งเดิมเช่นการส่งเนื้อหาออฟไลน์การแจ้งเตือนแบบพุช ฯลฯ
ควรมี Web App Manifest ซึ่งเป็นไฟล์ JSON ที่มีข้อมูลเมตาพร้อมข้อมูลเกี่ยวกับเว็บแอป เช่น ชื่อ คำอธิบาย ผู้แต่ง และอื่นๆ นี้ยังมีประโยชน์สำหรับการเพิ่มประสิทธิภาพกลไกค้นหา

โมดูล PWA Drupal – วิธีสร้างโปรเกรสซีฟเว็บแอปด้วย Drupal 9 (และ 8)

โมดูล Drupal PWA ติดตั้งง่ายมาพร้อมกับ Service Worker (สำหรับการแคชและความสามารถอื่นๆ ที่คล้ายกับแอปออฟไลน์) และ Manifest.js ที่คุณกำหนดค่าได้ อย่างไรก็ตาม คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง SSL ก่อนเริ่มกระบวนการติดตั้ง PWA หากความต้องการของคุณมีความเฉพาะเจาะจงอย่างยิ่งกับการปรับแต่งจำนวนมาก คุณสามารถพัฒนา PWA ได้โดยใช้เฟรมเวิร์กส่วนหน้า เช่น Angular หรือ React และปรับแต่งพนักงานบริการของคุณเอง

การติดตั้งโมดูล PWA Drupal 9

ด้วย Drupal 7 การติดตั้งโมดูล Progressive Web App Drupal นั้นง่ายพอๆ กับการดาวน์โหลดและเปิดใช้งานโมดูล คุณสามารถสร้างไฟล์ manifest.js ผ่านแบบฟอร์มการกำหนดค่าและตรวจสอบได้ อย่างไรก็ตาม ใน Drupal 9 เราไม่สามารถรวมฟังก์ชันนี้โดยตรงโดยการเปิดใช้งานโมดูล PWA สาเหตุที่ไม่ได้ให้ตัวเลือกในการกำหนดค่าไฟล์ manfest.js

ติดตั้งโมดูลโดยดาวน์โหลดและเปิดใช้งานโมดูล PWA Drupal
สำหรับ Drupal 9 ใช้แพตช์นี้
เมื่อเสร็จแล้ว ไปที่การ กำหนดค่า -> PROGRESSIVE WEB APP -> การตั้งค่า PWA และเพิ่มข้อมูลที่จำเป็น

พนักงานบริการ

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

Manifest.json

ไฟล์ Drupal manifest.json คือสิ่งที่อนุญาตให้ผู้ใช้เพิ่ม PWA ไปที่หน้าจอหลัก ประกอบด้วยการกำหนดค่าที่คุณปรับเปลี่ยนได้เพื่อเปลี่ยนลักษณะการทำงานของ PWA เช่น ชื่อ ชื่อที่แสดง สีพื้นหลัง การวางแนว และอื่นๆ

ไฟล์จะถูกเพิ่มลงในแท็ก head ของหน้าดัชนีของคุณ
<link rel="manifest" href = "/manifest.json">

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