บทช่วยสอนเว็บแอปแบบก้าวหน้า: สร้าง PWA แรกของคุณ

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

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

เพื่อจุดประสงค์ในการเรียนรู้ที่ดีที่สุดของคุณ วันนี้เราจะสร้าง PWA ที่ทำงานได้อย่างสมบูรณ์โดยใช้ React, Node.js และ Firebase

ข้อกำหนดเบื้องต้น

• เวอร์ชัน Node.js >= 8.10
• เวอร์ชัน npm >= 5.6

หมายเหตุ : เวอร์ชัน npm ไม่ควรเป็นปัญหาจริง ๆ เนื่องจากการติดตั้ง Node.js ของคุณมาพร้อมกับเวอร์ชันล่าสุดของตัวจัดการแพ็คเกจ npm

1. สร้าง SPA ด้วย create-react-app

อันดับแรก เราต้องการบางสิ่งที่แข็งแกร่งเพื่อใช้งาน และ create-react-app เป็นเครื่องมือที่สมบูรณ์แบบสำหรับจุดประสงค์นี้

 npx create-react-app my-PWA
cd my-pwa
npm เริ่ม

คำสั่งข้างต้นจะช่วยสร้างสภาพแวดล้อมการเรียนรู้แบบ React-based เพื่อให้คุณทำงานด้วย

ให้บริการผ่าน HTTPS

HTTPS เป็นมาตรฐานใหม่สำหรับเว็บ และการมาถึงของ PWA ก็กลายเป็นกระแสหลักมากขึ้นเท่านั้น โดยปกติ PWA จะต้อง ให้บริการผ่าน HTTPS เนื่องจากพนักงานบริการไม่สามารถทำงานได้หากไม่มี แต่เนื่องจากเราทำงานในสภาพแวดล้อม localhost จึงไม่จำเป็น

2. ทำให้มันทำงานแบบออฟไลน์

โดยค่าเริ่มต้น พนักงานบริการจาก create-react-app ควรได้รับการกำหนดค่าล่วงหน้าเพื่อจัดการแคชออฟไลน์และการโหลดเนื้อหาเมื่อผู้ใช้ไม่มีการเชื่อมต่อหรือในการเข้าชมครั้งต่อๆ ไป

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

ในการติดตั้งพนักงานบริการบน PWA คุณจะต้องดูที่ /src/index.js

ใน index.js ให้มองหาบรรทัดนี้

 serviceWorker.unregister()

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

ในการรัน my-pwa ของคุณในโหมดใช้งานจริง:

 npm รัน build
npx ให้บริการ build 

หลังจากนี้ ให้เปิด Chrome และไปที่ localhost:5000 ตรวจสอบแล้วคุณจะเห็นพนักงานบริการทำงานอย่างถูกต้องในแท็บ แอปพลิเคชัน

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

หมายเหตุ : มีวิธีแก้ปัญหาในการลงทะเบียนพนักงานบริการของคุณในโหมดที่ไม่ใช่การผลิต ซึ่งทำได้โดยการลบบรรทัด process.env.NODE_ENV === 'production' ออกจาก src/serviceWorker.js

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

3. ตั้งค่าเพิ่มไปที่หน้าจอหลัก

หากทุกอย่างลงตัวแล้ว คุณควรเห็นไอคอนการติดตั้ง (+) เล็กน้อยเมื่อเปิด my-pwa

เนื่องจากทุกอย่างดำเนินการให้คุณโดยอัตโนมัติ คุณจึงอาจสงสัยว่าทั้งหมดนี้เกิดขึ้นได้อย่างไร ไม่ต้องกังวล นั่นคือเหตุผลที่เราอยู่ที่นี่

เพื่อให้ PWA A2HS (เพิ่มในหน้าจอหลัก) พร้อม เราต้องมี manifest.json manifest.json ที่มาพร้อมกับ create-react-app ของคุณเป็นไฟล์ JSON พื้นฐานที่กำหนดวิธีที่ไอคอนของแอปของคุณปรากฏต่อผู้ใช้และกำหนดลักษณะที่ปรากฏของหน้าจอเริ่มต้น หากต้องการปรับแต่งสิ่งเหล่านี้ ให้เปลี่ยนไฟล์ที่มีอยู่ที่ /public/manifest.json

 {
  "short_name": "กปภ. แรกของฉัน",
  "name": "สร้าง กปภ. อย่างง่าย",
  "ไอคอน": [
    {
      "src": "favicon.ico",
      "ขนาด": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "ขนาด": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "ขนาด": "512x512"
    }
  ],
  "start_url": ".",
  "display": "แบบสแตนด์อโลน",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

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

หมายเหตุ : เพื่อให้ manifest.json ทำงานได้ คุณจะต้องรวมไว้ใน index.html โดยค่าเริ่มต้น create-react-app ควรทำสิ่งนี้ให้คุณแล้ว

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

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

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

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

4. ตั้งค่าการแจ้งเตือนแบบพุช

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

และตอนนี้ คุณต้องสงสัยว่าส่วนไหนที่ใช้ Firebase ในบทช่วยสอนนี้ นี้มัน. ในส่วนนี้ คุณจะได้เรียนรู้เกี่ยวกับกระบวนการรวม Push Notifications เข้ากับ PWA โดยใช้ Firebase โดยเฉพาะฟีเจอร์ Cloud Messaging ซึ่งช่วยให้สามารถส่งข้อความโดยใช้คำขอ HTTPS

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

บทสรุป

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

อ่านเพิ่มเติม:
วิธีผสานรวม PWA ใน Magento 2