วิธีการรวม Add to Home Screen เข้ากับ PWA . ของคุณ

เผยแพร่แล้ว: 2021-05-13

สารบัญ

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

 การอ่านที่แนะนำ: PWA กับ Native: แบบไหนเหมาะกับคุณมากกว่ากัน?

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

รองรับเบราว์เซอร์

A2HS ใกล้เคียงกับคุณลักษณะสากลระหว่างเบราว์เซอร์ ปัจจุบัน รองรับ Mobile Chrome/Android Webview (ตั้งแต่เวอร์ชัน 31 เป็นต้นไป), Opera สำหรับ Android (ตั้งแต่เวอร์ชัน 32 เป็นต้นไป) และ Firefox สำหรับ Android (ตั้งแต่เวอร์ชัน 58 เป็นต้นไป) สำหรับมุมมองที่ละเอียดยิ่งขึ้น โปรดดูที่เว็บไซต์ CanIUse

กปภ. เพิ่มหน้าจอหลักในการดำเนินการ

เมื่อเจอไซต์ที่เปิดใช้งาน PWA Add to Home screen (เปิดใช้งาน A2HS) แบนเนอร์ที่แจ้งว่าสามารถเพิ่มไซต์ลงในหน้าจอหลักของคุณได้ที่ด้านล่างของอินเทอร์เฟซผู้ใช้:

Harlow Bros - เพิ่ม PWA ไปที่หน้าจอหลัก
Harlow Bros – ผลงานที่น่าภาคภูมิใจของ SimiCart

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

วิธีทำให้เว็บแอปของคุณรองรับ A2HS บนมือถือ

เกณฑ์ที่สามารถติดตั้งได้

เพื่อให้สามารถติดตั้งเว็บแอปได้ จะต้อง:

  • ยังไม่ได้ติดตั้ง
  • ตรงตามฮิวริสติกการมีส่วนร่วมของผู้ใช้ (ผู้ใช้ต้องโต้ตอบกับเพจเป็นเวลาอย่างน้อย 30 วินาที)
  • ให้บริการจากการเชื่อมต่อที่ปลอดภัย (HTTPS)
  • มีการลงทะเบียนพนักงานบริการ
  • มีไฟล์ Manifest ที่กำหนดค่าไว้อย่างเหมาะสม
  • และที่สำคัญที่สุด เบราว์เซอร์ที่ใช้งานต้องรองรับเหตุการณ์ beforeinstallprompt สำหรับรายชื่อเบราว์เซอร์ทั้งหมดที่รองรับเหตุการณ์ beforeinstallprompt โปรดดูที่ CanIUse

เริ่มต้น

เพื่อจุดประสงค์ในการสาธิต ในบทความนี้ เราจะใช้โครงการ create-react-app เป็นฐานในการสร้าง PWA ที่ติดตั้งได้ create-react-app เป็นคำสั่ง React ง่ายๆ เพื่อสร้างแอปพลิเคชันหน้าเดียว

หมายเหตุ : create-react-app ต้องการอย่างน้อย node >= 10.16 and npm >= 5.6

เปิด พรอมต์คำสั่ง Node.js เรียกใช้คำสั่งต่อไปนี้: 

 npx create-react-app pwa-a2hs
cd pwa-a2hs
เส้นด้ายเริ่มต้น
สร้างการสาธิตแอปตอบโต้
เว็บแอปพื้นฐานของเราหลังจากรันคำสั่ง

สร้างไฟล์รายการ

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

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

การกำหนดค่าที่เหมาะสมที่สุดสำหรับตัวสร้างรายการเว็บแอป

เมื่อใช้ตัวสร้างรายการ คุณสามารถมีไฟล์ manifest.zip ที่มีเนื้อหาดังนี้:

รายการเว็บแอปที่สร้างขึ้น

