การเผยแพร่ PWAs ไปยัง App Store รายใหญ่: The Whys and Hows

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

เพื่อให้มุมมองที่ชัดเจนยิ่งขึ้นเกี่ยวกับการเคลื่อนไหวของ Progressive Web App ทั้งหมด โดยเฉพาะกระบวนการเผยแพร่ วันนี้เราจะมาทบทวนสถานะปัจจุบันของ PWAs ในตลาดแอปหลัก ๆ ตลอดจนวิธีเผยแพร่ PWA ไปยังร้านค้าดังกล่าว

เหตุใดคุณจึงควรเผยแพร่ Progressive Web App ไปยังร้านแอปหลัก ๆ

เมื่อก่อนนั้น Progressive Web Apps ถูกจำกัดให้ติดตั้งบนเว็บเท่านั้น (เพิ่มในหน้าจอหลัก) เท่านั้น อย่างไรก็ตาม เมื่อเวลาผ่านไป ตลาดแอป เช่น Google และ Microsoft เริ่มตระหนักถึงศักยภาพของ PWA และได้ริเริ่มที่จะผลักดันการนำเทคโนโลยีนี้ไปใช้ในอนาคต

หากคุณมีความสามารถและเงินทุน ความคิดเห็นอย่างมืออาชีพของเราคือคุณควรลงมือทำ—สร้าง PWA omni-platform ของคุณ ท้ายที่สุดแล้ว แบรนด์ใหญ่ๆ อย่าง Twitter, Uber และ Spotify ต่างก็ก้าวกระโดดในวงกว้างและได้พบกับผลลัพธ์ที่ยอดเยี่ยม การพิสูจน์ว่าเทคโนโลยีนี้ไม่ใช่การตลาดทั้งหมดและคุ้มค่าที่จะพิจารณา Microsoft เองก็ก้าวไปอีกขั้นด้วยการวางแผนที่จะทำให้ Progressive Web Apps เป็นประสบการณ์หลักใน Windows

 การอ่านที่แนะนำ : 12 ตัวอย่างที่ดีที่สุดของ Progressive Web Apps

วิธีเผยแพร่ PWA ของคุณไปยังร้านแอพหลัก

Google Play Store

ในฐานะผู้บุกเบิกขบวนการ กปปส. จึงไม่น่าแปลกใจที่ Google Play Store จับมือเปิดกว้างสำหรับ Progressive Web Apps ด้วย TWA (Trusted Web Activities) ลำดับการเผยแพร่ทั้งหมดจึงง่ายขึ้นมากและควรจะจบลงในเวลาไม่นาน

ความต้องการ

• ติดตั้ง Android Studio แล้ว
• บัญชีนักพัฒนาซอฟต์แวร์ Google
• Progressive Web Apps ที่ใช้งานได้และผ่านการตรวจสอบคุณภาพ

ขั้นตอนที่ 1 : สร้างโคลนของแอพ TWA Starter Android และแก้ไข

• โคลน svgomg-twa ด้วยคำสั่งต่อไปนี้:

 โคลน git https://github.com/GoogleChromeLabs/svgomg-twa.git

• นำเข้าโปรเจ็กต์ไปยัง Android Studio โดยใช้ File > New > Import Project

ใน /app/build.gradle ให้แก้ไข twaManifest ตามวัตถุประสงค์ของคุณ ข้อมูลเฉพาะเกี่ยวกับสิ่งที่จะเปลี่ยนและวิธีแก้ไขมีอยู่ในไฟล์ build.gradle

หมายเหตุ: applicationId ควรอยู่ในรูปแบบ <com>.<your-brand>.<your-app>

หลังจากแก้ไข /app/build.gradle ของคุณควรมีลักษณะดังนี้:

 def twaManifest = [
    applicationId: 'com.simicart.app',
    ชื่อโฮสต์: 'simicart.com', // โดเมนที่เปิดอยู่ใน TWA
    launchUrl: '/', // เส้นทางเริ่มต้นสำหรับ TWA ต้องสัมพันธ์กับโดเมน
    ชื่อ: 'SimiCart PWA', // ชื่อที่แสดงบนตัวเรียกใช้ Android
    themeColor: '#ED8A19', // สีที่ใช้สำหรับแถบสถานะ
    navigationColor: '#303F9F', // สีที่ใช้สำหรับแถบนำทาง
    backgroundColor: '#bababa', // สีที่ใช้สำหรับพื้นหลังหน้าจอสแปลช
    enableNotifications: false, // ตั้งค่าเป็น true เพื่อเปิดใช้งานการมอบหมายการแจ้งเตือน
    // เพิ่มทางลัดสำหรับแอปของคุณที่นี่ ทุกช็อตคัทต้องมีฟิลด์ต่อไปนี้:
    // - ชื่อ: สตริงที่จะแสดงในทางลัด
    // - short_name: ใช้สตริงที่สั้นกว่าถ้า |name| ยาวเกินไป.
    // - url: เส้นทางสัมบูรณ์ของ URL เพื่อเปิดแอปด้วย (เช่น '/ สร้าง')
    // - ไอคอน: ชื่อของทรัพยากรในโฟลเดอร์ drawable เพื่อใช้เป็นไอคอน
    ทางลัด: [
        ชื่อ: 'เปิด SimiCart' 
        short_name: 'เปิด' 
        url: '/ เปิด', 
        ไอคอน: 'สาด'
    ]
,
    // ระยะเวลาของแอนิเมชั่นเฟดเอาต์เป็นมิลลิวินาทีที่จะเล่นเมื่อลบ splash screen
    splashScreenFadeOutDuration: 300
]

