เปลี่ยนเว็บไซต์ของคุณให้เป็นแอป Android แบบเนทีฟด้วย Bubblewrap – คำแนะนำทีละขั้นตอน

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

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

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

หากคุณปฏิบัติตามบทช่วยสอนนี้ มีข้อกำหนดเบื้องต้นบางประการ:

• ความรู้พื้นฐานเกี่ยวกับการพัฒนาเว็บ

• ไซต์ของคุณควรเผยแพร่สู่สาธารณะ และคุณจะต้องมีสิทธิ์เข้าถึงซอร์สโค้ดของไซต์

• เราจะใช้ npm เพื่อติดตั้งเครื่องมือที่จำเป็น ดังนั้นโปรดตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js แล้ว

หมายเหตุ: บทช่วยสอนนี้มีพื้นฐานมาจาก Vite โครงการ แต่ขั้นตอนสุดท้ายของ Bubblewrap จะเหมือนกันสำหรับกรอบงานเว็บใดๆ

สารบัญ

1. กปภ. คืออะไร?

2. Bubblewrap คืออะไร

   • TWA (กิจกรรมเว็บที่เชื่อถือได้) คืออะไร

   • TWA ตรวจสอบความน่าเชื่อถืออย่างไร

3. ขั้นตอนที่ 1 – กำหนดค่า PWA ของคุณใน Vite

   • สร้างไอคอนแอปของคุณ

   • ติดตั้งปลั๊กอิน Vite PWA

   • กำหนดค่าปลั๊กอิน

4. ขั้นตอนที่ 2 – สร้างแอป Android

   • สร้างโฟลเดอร์บิลด์

   • ติดตั้ง Bubblewrap CLI

   • เริ่มต้นโครงการ

   • มาแก้ไขปัญหาคำสั่ง init กันดีกว่า

5. ขั้นตอนที่ 3 – ตอบคำถาม Bubblewrap

6. ขั้นตอนที่ 4 – สร้างแอป

7. ขั้นตอนที่ 5 – การตั้งค่าการตรวจสอบ TWA

   • โฟลเดอร์ .well-known คืออะไร

   • delegate_permission/common.handle_all_urls คืออะไร

8. ขั้นตอนที่ 6 (ไม่บังคับ) – ปรับแต่งประสบการณ์ในแอป

9. สรุป

กปภ. คืออะไร?

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

แต่ไม่ใช่แค่รูปลักษณ์และความรู้สึกเท่านั้น PWA ยังมีฟีเจอร์ที่คล้ายกับแอป เช่น การทำงานออฟไลน์ การส่งการแจ้งเตือนแบบพุช และอื่นๆ อีกมากมาย

การประปาส่วนภูมิภาคมีสององค์ประกอบหลัก

• ไฟล์ Manifest อธิบายแอปของคุณ เช่น ชื่อ ไอคอน URL เริ่มต้น และอื่นๆ

• โปรแกรมทำงานของบริการคือไฟล์ JavaScript พื้นหลังที่ทำหน้าที่เป็นพร็อกซี แคชและการแจ้งเตือนแบบพุชได้รับการจัดการโดยไฟล์บริการ ซึ่งทำงานเป็นเธรดอื่นนอกเหนือจากเธรดหลัก

หากไม่มีองค์ประกอบทั้งสองนี้ เบราว์เซอร์จะไม่อนุญาตให้ผู้ใช้ดาวน์โหลดแอปในเครื่อง

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

Bubblewrap คืออะไร

Bubblewrap เป็นเครื่องมือบรรทัดคำสั่งที่สร้างโดย Google ซึ่งใช้ PWA ของคุณและเปลี่ยนให้เป็นแอป Android โดยใช้กิจกรรมเว็บที่เชื่อถือได้ (TWA)

Bubblewrap ช่วยให้กระบวนการสร้าง TWA ง่ายขึ้น โดยเปลี่ยนไฟล์ Manifest ของ PWA ให้เป็นแพ็กเกจแอป Android (APK หรือ AAB)

TWA (กิจกรรมเว็บที่เชื่อถือได้) คืออะไร

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

หากต้องการปลดล็อกฟีเจอร์เต็มหน้าจอ แอปของคุณจะต้อง "เชื่อถือได้"

