เมื่อผู้ใช้เพิ่ม Progressive Web App ลงในหน้าจอหลักบน Android แล้ว Chrome จะสร้าง APK ให้คุณโดยอัตโนมัติ ซึ่งบางครั้งเราเรียกว่า WebAPK การติดตั้งผ่าน APK จะทำให้แอปของคุณปรากฏใน App Launcher, ในการตั้งค่าแอปของ Android และลงทะเบียนชุดตัวกรอง Intent ได้
การติดตั้ง PWA ใน Android ไม่ได้เป็นเพียงการเพิ่ม Progressive Web App ลงในหน้าจอหลักของผู้ใช้ Chrome จะสร้างและติดตั้ง APK พิเศษของแอปโดยอัตโนมัติ บางครั้งเราเรียกสิ่งนี้ว่า WebAPK การติดตั้งผ่าน APK จะทำให้แอปของคุณปรากฏใน App Launcher, ในการตั้งค่าแอปของ Android และลงทะเบียนชุดตัวกรอง Intent ได้
Chrome จะดูไฟล์ Manifest ของเว็บแอปและข้อมูลเมตาอื่นๆ เพื่อสร้าง WebAPK เมื่อตรวจพบการอัปเดตไฟล์ Manifest แล้ว Chrome จะต้องสร้าง APK ใหม่
ตัวกรอง Intent ของ Android
เมื่อติดตั้ง Progressive Web App ใน Android ระบบจะลงทะเบียนชุดตัวกรอง Intent สำหรับ URL ทั้งหมดภายในขอบเขตของแอป เมื่อผู้ใช้คลิกลิงก์ที่อยู่ในขอบเขตของแอป แอปจะเปิดขึ้นแทนที่จะเปิดในแท็บเบราว์เซอร์
ลองพิจารณา manifest.json
บางส่วนต่อไปนี้
"start_url": "/",
"display": "standalone",
เมื่อเปิดเว็บแอปที่ใช้จากตัวเปิดแอป แอปจะเปิดขึ้นhttps://example.com/
เป็นแอปแบบสแตนด์อโลนโดยไม่มี Chrome ของเบราว์เซอร์
WebAPK จะมีตัวกรอง Intent ต่อไปนี้
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="https"
android:host="example.com"
android:pathPrefix="/" />
</intent-filter>
หากผู้ใช้คลิกลิงก์ภายในแอปที่ติดตั้งเพื่อไปที่https://example.com/read
อินเทนต์จะจับลิงก์นั้นและเปิดใน Progressive Web App
การใช้ scope
เพื่อจํากัดตัวกรอง Intent
หากไม่ต้องการให้ Progressive Web App จัดการ URL ทั้งหมดภายในเว็บไซต์ ให้เพิ่มพร็อพเพอร์ตี้ scope
ลงในไฟล์ Manifest ของเว็บแอป พร็อพเพอร์ตี้ scope
จะบอกให้ Android เปิดเว็บแอปของคุณก็ต่อเมื่อ URL ตรงกับ origin
+ scope
ซึ่งจะช่วยให้คุณควบคุมได้ว่าแอปจะจัดการ URL ใดและ URL ใดควรเปิดในเบราว์เซอร์
ซึ่งจะเป็นประโยชน์เมื่อคุณมีแอปและเนื้อหาอื่นๆ ที่ไม่ใช่แอปในโดเมนเดียวกัน
ลองพิจารณา manifest.json
บางส่วนต่อไปนี้
"scope": "/app/",
"start_url": "/app/",
"display": "standalone",
เมื่อเปิดจากตัวเปิดแอป แอปจะเปิดhttps://example.com/app/
เป็นแอปแบบสแตนด์อโลนโดยไม่มี Chrome ของเบราว์เซอร์
เช่นเดียวกับก่อนหน้านี้ WebAPK ที่สร้างขึ้นจะรวมตัวกรอง Intent แต่มีแอตทริบิวต์ android:pathPrefix
อื่นใน AndroidManifest.xml
ของ APK ดังนี้
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:scheme="https"
android:host="example.com"
android:pathPrefix="/app/" />
</intent-filter>
มาดูตัวอย่างกันสักเล็กน้อย
https://example.com/app/
- ภายใน /app/
https://example.com/app/read/book
- ภายใน /app/
https://example.com/help/
- ไม่อยู่ใน /app/
https://example.com/about/
- ไม่อยู่ใน /app/
ดูข้อมูลเพิ่มเติมเกี่ยวกับ scope
ได้ที่ scope
สิ่งที่จะเกิดขึ้นเมื่อคุณไม่ได้ตั้งค่า และวิธีใช้ scope
เพื่อกำหนดขอบเขตของแอป
การจัดการสิทธิ์
สิทธิ์จะทำงานในลักษณะเดียวกับเว็บแอปอื่นๆ และไม่สามารถขอสิทธิ์ได้เมื่อติดตั้ง แต่ต้องขอเมื่อรันไทม์ โดยควรขอเฉพาะเมื่อคุณจําเป็นต้องใช้เท่านั้น เช่น อย่าขอสิทธิ์กล้องเมื่อโหลดครั้งแรก แต่ให้รอจนกว่าผู้ใช้จะพยายามถ่ายรูป
การจัดการพื้นที่เก็บข้อมูลและสถานะแอป
แม้ว่า Progressive Web App จะติดตั้งผ่าน APK แต่ Chrome จะใช้โปรไฟล์ปัจจุบันในการเก็บข้อมูลทั้งหมดและจะไม่มีการแยกออก ซึ่งช่วยให้เบราว์เซอร์และแอปที่ติดตั้งไว้แชร์ประสบการณ์การใช้งานร่วมกันได้ คุกกี้จะแชร์และใช้งานได้ เข้าถึงพื้นที่เก็บข้อมูลฝั่งไคลเอ็นต์ได้ และติดตั้ง Service Worker ไว้พร้อมใช้งาน
การอัปเดต WebAPK
ข้อมูลเกี่ยวกับวิธีอัปเดต WebAPK ได้ย้ายไปที่หัวข้อวิธีที่ Chrome จัดการการอัปเดตไฟล์ Manifest ของเว็บแอป
คำถามที่พบบ่อย
- มีการใช้ไอคอนใดในการสร้างหน้าจอแนะนำ :
- เราขอแนะนำให้คุณใส่ไอคอนอย่างน้อย 2 ไอคอน ได้แก่ 192px และ 512px สำหรับหน้าจอแนะนำ เราทราบมาว่าไอคอนในหน้าจอแนะนำมีขนาดเล็กเกินไป WebAPK ที่สร้างขึ้นใน Chrome 71 ขึ้นไปจะแสดงไอคอนขนาดใหญ่ขึ้นในหน้าจอแนะนำ คุณไม่ต้องดำเนินการใดๆ ตราบใดที่มีไอคอนที่แนะนำ
- จะเกิดอะไรขึ้นหากผู้ใช้ติดตั้งแอปเนทีฟสําหรับเว็บไซต์ไว้แล้ว
- เช่นเดียวกับการเพิ่มลงในหน้าจอหลักในปัจจุบัน ผู้ใช้จะเพิ่มเว็บไซต์ได้โดยไม่ขึ้นอยู่กับแอปเนทีฟใดๆ หากคุณคาดว่าผู้ใช้อาจติดตั้งทั้ง 2 อย่าง เราขอแนะนำให้แยกไอคอนหรือชื่อของเว็บไซต์ออกจากแอปเนทีฟ
- ระบบจะล้างพื้นที่เก็บข้อมูลของเว็บไซต์ที่ติดตั้งไว้ไหมหากผู้ใช้ล้างแคชของ Chrome
- ได้
- ระบบจะติดตั้งแอปของฉันอีกครั้งไหมเมื่อฉันได้อุปกรณ์ใหม่
- ยังทำไม่ได้ในตอนนี้ แต่เราคิดว่านี่เป็นพื้นที่สำคัญและกำลังหาวิธีทำให้ใช้งานได้
- ระบบจัดการสิทธิ์อย่างไร จะเห็นข้อความแจ้งของ Chrome หรือของ Android ไหม
- คุณจะยังคงจัดการสิทธิ์ผ่าน Chrome ได้ ผู้ใช้จะเห็นข้อความแจ้งของ Chrome ให้มอบสิทธิ์และจะแก้ไขสิทธิ์เหล่านั้นได้ในการตั้งค่า Chrome
- ฟีเจอร์นี้ใช้ได้กับ Android เวอร์ชันใดบ้าง
- Progressive Web App ติดตั้งได้ใน Android ทุกเวอร์ชันที่ใช้ Chrome สำหรับ Android โดยเฉพาะ Jelly Bean ขึ้นไป
- มีการใช้ WebView หรือไม่
- ไม่ เว็บไซต์จะเปิดใน Chrome เวอร์ชันที่ผู้ใช้เพิ่มเว็บไซต์
- เราอัปโหลด APK ที่สร้างขึ้นไปยัง Play Store ได้ไหม
- ไม่ได้ หากต้องการอัปโหลด APK ของคุณเอง โปรดดูกิจกรรมบนเว็บที่เชื่อถือได้
- รายการเหล่านี้แสดงใน Play Store ไหม
- ไม่ได้ หากต้องการอัปโหลด APK ของคุณเองเพื่อแสดงใน Play Store โปรดดูกิจกรรมบนเว็บที่เชื่อถือได้
- ฉันเป็นนักพัฒนาเบราว์เซอร์อื่นบน Android ฉันสามารถดำเนินการติดตั้งที่ราบรื่นนี้ได้ไหม :
- เรากำลังดำเนินการอยู่ เรามุ่งมั่นที่จะทำให้ฟีเจอร์นี้พร้อมให้บริการแก่เบราว์เซอร์ทั้งหมดใน Android และจะมีรายละเอียดเพิ่มเติมในเร็วๆ นี้