ขั้นตอนที่ 2 : สร้างที่เก็บคีย์และยืนยัน APK

ที่เก็บคีย์หรือคีย์การอัปโหลดจำเป็นสำหรับการตรวจสอบ APK ของคุณ ในการสร้างที่เก็บคีย์ ให้เปิด Android Studio และไปที่ Build → Generate Signed Bundle/APK และกรอกข้อมูลในฟิลด์ที่จำเป็น

เมื่อคุณสร้าง Key Store แล้ว คุณจะต้องแยกลายนิ้วมือ SHA256 โดยใช้คำสั่งต่อไปนี้:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 ประเภทรายการ: PrivateKeyEntry
...
ลายนิ้วมือใบรับรอง:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? คัดลอกบรรทัดนี้

ขั้นตอนที่ 3 : กำหนดค่า Digital Asset Link

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

สร้างไฟล์คำสั่ง

ใช้ลายนิ้วมือ SHA256 ที่คุณดึงออกมาก่อนหน้านี้ และสร้างไฟล์ใบแจ้งยอดด้วยเครื่องมือสร้างและทดสอบรายการงบ

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

 .well-known/assetlinks.json

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

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

ขั้นตอนที่ 4 : สร้างและเผยแพร่แอปของคุณบน Google Play

ด้วยการตั้งค่าเริ่มต้นของ Google Play Console ให้ไปที่ แอปพลิเคชันทั้งหมด → สร้างแอปพลิเคชัน

สร้างการทดสอบภายใน

ไปที่ รุ่นของแอป → แทร็กทดสอบภายใน → สร้างรุ่น เพื่อสร้างแทร็กการทดสอบภายในของแอป

สร้าง APK ที่ลงนามแล้ว

ใน Android Studio ให้ไปที่ Build → Generate Signed Bundle/APK และใช้ที่เก็บคีย์ SHA256 ที่เราแยกออกมาก่อนหน้านี้ ตรวจสอบให้แน่ใจว่าคุณได้เลือกช่องรุ่นลายเซ็นทั้งสองช่อง

อัปโหลด APK

ตอนนี้คุณอยู่ที่จุดสิ้นสุดของกระบวนการนี้ ในการอัปโหลด apk ของคุณ เพียงไปที่ Google Play Store, App Releases → Internal Test Track → Edit Release

อย่าลืมกรอก Store Listing

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

และนั่นแหล่ะ PWA ของคุณพร้อมสำหรับการตรวจสอบแล้วและจะพร้อมสำหรับการดาวน์โหลดแบบสาธารณะในอีกไม่กี่ชั่วโมง

Apple App Store

ในบรรดาตลาดแอพหลักทั้งหมด Apple App Store อาจเป็นร้านที่ต้อนรับ PWA น้อยที่สุดหรือแม้แต่เป็นศัตรูกับ PWA ซึ่งเป็นเรื่องที่น่าขันเมื่อพิจารณาว่า Steve Jobs เป็นคนแรกที่มองเห็นอนาคตที่เต็มไปด้วย Progressive Web Apps

เอ็นจิ้น Safari แบบเต็มอยู่ใน iPhone ดังนั้น คุณจึงสามารถเขียนแอป Web 2.0 และ Ajax ที่น่าทึ่ง ซึ่งมีลักษณะและทำงานเหมือนกับแอปบน iPhone และแอพเหล่านี้สามารถรวมเข้ากับบริการของ iPhone ได้อย่างสมบูรณ์แบบ พวกเขาสามารถโทรออก ส่งอีเมล ค้นหาตำแหน่งบน Google Maps ได้

สตีฟ จ็อบส์ ปี 2550

ใน iOS PWAs มี ข้อ จำกัด อย่างมาก ในแง่ของคุณสมบัติ ไม่มีการสนับสนุนสำหรับการแจ้งเตือนแบบพุช รายการเว็บแอปได้รับการสนับสนุนเพียงบางส่วนเท่านั้น และคุณลักษณะใหม่ เช่น แกลเลอรีแอปใหม่ มักจะเพิกเฉยต่อ PWA โดยสิ้นเชิง และด้วยเหตุนี้ จึงสมเหตุสมผลเท่านั้นที่ PWA ไม่ได้รับการต้อนรับใน Apple App Store ตามแนวทางการตรวจสอบ App Store ของ Apple:

แอปของคุณควรมีคุณลักษณะ เนื้อหา และ UI ที่ยกระดับ นอกเหนือจากเว็บไซต์ที่จัดแพ็ก เกจใหม่ หากแอปของคุณไม่ได้มีประโยชน์เป็นพิเศษ ไม่ซ้ำใคร หรือ "เหมือนแอป" แอปนั้นก็ไม่อยู่ใน App Store