และ manifest.webmanifest ของคุณควรมีลักษณะดังนี้: 

 {
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "display": "แบบสแตนด์อโลน",
    "ขอบเขต": "/",
    "start_url": ".",
    "ชื่อ": "กปภ-A2HS",
    "short_name": "กปภ.",
    "description": "สาธิต PWA สำหรับคุณสมบัติ A2HS",
    "ไอคอน": [
        {
            "src": "/icon-192x192.png",
            "ขนาด": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "ขนาด": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "ขนาด": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "ขนาด": "512x512",
            "type": "image/png"
        }
    ]
}

ตอนนี้คัดลอกเนื้อหาของไฟล์ manifest ที่คุณสร้างขึ้นไปยังโฟลเดอร์ /public/ ลบไฟล์ manifest.json เริ่มต้นในโฟลเดอร์นี้ และไปยังขั้นตอนถัดไป

เชื่อมโยง HTML กับรายการ

เมื่อคุณกำหนดค่าไฟล์ Manifest เสร็จแล้ว ให้บันทึกไว้ในไดเรกทอรีรากของเว็บไซต์เพื่อให้สามารถเรียกใช้ในภายหลังด้วยเส้นทางที่เกี่ยวข้อง เช่น /manifest.webmanifest ต้องการตั้งค่าไฟล์ Manifest ให้เสร็จสิ้น ให้อ้างอิงไฟล์ดังกล่าวในส่วนหัว HTML ของคุณ ( \pwa-a2hs\public\index.html ) เช่น: 

 <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <เมตา
      ชื่อ="คำอธิบาย"
      content="เว็บไซต์ที่สร้างโดยใช้ create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>กปภ A2HS</title>
  </head>

ตั้งค่าขั้นตอนการติดตั้ง

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

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

พนักงานบริการสกัดกั้นคำขอเครือข่ายของคุณและเปิดใช้งานคุณสมบัติต่างๆ ที่คล้ายกับแอพที่ PWA มีชื่อเสียง สร้างไฟล์ service-worker.js ใน pwa-a2hs\public และเติมด้วยเนื้อหาต่อไปนี้: 

 self.addEventListener ('ดึงข้อมูล', ฟังก์ชัน (เหตุการณ์) {
  event.respondWith(
      caches.match (event.request).then (ฟังก์ชัน (ตอบสนอง) {
          ตอบกลับ || ดึงข้อมูล (event.request);
      })
  );
});

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

ลงทะเบียนพนักงานบริการของคุณ

และเพื่อให้ service-worker.js ของเราทำงานได้ เราจะต้องลงทะเบียนโดยใส่รหัสนี้ที่ส่วนท้ายของ <body> ของ index.html : 

 //index.html
<script>
    ถ้า ('serviceWorker' ในตัวนำทาง) {
      // ลงทะเบียนพนักงานบริการที่โฮสต์อยู่ที่รูทของ
      // เว็บไซต์ที่ใช้ขอบเขตเริ่มต้น
      navigator.serviceWorker.register ('/service-worker.js').then (ฟังก์ชัน (การลงทะเบียน) {
        console.log('การลงทะเบียนพนักงานบริการสำเร็จ:' การลงทะเบียน);
      }, /*catch*/ ฟังก์ชั่น (ข้อผิดพลาด) {
        console.log('การลงทะเบียนพนักงานบริการล้มเหลว:' ข้อผิดพลาด);
      });
    } อื่น {
      console.log('ไม่รองรับพนักงานบริการ');
    }
  </script>

ได้เวลาทดสอบแล้ว!

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

ปุ่มติดตั้ง PWA บนแถบเบราว์เซอร์

การคลิกที่ ติดตั้ง จะส่งผลให้มีทางลัด PWA เช่นบนเดสก์ท็อป/หน้าจอหลักของคุณ:

ไอคอน PWA บนเดสก์ท็อป/หน้าจอหลัก

มีประสบการณ์ A2HS มากขึ้น

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

ปุ่มติดตั้งบนหน้าลงทะเบียน
แสดงปุ่ม ติดตั้ง ในหน้าลงทะเบียน

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