react native code push
9.0.0
คำเตือน
React CodePush ไม่รองรับสถาปัตยกรรมใหม่ ในการใช้ปลั๊กอินนี้บน React Native Version เริ่มต้นที่ 0.76 คุณจะต้องยกเลิกสถาปัตยกรรมใหม่
หมายเหตุ: readMe นี้เกี่ยวข้องกับปลั๊กอินเวอร์ชันล่าสุดของเราเท่านั้น หากคุณใช้เวอร์ชันเก่า ๆ โปรดเปลี่ยนไปใช้แท็กที่เกี่ยวข้องใน GitHub Repo ของเราเพื่อดูเอกสารสำหรับเวอร์ชันนั้น
ปลั๊กอินนี้ให้การรวมฝั่งไคลเอ็นต์สำหรับบริการ CodePush ช่วยให้คุณสามารถเพิ่มประสบการณ์การอัปเดตแบบไดนามิกลงในแอพ React Native ของคุณได้อย่างง่ายดาย
แอพ Native React ประกอบด้วยไฟล์ JavaScript และภาพประกอบใด ๆ ซึ่งรวมเข้าด้วยกันโดย Metro Bundler และแจกจ่ายเป็นส่วนหนึ่งของไบนารีเฉพาะแพลตฟอร์ม (เช่นไฟล์ .ipa หรือ .apk ) เมื่อแอปถูกปล่อยออกมาแล้วการอัปเดตรหัส JavaScript (เช่นการแก้ไขข้อผิดพลาดการเพิ่มคุณสมบัติใหม่) หรือสินทรัพย์ภาพคุณต้องคอมไพล์อีกครั้งและแจกจ่ายซ้ำไบนารีทั้งหมดซึ่งแน่นอนว่ามีเวลาตรวจสอบใด ๆ ที่เกี่ยวข้องกับร้านค้า คุณกำลังเผยแพร่ไป
ปลั๊กอิน codepush ช่วยให้การปรับปรุงผลิตภัณฑ์ต่อหน้าผู้ใช้ปลายทางของคุณทันทีโดยการรักษา JavaScript และรูปภาพของคุณซิงโครไนซ์กับการอัปเดตที่คุณปล่อยไปยังเซิร์ฟเวอร์ CodePush ด้วยวิธีนี้แอปของคุณจะได้รับประโยชน์จากประสบการณ์มือถือออฟไลน์รวมถึงความคล่องตัว "เหมือนเว็บ" ของการอัปเดตการโหลดด้านข้างทันทีที่มีอยู่ มันเป็น win-win!
เพื่อให้แน่ใจว่าผู้ใช้ปลายทางของคุณมีเวอร์ชันการทำงานของแอปของคุณเสมอปลั๊กอิน CodePush จะเก็บสำเนาของการอัปเดตก่อนหน้านี้เพื่อให้ในกรณีที่คุณกดอัปเดตโดยไม่ได้ตั้งใจซึ่งรวมถึงความผิดพลาด ด้วยวิธีนี้คุณสามารถมั่นใจได้ว่าความคล่องตัวในการเปิดตัวใหม่ของคุณจะไม่ส่งผลให้ผู้ใช้ถูกบล็อกก่อนที่คุณจะมีโอกาสย้อนกลับไปที่เซิร์ฟเวอร์ มันเป็น win-win-win!
หมายเหตุ: การเปลี่ยนแปลงผลิตภัณฑ์ใด ๆ ที่สัมผัสรหัสดั้งเดิม (เช่นการแก้ไขไฟล์ AppDelegate.m / MainActivity.java ของคุณการเพิ่มปลั๊กอินใหม่) ไม่สามารถแจกจ่ายผ่าน CodePush ดังนั้นจึงต้องได้รับการปรับปรุงผ่านร้านค้าที่เหมาะสม
เราพยายามอย่างดีที่สุดเพื่อรักษาความเข้ากันได้ย้อนหลังของปลั๊กอินของเรากับ React Native รุ่นก่อนหน้า แต่เนื่องจากลักษณะของแพลตฟอร์มและการมีอยู่ของการเปลี่ยนแปลงระหว่างการเผยแพร่จึงเป็นไปได้ที่คุณต้องใช้ codepush เวอร์ชันเฉพาะ ปลั๊กอินเพื่อรองรับ React Native เวอร์ชันที่แน่นอนที่คุณใช้ ตารางต่อไปนี้แสดงให้เห็นว่าปลั๊กอิน codepush เวอร์ชันที่สนับสนุนเวอร์ชันดั้งเดิมของ React ที่เกี่ยวข้องอย่างเป็นทางการ:
| ตอบสนองเวอร์ชันดั้งเดิม | สนับสนุนเวอร์ชัน codepush (s) |
|---|---|
| <0.14 | ไม่ได้รับการสนับสนุน |
| v0.14 | v1.3 (แนะนำ Android Support) |
| v0.15-v0.18 | v1.4-v1.6 (แนะนำการสนับสนุนสินทรัพย์ iOS) |
| v0.19-v0.28 | v1.7-v1.17 (แนะนำการสนับสนุนสินทรัพย์ Android) |
| v0.29-v0.30 | v1.13-v1.17 (รหัสโฮสติ้ง RN Refactored) |
| v0.31-v0.33 | v1.14.6-v1.17 (รหัสโฮสติ้ง RN Refactored) |
| v0.34-v0.35 | v1.15-v1.17 (รหัสโฮสติ้ง RN Refactored) |
| v0.36-v0.39 | v1.16-v1.17 (RN Refactored Resume Handler) |
| v0.40-v0.42 | v1.17 (ไฟล์ส่วนหัวของ RN refactored iOS) |
| v0.43-v0.44 | v2.0+ (RN refactored uimanager พึ่งพา) |
| v0.45 | v3.0+ (รหัสตัวจัดการอินสแตนซ์ RN RN) |
| v0.46 | v4.0+ (RN Refactored JS Bundle Loader Code) |
| v0.46-v0.53 | V5.1+ (RN ลบการลงทะเบียนโมดูล JS ที่ไม่ได้ใช้) |
| v0.54-v0.55 | V5.3+ (Android Gradle Plugin 3.x Integration) |
| v0.56-v0.58 | V5.4+ (RN รุ่นอัพเกรดสำหรับเครื่องมือ Android) |
| v0.59 | V5.6+ (RN Refactored JS Bundle Loader Code) |
| v0.60-v0.61 | v6.0+ (RN ย้ายไปอยู่ที่ Autolinking) |
| v0.62-v0.64 | v6.2+ (RN ลบ Livereload) |
| v0.65-v0.70 | v7.0+ (RN อัปเดต iPhone-target-version) |
| v0.71 | V8.0+ (RN ย้ายไปที่ React-Native-Gradle-Plugin) |
หมายเหตุ: react-native-code-push เวอร์ชันต่ำกว่า V5.7.0 จะหยุดทำงานในอนาคตอันใกล้ คุณสามารถค้นหาข้อมูลเพิ่มเติมในเอกสารของเรา
เราทำงานอย่างหนักเพื่อตอบสนองต่อการเปิดตัว RN ใหม่ แต่บางครั้งพวกเขาก็ทำลายเรา เราจะอัปเดตแผนภูมินี้ด้วยการเปิดตัว RN แต่ละรายการเพื่อให้ผู้ใช้สามารถตรวจสอบเพื่อดูว่าการสนับสนุนอย่างเป็นทางการของเราคืออะไร
เมื่อใช้ระบบ REACE Native Assets (เช่นการใช้ require("./foo.png") ) รายการต่อไปนี้แสดงชุดของส่วนประกอบหลัก (และอุปกรณ์ประกอบฉาก) ที่รองรับภาพอ้างอิงและวิดีโอที่อ้างอิงผ่าน CodePush:
| ส่วนประกอบ | เสา |
|---|---|
Image | source |
MapView.Marker(ต้องใช้ปฏิกิริยาตอบโต้-แมป >=O.3.2 ) | image |
ProgressViewIOS | progressImage , trackImage |
TabBarIOS.Item | icon selectedIcon |
ToolbarAndroid(React Native 0.21.0+) | actions[].icon logo overflowIcon |
Video | source |
รายการต่อไปนี้แสดงถึงชุดของส่วนประกอบ (และอุปกรณ์ประกอบฉาก) ที่ไม่สนับสนุนสินทรัพย์ของพวกเขาที่ได้รับการปรับปรุงผ่าน CodePush เนื่องจากการพึ่งพาภาพและวิดีโอแบบคงที่ (เช่นการใช้ไวยากรณ์ { uri: "foo" } ):
| ส่วนประกอบ | เสา |
|---|---|
SliderIOS | maximumTrackImage , minimumTrackImage , thumbImage , trackImage |
Video | source |
เมื่อส่วนประกอบหลักใหม่ได้รับการปล่อยตัวซึ่งรองรับสินทรัพย์อ้างอิงเราจะอัปเดตรายการนี้เพื่อให้แน่ใจว่าผู้ใช้รู้ว่าพวกเขาคาดหวังว่าจะอัปเดตโดยใช้ CodePush ได้อย่างไร
หมายเหตุ: CodePush ใช้งานได้กับส่วนประกอบวิดีโอเมื่อ require ในเสาต้นทางเท่านั้น ตัวอย่างเช่น:
< Video source = { require ( "./foo.mp4" ) } / > เมื่อคุณทำตามคำแนะนำ "การเริ่มต้นใช้งาน" ทั่วไปสำหรับการตั้งค่าบัญชี codepush ของคุณคุณสามารถเริ่ม CodePush- โดยใช้แอพ React Native ของคุณโดยเรียกใช้คำสั่งต่อไปนี้จากภายในไดเรกทอรีรูทของแอปของคุณ:
npm install --save react-native-code-pushเช่นเดียวกับปลั๊กอิน Native React อื่น ๆ ประสบการณ์การรวมนั้นแตกต่างกันสำหรับ iOS และ Android ดังนั้นทำตามขั้นตอนการตั้งค่าต่อไปนี้ขึ้นอยู่กับแพลตฟอร์มที่คุณกำหนดเป้าหมาย หมายเหตุหากคุณกำหนดเป้าหมายทั้งสองแพลตฟอร์มขอแนะนำให้สร้างแอปพลิเคชัน CodePush แยกต่างหากสำหรับแต่ละแพลตฟอร์ม
หากคุณต้องการดูว่าโครงการอื่น ๆ รวมเข้ากับ CodePush ได้อย่างไรคุณสามารถตรวจสอบแอพตัวอย่างที่ยอดเยี่ยมที่ชุมชนจัดหาให้ นอกจากนี้หากคุณต้องการทำความคุ้นเคยกับ CodePush + React Native อย่างรวดเร็วคุณสามารถตรวจสอบวิดีโอการเริ่มต้นที่ยอดเยี่ยมที่ผลิตโดย Bilal Budhani และ/หรือ Deepak Sisodiya
หมายเหตุ: คู่มือนี้จะถือว่าคุณใช้คำสั่ง react-native init เพื่อเริ่มต้นโครงการ React Native ของคุณ ณ เดือนมีนาคม 2560 คำสั่ง create-react-native-app สามารถใช้ในการเริ่มต้นโครงการเรียลเนทีฟ หากใช้คำสั่งนี้โปรดเรียกใช้ npm run eject ในไดเรกทอรีโฮมไดเรกทอรีของโครงการของคุณเพื่อให้ได้โครงการคล้ายกับสิ่งที่ react-native init ที่จะสร้างขึ้น
จากนั้นดำเนินการติดตั้งโมดูลดั้งเดิมต่อไป
ด้วยปลั๊กอิน CodePush ที่ดาวน์โหลดและเชื่อมโยงและแอปของคุณถาม CodePush ว่าจะรับ Bundle JS ที่ถูกต้องได้ที่ไหนสิ่งเดียวที่เหลือคือการเพิ่มรหัสที่จำเป็นลงในแอปของคุณเพื่อควบคุมนโยบายต่อไปนี้:
เมื่อไหร่ (และบ่อยแค่ไหน) ที่จะตรวจสอบการอัปเดต? (ตัวอย่างเช่นการเริ่มแอปเพื่อตอบสนองต่อการคลิกปุ่มในหน้าการตั้งค่าเป็นระยะ ๆ ในช่วงเวลาที่แน่นอน)
เมื่อมีการอัปเดตวิธีนำเสนอต่อผู้ใช้
วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการ "codepush-ife" ส่วนประกอบรูทของแอปของคุณ ในการทำเช่นนั้นคุณสามารถเลือกหนึ่งในสองตัวเลือกต่อไปนี้:
ตัวเลือกที่ 1: ห่อส่วนประกอบรูทของคุณด้วย codePush ส่วนประกอบลำดับสูงกว่า:
สำหรับองค์ประกอบคลาส
import codePush from "react-native-code-push" ;
class MyApp extends Component {
}
MyApp = codePush ( MyApp ) ;สำหรับองค์ประกอบการทำงาน
import codePush from "react-native-code-push" ;
let MyApp : ( ) => React$Node = ( ) => {
}
MyApp = codePush ( MyApp ) ;ตัวเลือกที่ 2: ใช้ไวยากรณ์ ES7 Decorator:
หมายเหตุ: นักตกแต่งยังไม่ได้รับการสนับสนุนในการอัปเดตข้อเสนอที่รอดำเนินการของ Babel 6.x คุณอาจต้องเปิดใช้งานโดยการติดตั้งและใช้ Babel-preset-react-natial-stage-0
สำหรับองค์ประกอบคลาส
import codePush from "react-native-code-push" ;
@ codePush
class MyApp extends Component {
}สำหรับองค์ประกอบการทำงาน
import codePush from "react-native-code-push" ;
const MyApp : ( ) => React$Node = ( ) => {
}
export default codePush ( MyApp ) ;โดยค่าเริ่มต้น CodePush จะตรวจสอบการอัปเดตในทุกแอปเริ่มต้น หากมีการอัปเดตจะมีการดาวน์โหลดอย่างเงียบ ๆ และติดตั้งในครั้งต่อไปที่แอปจะรีสตาร์ท (อย่างชัดเจนโดยผู้ใช้ปลายทางหรือโดยระบบปฏิบัติการ) ซึ่งทำให้มั่นใจได้ว่าประสบการณ์การรุกรานน้อยที่สุดสำหรับผู้ใช้ปลายทางของคุณ หากการอัปเดตที่มีอยู่นั้นจำเป็นต้องติดตั้งทันทีเพื่อให้แน่ใจว่าผู้ใช้จะได้รับโดยเร็วที่สุด
หากคุณต้องการให้แอปของคุณค้นพบการอัปเดตได้เร็วขึ้นคุณสามารถเลือกที่จะซิงค์กับเซิร์ฟเวอร์ CodePush ทุกครั้งที่แอปดำเนินการต่อจากพื้นหลัง
สำหรับองค์ประกอบคลาส
let codePushOptions = { checkFrequency : codePush . CheckFrequency . ON_APP_RESUME } ;
class MyApp extends Component {
}
MyApp = codePush ( codePushOptions ) ( MyApp ) ;สำหรับองค์ประกอบการทำงาน
let codePushOptions = { checkFrequency : codePush . CheckFrequency . ON_APP_RESUME } ;
let MyApp : ( ) => React$Node = ( ) => {
}
MyApp = codePush ( codePushOptions ) ( MyApp ) ; หรือหากคุณต้องการควบคุมอย่างละเอียดเมื่อมีการตรวจสอบเกิดขึ้น (เช่นกดปุ่มหรือช่วงเวลาตัวจับเวลา) คุณสามารถเรียก CodePush.sync() ได้ตลอดเวลาด้วย SyncOptions ที่คุณต้องการและเลือกปิดการตรวจสอบอัตโนมัติของ CodePush โดยระบุ a Manual checkFrequency :
let codePushOptions = { checkFrequency : codePush . CheckFrequency . MANUAL } ;
class MyApp extends Component {
onButtonPress ( ) {
codePush . sync ( {
updateDialog : true ,
installMode : codePush . InstallMode . IMMEDIATE
} ) ;
}
render ( ) {
return (
< View >
< TouchableOpacity onPress = { this . onButtonPress } >
< Text > Check for updates < / Text >
< / TouchableOpacity >
< / View >
)
}
}
MyApp = codePush ( codePushOptions ) ( MyApp ) ; หากคุณต้องการแสดงกล่องโต้ตอบการยืนยันการอัปเดต ("การติดตั้งที่ใช้งานอยู่") กำหนดค่าเมื่อติดตั้งการอัปเดตที่มีอยู่ (เช่นบังคับให้รีสตาร์ททันที) หรือปรับแต่งประสบการณ์การอัปเด codePush() ด้วยวิธีอื่น ๆ สำหรับข้อมูลเกี่ยวกับวิธีการปรับแต่งพฤติกรรมเริ่มต้นนี้
หมายเหตุ: หากคุณใช้ Redux และ Redux Saga คุณสามารถใช้โมดูล React-Native-Code-Push-Saga ซึ่งช่วยให้คุณปรับแต่งเมื่อเรียกว่า sync ในวิธีที่ง่ายกว่า/มากกว่า
Android Google Play และ iOS App Store มีแนวทางที่สอดคล้องกันซึ่งมีกฎที่คุณควรทราบก่อนที่จะรวมโซลูชัน codepush ภายในแอปพลิเคชันของคุณ
หัวข้อที่สามของอุปกรณ์และการละเมิดเครือข่ายอธิบายว่าการอัปเดตซอร์สโค้ดโดยวิธีใด ๆ นอกเหนือจากกลไกการอัปเดตของ Google Play นั้นถูก จำกัด แต่ข้อ จำกัด นี้ใช้ไม่ได้กับการอัปเดต JavaScript Bundles
ข้อ จำกัด นี้ใช้ไม่ได้กับรหัสที่ทำงานในเครื่องเสมือนและมีการ จำกัด การเข้าถึง Android APIs (เช่น JavaScript ใน WebView หรือ Browser)
ที่อนุญาตให้ CodePush ได้อย่างสมบูรณ์เนื่องจากอัปเดต JS Bundles และไม่สามารถอัปเดตส่วนรหัสดั้งเดิมได้
ย่อหน้า 3.3.2 ตั้งแต่ย้อนกลับไปในข้อตกลงสิทธิ์การใช้งานโปรแกรม Apple Developer Program ของ Apple ในปี 2558 อนุญาตให้ทำการอัปเดต JavaScript และสินทรัพย์ได้อย่างเต็มที่และในเวอร์ชันล่าสุด (20170605) ที่สามารถดาวน์โหลดได้ที่นี่การพิจารณาคดีนี้กว้างขึ้น:
รหัสที่ตีความอาจถูกดาวน์โหลดไปยังแอปพลิเคชัน แต่ตราบเท่าที่รหัสดังกล่าว: (a) ไม่เปลี่ยนวัตถุประสงค์หลักของแอปพลิเคชันโดยการจัดหาคุณสมบัติหรือฟังก์ชันการทำงานที่ไม่สอดคล้องกับวัตถุประสงค์ที่ตั้งใจและโฆษณาของแอปพลิเคชันที่ส่งไปยังแอป Store, (b) ไม่ได้สร้างร้านค้าหรือหน้าร้านสำหรับรหัสหรือแอปพลิเคชันอื่น ๆ และ (c) ไม่ผ่านการลงนาม Sandbox หรือคุณสมบัติความปลอดภัยอื่น ๆ ของระบบปฏิบัติการ
CodePush ช่วยให้คุณปฏิบัติตามกฎเหล่านี้ได้อย่างเต็มรูปแบบตราบใดที่การอัปเดตที่คุณผลักดันไม่ได้เบี่ยงเบนผลิตภัณฑ์ของคุณจากความตั้งใจที่ได้รับอนุมัติจาก App Store
เพื่อให้สอดคล้องกับแนวทางของ Apple ต่อไปเราขอแนะนำให้แอพแจกจ่ายแอปสโตร์ไม่เปิดใช้งานตัวเลือก updateDialog เมื่อโทร sync เนื่องจากในแนวทางการตรวจสอบของ App Store ที่เขียนไว้ว่า:
แอพจะต้องไม่บังคับให้ผู้ใช้ให้คะแนนแอพตรวจสอบแอพดาวน์โหลดแอพอื่น ๆ หรือการกระทำอื่น ๆ ที่คล้ายกันเพื่อเข้าถึงฟังก์ชันการทำงานเนื้อหาหรือการใช้แอพ
นี่ไม่จำเป็นต้องเป็นกรณีของ updateDialog เนื่องจากจะไม่บังคับให้ผู้ใช้ดาวน์โหลดเวอร์ชันใหม่ แต่อย่างน้อยคุณควรตระหนักถึงการพิจารณาคดีนั้นหากคุณตัดสินใจที่จะแสดง
เมื่อแอปของคุณได้รับการกำหนดค่าและแจกจ่ายให้กับผู้ใช้ของคุณและคุณได้ทำการเปลี่ยนแปลง JS หรือสินทรัพย์บางอย่างก็ถึงเวลาที่จะปล่อย The recommended way to release them is using the release-react command in the App Center CLI, which will bundle your JavaScript files, asset files, and release the update to the CodePush server.
หมายเหตุ: ก่อนที่คุณจะสามารถเริ่มปล่อยการอัปเดตได้โปรดลงชื่อเข้าใช้แอพเซ็นเตอร์โดยเรียกใช้คำสั่ง appcenter login
ในรูปแบบพื้นฐานที่สุดคำสั่งนี้ต้องใช้พารามิเตอร์เดียวเท่านั้น: ชื่อเจ้าของของคุณ + "/" + ชื่อแอพ
appcenter codepush release-react -a < ownerName > / < appName >
appcenter codepush release-react -a < ownerName > /MyApp-iOS
appcenter codepush release-react -a < ownerName > /MyApp-Android คำสั่ง release-react เปิดใช้งานเวิร์กโฟลว์ง่าย ๆ เนื่องจากมีค่าเริ่มต้นที่สมเหตุสมผลมากมาย (เช่นการสร้างชุดวางจำหน่ายโดยสมมติว่าไฟล์รายการแอปของคุณบน iOS เป็น index.ios.js หรือ index.js ) อย่างไรก็ตามค่าเริ่มต้นทั้งหมดเหล่านี้สามารถปรับแต่งได้เพื่อให้มีความยืดหยุ่นเพิ่มขึ้นตามความจำเป็นซึ่งทำให้เหมาะสมสำหรับสถานการณ์ส่วนใหญ่
# Release a mandatory update with a changelog
appcenter codepush release-react -a < ownerName > /MyApp-iOS -m --description " Modified the header color "
# Release an update for an app that uses a non-standard entry file name, and also capture
# the sourcemap file generated by react-native bundle
appcenter codepush release-react -a < ownerName > /MyApp-iOS --entry-file MyApp.js --sourcemap-output ../maps/MyApp.map
# Release a dev Android build to just 1/4 of your end users
appcenter codepush release-react -a < ownerName > /MyApp-Android --rollout 25 --development true
# Release an update that targets users running any 1.1.* binary, as opposed to
# limiting the update to exact version name in the build.gradle file
appcenter codepush release-react -a < ownerName > /MyApp-Android --target-binary-version " ~1.1.0 "
ไคลเอนต์ CodePush รองรับการอัปเดตที่แตกต่างกันดังนั้นแม้ว่าคุณจะปล่อย JS Bundle และสินทรัพย์ของคุณในการอัปเดตทุกครั้งผู้ใช้ปลายทางของคุณจะดาวน์โหลดไฟล์ที่ต้องการเท่านั้น บริการจัดการนี้โดยอัตโนมัติเพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างแอพที่ยอดเยี่ยมและเราสามารถกังวลเกี่ยวกับการเพิ่มประสิทธิภาพการดาวน์โหลดผู้ใช้ปลายทาง
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของคำสั่ง release-react เช่นเดียวกับพารามิเตอร์ต่าง ๆ ที่เปิดเผยอ้างอิงถึงเอกสาร CLI นอกจากนี้หากคุณต้องการที่จะจัดการกับการเรียกใช้คำสั่ง react-native bundle ด้วยตัวคุณเองดังนั้นจึงต้องการโซลูชันที่ยืดหยุ่นมากกว่า release-react ให้อ้างอิงคำสั่ง release สำหรับรายละเอียดเพิ่มเติม
หากคุณพบปัญหาใด ๆ หรือมีคำถาม/ความคิดเห็น/ข้อเสนอแนะใด ๆ คุณสามารถ ping เราได้ภายใน #แชนเนลรหัส-พูบน Reactiflux อีเมลเราและ/หรือตรวจสอบรายละเอียดการแก้ไขปัญหาด้านล่าง
หมายเหตุ: การอัปเดต CodePush ควรได้รับการทดสอบในโหมดอื่นนอกเหนือจากโหมดการดีบัก ในโหมดการดีบักแอป React Native จะดาวน์โหลด JS Bundle ที่สร้างขึ้นโดย Packager ดังนั้น JS Bundle ดาวน์โหลดโดย CodePush จะไม่นำมาใช้
ในเอกสารการเริ่มต้นใช้งานของเราเราแสดงวิธีกำหนดค่าปลั๊กอิน codepush โดยใช้คีย์การปรับใช้เฉพาะ อย่างไรก็ตามเพื่อทดสอบการเปิดตัวของคุณอย่างมีประสิทธิภาพเป็นสิ่งสำคัญที่คุณจะต้องใช้ประโยชน์ Staging และการปรับ Production ที่สร้างขึ้นโดยอัตโนมัติเมื่อคุณสร้างแอพ CodePush ของคุณเป็นครั้งแรก (หรือการปรับใช้ที่กำหนดเองใด ๆ ที่คุณอาจสร้างขึ้น) ด้วยวิธีนี้คุณจะไม่ปล่อยการอัปเดตให้กับผู้ใช้ปลายทางของคุณที่คุณไม่สามารถตรวจสอบตัวเองได้
หมายเหตุ: คุณลักษณะการย้อนกลับฝั่งไคลเอ็นต์ของเราสามารถช่วยปลดบล็อกผู้ใช้หลังจากติดตั้งรีลีสที่ส่งผลให้เกิดความผิดพลาดและการย้อนกลับฝั่งเซิร์ฟเวอร์ (เช่น appcenter codepush rollback ) ช่วยให้คุณป้องกันไม่ให้ผู้ใช้เพิ่มเติมติดตั้งการเปิดตัวที่ไม่ดีเมื่อมีการระบุ อย่างไรก็ตามมันจะดีกว่าถ้าคุณสามารถป้องกันการอัปเดตที่ผิดพลาดจากการเปิดตัวในวงกว้างในตอนแรก
การใช้ประโยชน์จาก Staging และการปรับ Production ช่วยให้คุณสามารถทำเวิร์กโฟลว์ได้ดังต่อไปนี้ (อย่าลังเลที่จะปรับแต่ง!):
ปล่อยการอัปเดต codepush ไปยังการปรับใช้ Staging ของคุณโดยใช้คำสั่ง appcenter codepush release-react (หรือ appcenter codepush release หากคุณต้องการการควบคุมเพิ่มเติม)
เรียกใช้การสร้างแอป Staging/Beta ของคุณซิงค์การอัปเดตจากเซิร์ฟเวอร์และตรวจสอบว่าใช้งานได้ตามที่คาดไว้
ส่งเสริมการเปิดตัวที่ผ่านการทดสอบจาก Staging Production โดยใช้คำสั่ง appcenter codepush promote
เรียกใช้การผลิต/การสร้างแอปของคุณซิงค์การอัปเดตจากเซิร์ฟเวอร์และตรวจสอบว่าใช้งานได้ตามที่คาดไว้
หมายเหตุ: หากคุณต้องการใช้วิธีการที่ระมัดระวังมากขึ้นคุณสามารถเลือกที่จะดำเนินการ "การเปิดตัวฉาก" ซึ่งเป็นส่วนหนึ่งของ #3 ซึ่งช่วยให้คุณสามารถลดความเสี่ยงที่อาจเกิดขึ้นได้ด้วยการอัปเดต (เช่นการทดสอบใน #2 อุปกรณ์/เงื่อนไขที่เป็นไปได้?) โดยการอัปเดตการผลิตให้กับผู้ใช้ของคุณเท่านั้น (เช่น appcenter codepush promote -a <ownerName>/<appName> -s Staging -d Production -r 20 ) จากนั้นหลังจากรอเวลาที่เหมาะสมเพื่อดูว่ามีรายงานความผิดพลาดหรือความคิดเห็นของลูกค้าเข้ามาหรือไม่คุณสามารถขยายไปยังผู้ชมทั้งหมดของคุณได้โดยเรียกใช้ appcenter codepush patch -a <ownerName>/<appName> Production -r 100
คุณจะสังเกตเห็นว่าขั้นตอนข้างต้นอ้างถึง "การจัดเตรียมการสร้าง" และ "การสร้างการผลิต" ของแอพของคุณ หากกระบวนการสร้างของคุณสร้างไบนารีที่แตกต่างกันต่อ "สภาพแวดล้อม" คุณไม่จำเป็นต้องอ่านเพิ่มเติมใด ๆ เนื่องจากการสลับปุ่มปรับใช้ CodePush เป็นเช่นเดียวกับการจัดการการกำหนดค่าเฉพาะสภาพแวดล้อมสำหรับบริการอื่น ๆ ที่แอปของคุณใช้ (เช่น Facebook) อย่างไรก็ตามหากคุณกำลังมองหาตัวอย่าง ( รวมถึงโครงการสาธิต ) เกี่ยวกับวิธีการตั้งค่ากระบวนการสร้างของคุณเพื่อรองรับสิ่งนี้จากนั้นอ้างถึงส่วนต่อไปนี้ขึ้นอยู่กับแพลตฟอร์มแอปของคุณกำหนดเป้าหมาย:
ส่วนด้านบนแสดงให้เห็นว่าคุณสามารถใช้ประโยชน์จากการปรับใช้ CodePush หลายรายการเพื่อทดสอบการอัปเดตของคุณได้อย่างมีประสิทธิภาพก่อนที่จะปล่อยให้ผู้ใช้ปลายทางของคุณกว้างขึ้น อย่างไรก็ตามเนื่องจากเวิร์กโฟลว์นั้นได้ฝังการกำหนดการปรับใช้ลงในไบนารีจริงการสร้างการแสดงละครหรือการผลิตจะซิงค์การอัปเดตจากการปรับใช้นั้นเท่านั้น ในหลายกรณีสิ่งนี้เพียงพอเนื่องจากคุณต้องการให้ทีมลูกค้าผู้มีส่วนได้ส่วนเสีย ฯลฯ ของคุณเพื่อซิงค์กับการเผยแพร่ก่อนการผลิตของคุณดังนั้นพวกเขาจึงต้องการงานสร้างที่รู้วิธีการซิงค์กับการจัดเตรียม อย่างไรก็ตามหากคุณต้องการที่จะทำการทดสอบ A/B หรือให้การเข้าถึงแอปของคุณก่อนหน้านี้กับผู้ใช้บางรายมันสามารถพิสูจน์ได้ว่ามีประโยชน์มากเพื่อให้ผู้ใช้เฉพาะ (หรือผู้ชม) เป็นแบบไดนามิกลงในการปรับใช้ที่เฉพาะเจาะจงเมื่อรันไทม์
เพื่อให้บรรลุเวิร์กโฟลว์ประเภทนี้สิ่งที่คุณต้องทำคือระบุคีย์การปรับใช้ที่คุณต้องการให้ผู้ใช้ปัจจุบัน syncronize เมื่อเรียกวิธี codePush เมื่อระบุคีย์นี้จะแทนที่ "ค่าเริ่มต้น" ที่ให้ไว้ในไฟล์ Info.plist (iOS) หรือ MainActivity.java (Android) ของแอป สิ่งนี้ช่วยให้คุณสามารถสร้างงานสร้างสำหรับการจัดเตรียมหรือการผลิตซึ่งยังสามารถ "เปลี่ยนเส้นทาง" แบบไดนามิกได้ตามต้องการ
// Imagine that "userProfile" is a prop that this component received
// which includes the deployment key that the current user should use.
codePush . sync ( { deploymentKey : userProfile . CODEPUSH_KEY } ) ;ด้วยการเปลี่ยนแปลงที่เกิดขึ้นตอนนี้มันเป็นเพียงเรื่องของการเลือกวิธีที่แอปของคุณกำหนดคีย์การปรับใช้ที่ถูกต้องสำหรับผู้ใช้ปัจจุบัน ในทางปฏิบัติโดยทั่วไปมีวิธีแก้ปัญหาสองประการสำหรับเรื่องนี้:
เปิดเผยกลไกที่มองเห็นได้ผู้ใช้สำหรับการเปลี่ยนการปรับใช้ได้ตลอดเวลา ตัวอย่างเช่นหน้าการตั้งค่าของคุณอาจมีการสลับสำหรับการเปิดใช้งาน "เบต้า" โมเดลนี้ใช้งานได้ดีหากคุณไม่เกี่ยวข้องกับความเป็นส่วนตัวของการอัปเดตก่อนการผลิตและคุณมีผู้ใช้พลังงานที่อาจต้องการเลือกอัปเดตก่อนหน้า ). อย่างไรก็ตามโซลูชันนี้ทำให้การตัดสินใจอยู่ในมือของผู้ใช้ของคุณซึ่งไม่ได้ช่วยให้คุณทำการทดสอบ A/B อย่างโปร่งใส
ใส่คำอธิบายประกอบโปรไฟล์ฝั่งเซิร์ฟเวอร์ของผู้ใช้ของคุณด้วยข้อมูลเมตาเพิ่มเติมที่ระบุการปรับใช้ที่ควรซิงค์กับ โดยค่าเริ่มต้นแอปของคุณสามารถใช้คีย์ที่ฝังตัวแบบไบนารีได้ แต่หลังจากผู้ใช้ได้รับการรับรองความถูกต้องเซิร์ฟเวอร์ของคุณสามารถเลือกที่จะ "เปลี่ยนเส้นทาง" ไปยังการปรับใช้ที่แตกต่างกันซึ่งช่วยให้คุณสามารถเพิ่มผู้ใช้หรือกลุ่มบางกลุ่มในการปรับใช้ที่แตกต่างกัน . คุณสามารถเลือกที่จะจัดเก็บการตอบสนองเซิร์ฟเวอร์ในที่เก็บข้อมูลท้องถิ่นเพื่อให้กลายเป็นค่าเริ่มต้นใหม่ วิธีที่คุณเก็บคีย์ไว้ข้างโปรไฟล์ของผู้ใช้ของคุณนั้นขึ้นอยู่กับโซลูชันการตรวจสอบความถูกต้องของคุณทั้งหมด (ตัวอย่างเช่น Auth0, Firebase, DB + REST API ที่กำหนดเอง) แต่โดยทั่วไปแล้วจะค่อนข้างน่าสนใจ
หมายเหตุ: หากจำเป็นคุณสามารถใช้โซลูชันไฮบริดที่อนุญาตให้ผู้ใช้ปลายทางของคุณสลับระหว่างการปรับใช้ที่แตกต่างกันในขณะเดียวกันก็ช่วยให้เซิร์ฟเวอร์ของคุณสามารถแทนที่การตัดสินใจนั้นได้ ด้วยวิธีนี้คุณมีลำดับชั้นของ "ความละเอียดการปรับใช้" ที่ทำให้มั่นใจได้ เรียกใช้การทดสอบ A/B กับผู้ใช้ของคุณตามต้องการ
เนื่องจากเราแนะนำให้ใช้การปรับใช้ Staging สำหรับการทดสอบการอัปเดตของคุณก่อน (ดังที่อธิบายไว้ในส่วนก่อนหน้า) จึงไม่จำเป็นต้องใช้สำหรับการทดสอบ A/B กับผู้ใช้ของคุณ การเข้าถึง (ตามที่อธิบายไว้ในตัวเลือก #1 ด้านบน) ดังนั้นเราขอแนะนำให้ใช้การปรับใช้แอปแบบกำหนดเองอย่างเต็มที่เพื่อให้คุณสามารถแบ่งกลุ่มผู้ใช้ของคุณได้อย่างไรก็ตามเหมาะสมกับความต้องการของคุณ ตัวอย่างเช่นคุณสามารถสร้างการปรับใช้ระยะยาวหรือแม้แต่ครั้งเดียวปล่อยแอปของคุณออกไปแล้ววางผู้ใช้บางคนไว้เพื่อดูว่าพวกเขามีส่วนร่วมอย่างไร
// #1) Create your new deployment to hold releases of a specific app variant
appcenter codepush deployment add - a < ownerName > / <appName> test-variant-one
// #2) Target any new releases at that custom deployment
appcenter codepush release - react - a < ownerName > / <appName> -d test-variant-one หมายเหตุ: จำนวนผู้ใช้ทั้งหมดที่รายงานใน "การติดตั้งตัวชี้วัด" ของการปรับใช้ของคุณจะคำนึงถึงผู้ใช้บัญชีที่ "เปลี่ยน" จากการปรับใช้หนึ่งไปยังอีก ตัวอย่างเช่นหากการปรับใช้ Production ของคุณในปัจจุบันรายงานว่ามีผู้ใช้ทั้งหมด 1 คน แต่คุณสลับผู้ใช้เป็นแบบไดนามิก Staging การปรับใช้ Production จะรายงานผู้ใช้ทั้งหมด 0 คนในขณะที่ Staging จะรายงาน 1 (ผู้ใช้ที่เพิ่งเปลี่ยน) พฤติกรรมนี้ช่วยให้คุณสามารถติดตามการใช้งานรีลีสของคุณได้อย่างถูกต้องแม้ในกรณีที่ใช้โซลูชันการเปลี่ยนเส้นทางการปรับใช้ตามรันไทม์
ชุมชน React Native ได้สร้างแอพโอเพนซอร์สที่ยอดเยี่ยมซึ่งสามารถใช้เป็นตัวอย่างสำหรับนักพัฒนาที่เริ่มต้นได้ ต่อไปนี้เป็นรายการของแอพดั้งเดิมของ OSS React ที่ใช้ CodePush และสามารถใช้เพื่อดูว่าคนอื่นใช้บริการอย่างไร:
นอกจากนี้หากคุณกำลังมองหาการเริ่มต้นด้วย React Native + CodePush และกำลังมองหาชุดเริ่มต้นที่ยอดเยี่ยมคุณควรตรวจสอบสิ่งต่อไปนี้:
หมายเหตุ: หากคุณได้พัฒนาแอพ React Native โดยใช้ CodePush นั่นคือโอเพ่นซอร์สโปรดแจ้งให้เราทราบ เราชอบที่จะเพิ่มลงในรายการนี้!
วิธี sync รวมถึงการบันทึกการวินิจฉัยจำนวนมากนอกกรอบดังนั้นหากคุณกำลังพบปัญหาเมื่อใช้งานสิ่งที่ดีที่สุดที่ควรลองก่อนคือการตรวจสอบบันทึกเอาต์พุตของแอปของคุณ สิ่งนี้จะบอกคุณว่าแอปได้รับการกำหนดค่าอย่างถูกต้องหรือไม่ (เช่นปลั๊กอินสามารถค้นหาคีย์การปรับใช้ของคุณได้หรือไม่) หากแอพสามารถเข้าถึงเซิร์ฟเวอร์ได้หากมีการค้นพบการอัปเดตที่มีอยู่หากการอัปเดตถูกดาวน์โหลด/ติดตั้งสำเร็จ ฯลฯ เราต้องการปรับปรุงการบันทึกเพื่อให้เข้าใจง่าย/ครอบคลุมที่สุดเท่าที่จะเป็นไปได้ดังนั้นโปรดแจ้งให้เราทราบหากคุณพบว่ามันสับสนหรือขาดหายไป
วิธีที่ง่ายที่สุดในการดูบันทึกเหล่านี้คือการเพิ่มการตั้งค่าสถานะ --debug สำหรับแต่ละคำสั่ง สิ่งนี้จะส่งออกสตรีมบันทึกที่กรองไปเพียงแค่ข้อความ codepush สิ่งนี้ทำให้ง่ายต่อการระบุปัญหาโดยไม่จำเป็นต้องใช้เครื่องมือเฉพาะแพลตฟอร์มหรือลุยผ่านบันทึกปริมาณสูง
นอกจากนี้คุณยังสามารถใช้เครื่องมือเฉพาะแพลตฟอร์มใด ๆ เพื่อดูบันทึก codepush หากคุณพอใจกับพวกเขามากขึ้น เริ่มต้นขึ้นอย่างง่าย ๆ คอนโซล Chrome Devtools, Xcode Console (iOS), คอนโซล OS X (iOS) และ/หรือ ADB logcat (Android) และมองหาข้อความที่ถูกนำหน้าด้วย [CodePush]
โปรดทราบว่าโดยค่าเริ่มต้น React Native Logs จะถูกปิดใช้งานบน iOS ในการสร้างรีลีสดังนั้นหากคุณต้องการดูในการสร้างรุ่นคุณต้องทำการเปลี่ยนแปลงต่อไปนี้ในไฟล์ AppDelegate.m ของคุณ:
เพิ่มคำสั่ง #import <React/RCTLog.h> สำหรับ rn <v0.40 ใช้: #import "RCTLog.h"
เพิ่มคำสั่งต่อไปนี้ไปที่ด้านบนของ application:didFinishLaunchingWithOptions วิธี:
RCTSetLogThreshold (RCTLogLevelInfo);ตอนนี้คุณจะสามารถเห็นบันทึก CodePush ในโหมดดีบั๊กหรือเปิดตัวทั้งบน iOS หรือ Android หากการตรวจสอบบันทึกไม่ได้แสดงปัญหาโปรดดูปัญหาทั่วไปต่อไปนี้สำหรับแนวคิดการแก้ปัญหาเพิ่มเติม:
| ปัญหา / อาการ | ทางออกที่เป็นไปได้ |
|---|---|
| ข้อผิดพลาดในการรวบรวม | ตรวจสอบอีกครั้งว่า React Native เวอร์ชันของคุณเข้ากันได้กับเวอร์ชัน codepush ที่คุณใช้ |
การหมดเวลาเครือข่าย sync แฮ checkForUpdate | ลองรีเซ็ตตัวจำลองโดยเลือก Simulator -> Reset Content and Settings.. รายการเมนูจากนั้นเรียกใช้แอปของคุณอีกครั้ง |
เซิร์ฟเวอร์ตอบกลับด้วย 404 เมื่อโทร sync หรือ checkForUpdate | ตรวจสอบอีกครั้งว่าคีย์การปรับใช้ที่คุณเพิ่มลงใน Info.plist (iOS) ของคุณ, build.gradle (Android) หรือว่าคุณกำลังส่งผ่านไปยัง sync / checkForUpdate จริง ๆ แล้วถูกต้อง คุณสามารถเรียกใช้ appcenter codepush deployment list <ownerName>/<appName> --displayKeys เพื่อดูคีย์ที่ถูกต้องสำหรับการปรับใช้แอปของคุณ |
| อัปเดตไม่ถูกค้นพบ | ตรวจสอบอีกครั้งว่าเวอร์ชันของแอพที่กำลังทำงานอยู่ของคุณ (เช่น 1.0.0 ) ตรงกับเวอร์ชันที่คุณระบุเมื่อปล่อยการอัปเดตไปยัง CodePush นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณกำลังเปิดใช้งานการปรับใช้แบบเดียวกับที่แอปของคุณได้รับการกำหนดค่าให้ซิงค์กับ |
| อัปเดตไม่แสดงหลังจากรีสตาร์ท | หากคุณไม่ได้เรียก sync บนแอปเริ่มต้น (เช่นภายใน componentDidMount ของส่วนประกอบรูทของคุณ) คุณจะต้องโทร notifyApplicationReady ล่วงหน้าอย่างชัดเจนบนแอปเริ่มต้นมิฉะนั้นปลั๊กอินจะคิดว่าการอัปเดตของคุณล้มเหลวและย้อนกลับ |
| ฉันได้เปิดตัวการอัปเดตสำหรับ iOS แต่แอพ Android ของฉันก็แสดงการอัปเดตและมันจะหยุดพัก | ตรวจสอบให้แน่ใจว่าคุณมีปุ่มปรับใช้ที่แตกต่างกันสำหรับแต่ละแพลตฟอร์มเพื่อรับการอัปเดตอย่างถูกต้อง |
| ฉันได้เปิดตัวการอัปเดตใหม่แล้ว แต่ยังไม่สะท้อนการเปลี่ยนแปลง | ตรวจสอบให้แน่ใจว่าคุณใช้แอพในโหมดอื่นนอกเหนือจากการดีบัก ในโหมดการดีบักแอป React Native จะดาวน์โหลด JS Bundle ที่สร้างขึ้นโดย Packager ดังนั้น JS Bundle ดาวน์โหลดโดย CodePush จะไม่นำมาใช้ |
| ไม่พบกลุ่ม JS เมื่อเรียกใช้แอปของคุณกับ iOS Simulator | โดยค่าเริ่มต้น React Native ไม่ได้สร้างชุด JS ของคุณเมื่อทำงานกับตัวจำลอง ดังนั้นหากคุณใช้ [CodePush bundleURL] และการกำหนดเป้าหมายการจำลอง iOS คุณอาจได้รับผลลัพธ์ nil ปัญหานี้จะได้รับการแก้ไขใน RN 0.22.0 แต่เฉพาะสำหรับการสร้างรุ่น คุณสามารถปลดบล็อกสถานการณ์นี้ได้ในขณะนี้โดยการเปลี่ยนแปลงนี้ในพื้นที่ |
นอกเหนือจากความสามารถในการใช้ CodePush CLI เพื่ออัปเดต "ด้วยตนเอง" เราเชื่อว่ามันเป็นสิ่งสำคัญที่จะสร้างโซลูชันที่ทำซ้ำได้และยั่งยืนสำหรับการส่งข้อมูลอัปเดตไปยังแอปของคุณอย่างต่อเนื่อง ด้วยวิธีนี้มันง่ายพอสำหรับคุณและ/หรือทีมงานของคุณในการสร้างและรักษาจังหวะของการปรับใช้ Agile เพื่อช่วยในการตั้งค่าไปป์ไลน์ซีดีที่ใช้ codepush ให้อ้างอิงการรวมต่อไปนี้กับเซิร์ฟเวอร์ CI ต่างๆ:
นอกจากนี้หากคุณต้องการรายละเอียดเพิ่มเติมว่าเวิร์กโฟลว์ CI/CD มือถือที่สมบูรณ์สามารถมีลักษณะอย่างไรซึ่งรวมถึง CodePush ลองดูบทความที่ยอดเยี่ยมนี้โดยทีมวิศวกรรม Zeemee
โมดูลนี้จัดส่งไฟล์ *.d.ts เป็นส่วนหนึ่งของแพ็คเกจ NPM ซึ่งช่วยให้คุณสามารถ import และรับ IntelliSense ในการสนับสนุนบรรณาธิการ (เช่น Visual Studio Code) รวมถึงการตรวจสอบประเภทเวลาคอมไพล์หากคุณกำลังตรวจสอบ ใช้ typeScript ส่วนใหญ่พฤติกรรมนี้ควรทำงานนอกกรอบอย่างไรก็ตามหากคุณระบุ es6 เป็นค่าสำหรับตัวเลือก target หรือ module คอมไพเลอร์ในไฟล์ tsconfig.json ของคุณแล้วตรวจสอบให้แน่ใจว่าคุณตั้งค่า ตัวเลือก moduleResolution เป็น node สิ่งนี้ทำให้มั่นใจได้ว่าคอมไพเลอร์ TypeScript จะดูภายใน node_modules สำหรับคำจำกัดความประเภทของโมดูลที่นำเข้า มิฉะนั้นคุณจะได้รับข้อผิดพลาดดังต่อไปนี้เมื่อพยายามนำเข้าโมดูล react-native-code-push : error TS2307: Cannot find module 'react-native-code-push'
โครงการนี้ได้นำรหัสการดำเนินงานของ Microsoft โอเพ่นซอร์สมาใช้ สำหรับข้อมูลเพิ่มเติมโปรดดูจรรยาบรรณคำถามที่พบบ่อยหรือติดต่อ [email protected] พร้อมคำถามหรือความคิดเห็นเพิ่มเติมใด ๆ