ฟังก์ชันขั้นต่ำ หลักเกณฑ์การตรวจสอบ App Store

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

 อ่านเพิ่มเติม: PWAs บน iOS 14 Beta: การเปลี่ยนแปลงที่ละเอียดอ่อน

Microsoft Store

ตามที่ระบุไว้ในบทความ Windows 10 และ PWA: อนาคตของการจัดส่งซอฟต์แวร์ Microsoft ได้วางรากฐานสำหรับ Progressive Web App Store มาระยะหนึ่งแล้ว และค่อยๆ กลายเป็นความจริง กปภ. จากแบรนด์ที่ได้รับความนิยมมากขึ้นมีอยู่แล้วในตลาดแอปฯ และไม่มีผลลัพธ์ที่เป็นแบบอย่างให้ผู้อื่นติดตาม

เช่นเดียวกับ Google Microsoft ยินดีต้อนรับ PWA และยิ่งไปกว่านั้น พวกเขายังวางแผนที่จะเผยแพร่และแทนที่แอป UWP ดั้งเดิมด้วยแอปไฮบริด ซึ่งเป็น Progressive Web Apps ประเภทหนึ่งที่รวมอยู่ใน Native Shell

ตามทฤษฎีแล้ว การเผยแพร่ Progressive Web App ของคุณ ไปยัง Microsoft Store ไม่ควรใช้ความพยายามใดๆ เลย เนื่องจากเดิมมีการวางแผนให้เป็นกระบวนการอัตโนมัติที่ใช้ Bing เป็นกลไกการรวบรวมข้อมูลสำหรับ PWA ที่มีคุณภาพ อย่างไรก็ตาม สิ่งทั้งหมดยังอยู่ในขั้นตอนการทดลองและใช้งานไม่ได้อย่างมีประสิทธิภาพตามที่วางแผนไว้ นั่นคือเหตุผลที่คุณจะต้องส่ง PWA ของคุณด้วยตนเอง เป็นแพ็คเกจแอป Windows (.appx) แต่อย่ากังวล กระบวนการนี้ไม่ได้สร้างความกังวลใจเหมือนกับร้านแอป บาง แห่ง

ความต้องการ

• บัญชี Windows Dev Center
• PWABuilder
• Progressive Web App ที่ใช้งานได้และผ่านการตรวจสอบคุณภาพซึ่งเป็นไปตามนโยบายของร้านค้า

ขั้นตอนที่ 1 : จองชื่อแอปของคุณ

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

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

ขั้นตอนที่ 2: สร้าง AppX โดยใช้ PWABuilder

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

สร้างรายการ

บน PWABuilder ให้ป้อน URL ของ PWA ของคุณแล้วคลิก เริ่มต้น ใช้งาน โปรดทราบว่าขั้นตอนนี้มีความสำคัญอย่างยิ่ง เนื่องจากจะระบุและ/หรือกรอกข้อมูลที่ขาดหายไปใน manifest.json ของคุณโดยอัตโนมัติ ซึ่งมักจำเป็นสำหรับ PWA ที่ไม่ได้สร้างขึ้นสำหรับ Microsoft Store โดยเฉพาะ

 การอ่านที่แนะนำ: PWA Manifest: การสร้าง Web App Manifest ด้วยวิธีง่ายๆ

ขั้นตอนต่อไปคือการสร้างพนักงานบริการสำหรับ PWA ของคุณ แต่สมมติว่าคุณเป็น Progressive Web App ทั่วไปที่มีการผสานรวมพนักงานบริการแล้ว ขั้นตอนนี้จะถูกข้ามไป และเราจะไปยังขั้นตอนสุดท้าย—รับแพ็คเกจ .appx ของคุณ

สร้าง AppX

เมื่อคลิกสร้าง AppX คุณจะเห็นป๊อปอัปนี้:

นี่คือจุดที่ข้อมูลก่อนหน้านี้มีประโยชน์ กรอกข้อมูลในช่องและกล่องดาวน์โหลดที่มีแพ็คเกจ .appx จะปรากฏขึ้น ดาวน์โหลด แล้วคุณจะพร้อมสำหรับการเผยแพร่ PWA ของคุณไปยัง Microsoft Store

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

ขั้นตอนที่ 3: ส่งแพ็คเกจแอปของคุณไปที่ Microsoft Store

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

เมื่อคุณพบ windows.appx แล้ว ให้ไปที่หน้าการส่งใน Dev Center ของคุณและกรอกข้อมูลที่จำเป็น:

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

บทสรุป

หลังจากทั้งหมดนี้ บางทีคุณอาจยังคงสงสัยว่าทำไมคุณถึงควรสร้าง Progressive Web App ขึ้นมา—ไม่ต้องผ่านปัญหาทั้งหมดนี้เพื่อเผยแพร่ และคุณมีสิทธิ์ที่จะถามคำถามพื้นฐานดังกล่าว

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

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