นี่คือที่มาของ "การจับมือกันอย่างลับๆ" Android ต้องแน่ใจว่าผู้สร้างแอปและเจ้าของเว็บไซต์เป็นคนคนเดียวกัน หากไม่มีหลักฐานการเป็นเจ้าของ TWA จะทำงานในโหมดสำรองและแสดงแถบที่อยู่ของเบราว์เซอร์ที่ด้านบน ทำลายความรู้สึกของแอปดั้งเดิม

TWA ตรวจสอบความน่าเชื่อถืออย่างไร

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

คุณสามารถตรวจสอบความสัมพันธ์นี้ได้ด้วยตนเองโดยใช้เครื่องมือทดสอบอย่างเป็นทางการของ Google:Digital Asset Links Verifier

เมื่อคุณเข้าใจโปรเจ็กต์และเครื่องมือแล้ว มาเริ่มสร้างกันเลย

ขั้นตอนที่ 1 – กำหนดค่า PWA ของคุณใน Vite

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

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

สร้างไอคอนแอปของคุณ

ก่อนที่เราจะแตะโค้ดใดๆ เราจำเป็นต้องมีไอคอนสำหรับแอปของเรา Android ต้องใช้ขนาดเฉพาะสำหรับไอคอน Launcher ของแอป (สิ่งที่คุณเห็นบนหน้าจอหลัก) และหน้าจอเริ่มต้น (สิ่งที่คุณเห็นเมื่อแอปเริ่มทำงาน)

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

จากนั้นเพียงดาวน์โหลดไฟล์ที่สร้างขึ้นและวาง 25 และ 36 ไฟล์ลงใน 41 โฟลเดอร์ของโครงการของคุณ

npm install vite-plugin-pwa -D

export default defineConfig({
 plugins: [
 VitePWA({
 registerType: "autoUpdate", 
 manifest: {
 name: "your app name",
 short_name: "your app short name",
 description: "write any description",
 theme_color: "#0d1117",
 background_color: "#ffffff",
 display: "standalone",
 start_url: "/",
 icons: [
 {
 src: "/web-app-manifest-192x192.png",
 sizes: "192x192",
 type: "image/png",
 },
 {
 src: "/web-app-manifest-512x512.png",
 sizes: "512x512",
 type: "image/png",
 },
 ],
 },
 }),
 ]

project/
├── client/
├── server/
└── android/

npm install -g @bubblewrap/cli

bubblewrap init --manifest=https://your-website-domain/manifest.webmanifest

? Do you want Bubblewrap to install the JDK (recommended)?
 (Enter "No" to use your own JDK 17 installation) (Y/n)

? Do you want Bubblewrap to install the Android SDK (recommended)?
 (Enter "No" to use your own Android SDK installation) (Y/n)

Domain: Press Enter (auto-filled from your manifest)
Application name: Your full app name
Application ID: (e.g, chat.yourapp.twa)
Display mode: standalone
Orientation: portrait
Status bar color: Press Enter (accepts default)
Splash screen color: Press Enter (accepts default)
Icon URL: Press Enter (accepts default)
Include support for Play Billing?: Type Y if your app uses Google Play in-app purchases. Otherwise, N
Request geolocation permission?: Type Y if your app needs location access. Otherwise, N

First and Last names: Your full name
Organizational Unit: Developer or anything
Organization: Your organization name
Country (2-letter code): Your country code
Password for key store: Enter a new password
Password for key: Re-enter the same password

bubblewrap build --universalApk

frontend/
├── public/
 ├── .well-known/
 └── assetlinks.json

[
 {
 "relation": ["delegate_permission/common.handle_all_urls"],
 "target": {
 "namespace": "android_app",
 "package_name": "chat.yourapp.twa",
 "sha256_cert_fingerprints": [
 "your_sha256_fingerprint"
 ]
 }
 }
]

keytool -list -v -keystore android.keystore -alias android

const twaParam = queryParams.get("twa");
const [isTwa, setIsTwa] = useState<boolean>(() => {
 return localStorage.getItem("isTwa") === "true";
});
useEffect(() => {
 if (twaParam === "true") {
 localStorage.setItem("isTwa", "true"); // set the value to local storage
 setIsTwa(true);
 }
}, [twaParam]);

 {isTwa? (
 <Link to="/contact" className="underline hover:text-primary">
 Contact
 </Link> 
 ) : (
 <Link to="/download" className="underline hover:text-primary">
 Download App
 </Link>
 )}