Kit de développement logiciel (SDK) React Native Client
Important
Visual Studio App Center est prévu pour la mise hors service le 31 mars 2025. Bien que vous puissiez continuer à utiliser Visual Studio App Center jusqu’à ce qu’il soit entièrement mis hors service, il existe plusieurs alternatives recommandées que vous pouvez envisager de migrer vers.
En savoir plus sur les chronologies de support et les alternatives.
Ce plug-in fournit une intégration côté client pour le service CodePush, ce qui vous permet d’ajouter facilement une expérience de mise à jour dynamique à vos applications React Native.
Comment cela fonctionne-t-il ?
Les applications React Native sont composées de fichiers JavaScript et de toutes les images associées, qui sont regroupées par le packager et distribuées dans le cadre d’un binaire spécifique à la plateforme (un ou .apk un .ipa fichier). Lorsque l’application est publiée, la mise à jour du code JavaScript (par exemple, la création de correctifs de bogues, l’ajout de nouvelles fonctionnalités) ou des ressources d’image vous oblige à recompiler et redistribuer l’intégralité du fichier binaire, ce qui inclut toutes les heures de révision des magasins sur lesquels vous publiez.
Le plug-in CodePush permet d’obtenir des améliorations de produit devant vos utilisateurs finaux instantanément, en gardant vos images et JavaScript synchronisées avec les mises à jour que vous publiez sur le serveur CodePush. De cette façon, votre application bénéficie des avantages d’une expérience mobile hors connexion, ainsi que de l’agilité « web-like » des mises à jour de chargement indépendant dès qu’elles sont disponibles.
Pour vous assurer que vos utilisateurs finaux disposent toujours d’une version fonctionnelle de votre application, le plug-in CodePush conserve une copie de la mise à jour précédente, afin que, si vous envoyez accidentellement une mise à jour qui inclut un incident, elle peut automatiquement restaurer. De cette façon, vous pouvez vous assurer que votre agilité de mise en production nouvelle découverte n’entraîne pas le blocage des utilisateurs avant de pouvoir restaurer sur le serveur.
Remarque
Tous les changements de produit qui touchent le code natif (par exemple, la modification de votre fichier AppDelegate.m/MainActivity.java, l’ajout d’un nouveau plug-in) ne peuvent pas être distribués via CodePush, et doivent donc être mis à jour via le ou les magasins appropriés.
Plateformes React Native prises en charge
- iOS (7+)
- Android (5.0+)
- Windows (UWP)
Nous essayons de maintenir la compatibilité descendante de notre plug-in avec les versions précédentes de React Native, mais en raison de la nature de la plateforme et de l’existence de changements cassants entre les versions, il est possible que vous deviez utiliser une version spécifique du plug-in CodePush pour prendre en charge la version exacte de React Native que vous utilisez. Le tableau suivant présente les versions du plug-in CodePush qui prennent officiellement en charge les versions React Native respectives :
| Versions react natives | Prise en charge des versions de CodePush |
|---|---|
| <0.14 | Non pris en charge |
| v0.14 | v1.3 (prise en charge Android introduite) |
| v0.15-v0.18 | v1.4-v1.6 (prise en charge des ressources iOS introduite) |
| v0.19-v0.28 | v1.7-v1.17 (prise en charge des ressources Android introduite) |
| v0.29-v0.30 | v1.13-v1.17 (code d’hébergement natif refactorisé RN) |
| v0.31-v0.33 | v1.14.6-v1.17 (code d’hébergement natif refactorisé RN) |
| v0.34-v0.35 | v1.15-v1.17 (code d’hébergement natif refactorisé RN) |
| v0.36-v0.39 | v1.16-v1.17 (gestionnaire de reprise refactorisé RN) |
| v0.40-v0.42 | v1.17 (fichiers d’en-tête iOS refactorisé RN) |
| v0.43-v0.44 | v2.0+ (dépendances uimanager refactorisé RN) |
| v0.45 | v3.0+ (code du gestionnaire d’instances refactorisé RN) |
| v0.46 | v4.0+ (code du chargeur de bundle js refactorisé RN) |
| v0.46-v0.53 | v5.1+ (RN a supprimé l’inscription inutilisée des modules JS) |
| v0.54-v0.55 | v5.3+ (Intégration android Gradle Plug-in 3.x) |
| v0.56-v0.58 | v5.4+ (versions mises à niveau rn pour les outils Android) |
| v0.59 | v5.6+ (code du chargeur de bundle js refactorisé RN) |
| v0.60-v0.61 | v6.0+ (RN migré vers la liaison automatique) |
Nous travaillons dur pour répondre aux nouvelles versions React Native, mais ils nous interrompent occasionnellement. Nous allons mettre à jour ce graphique avec chaque version React Native afin que les utilisateurs puissent vérifier ce que notre support officiel est.
Composants pris en charge
Lors de l’utilisation du système de ressources React Native (comme l’utilisation de la syntaxe), la require("./foo.png") liste suivante représente l’ensemble des composants principaux (et des propriétés) qui prennent en charge l’utilisation de leurs images et vidéos référencées mises à jour via CodePush :
| Composant | Prop(s) |
|---|---|
Image |
source |
MapView.Marker (Nécessite react-native-maps >=O.3.2) |
image |
ProgressViewIOS |
progressImage, trackImage |
TabBarIOS.Item |
icon, selectedIcon |
ToolbarAndroid (React Native 0.21.0+) |
actions[].icon, , logooverflowIcon |
Video |
source |
La liste suivante représente l’ensemble de composants (et d’accessoires) qui ne prennent actuellement pas en charge leurs ressources mises à jour via CodePush, en raison de leur dépendance vis-à-vis des images statiques et des vidéos (comme l’utilisation de la { uri: "foo" } syntaxe) :
| Composant | Prop(s) |
|---|---|
SliderIOS |
maximumTrackImage, , minimumTrackImagethumbImage, ,trackImage |
Video |
source |
Nous allons mettre à jour cette liste à mesure que de nouveaux composants principaux sont publiés, qui prennent en charge le référencement des ressources, afin de garantir aux utilisateurs ce qu’ils peuvent s’attendre à mettre à jour à l’aide de CodePush.
Remarque
CodePush fonctionne uniquement avec les composants vidéo lors de l’utilisation require dans la propriété source. Par exemple:
<Video source={require("./foo.mp4")} />
Conformité des recommandations de magasin
Bien que Google Play et les applications distribuées en interne (par exemple Enterprise, Fabric, App Center) n’aient aucune limitation sur la façon de publier des mises à jour à l’aide de CodePush, l’App Store iOS et ses instructions correspondantes ont des règles plus précises que vous devez connaître avant d’intégrer la solution dans votre application.
Contrat de licence du programme développeur Apple, sous le paragraphe 3.3.2, les mises à jour à l’air complètes de JavaScript et de ressources , et dans sa dernière version (20210607) téléchargeable ici, cette décision est encore plus large :
Le code interprété peut être téléchargé dans une application, mais uniquement tant que ce code : (a) ne modifie pas l’objectif principal de l’application en fournissant des fonctionnalités ou des fonctionnalités incompatibles avec l’objectif prévu et annoncé de l’application comme soumis à l’App Store, (b) ne crée pas de magasin ou de vitrine pour d’autres codes ou applications, et (c) ne contourne pas la signature, le bac à sable ou d’autres fonctionnalités de sécurité du système d’exploitation.
CodePush vous permet de suivre ces règles en conformité complète tant que la mise à jour que vous envoyez ne dévie pas considérablement votre produit de son intention d’origine approuvée par l’App Store.
Pour rester en conformité avec les recommandations d’Apple, nous vous suggérons que les applications distribuées par l’App Store n’activent pas l’option lors de l’appel updateDialog sync, car dans les instructions de révision d’App Store, il est écrit ceci :
Les applications ne doivent pas forcer les utilisateurs à évaluer l’application, à passer en revue l’application, à télécharger d’autres applications ou à d’autres actions similaires pour accéder aux fonctionnalités, au contenu ou à l’utilisation de l’application.
Ce n’est pas nécessairement le cas pour updateDialog, car il ne force pas l’utilisateur à télécharger la nouvelle version, mais au moins vous devez être conscient de cette décision si vous décidez de l’afficher.
Exemples d’applications / Starters
La communauté React Native a correctement créé des applications open source impressionnantes qui peuvent servir d’exemples pour les développeurs qui commencent. La liste suivante est des applications OsS React Native qui utilisent également CodePush et qui peuvent être utilisées pour voir comment les autres utilisent le service :
- Application F8 - Application de conférence officielle pour F8 2016.
- Feline for Product Hunt - Un client Android pour Product Hunt .
- GeoEncoding - Une application de Lynx IT Digital, qui montre comment utiliser de nombreux composants et modules React Native.
- Faits mathématiques - Une application de Khan Academy pour aider à mémoriser les faits mathématiques plus facilement.
En outre, si vous cherchez à bien démarrer avec React Native + CodePush et que vous recherchez un kit de démarrage génial, vous devez consulter les éléments suivants :
-
Remarque
Si vous avez développé une application React Native à l’aide de CodePush, c’est open source, faites-nous savoir. Nous aimerions l’ajouter à cette liste !
Intégration continue / Livraison
Outre l’utilisation de l’interface CLI CodePush pour « manuellement », nous pensons qu’il est important de créer une solution reproductible et durable pour fournir en continu des mises à jour à votre application. De cette façon, il est assez simple pour vous ou votre équipe de créer et de maintenir le rythme des déploiements agiles. Pour faciliter la configuration d’un pipeline CD basé sur CodePush, reportez-vous aux intégrations suivantes avec différents serveurs CI :
- Azure DevOps - Azure DevOps (anciennement VSTS) dispose également d’extensions pour la publication sur App Center et le Google Play Store. Il fournit donc une solution CD mobile assez intéressante en général.
- Travis CI
Consommation TypeScript
Ce module fournit son *.d.ts fichier dans le cadre de son package NPM, ce qui vous import permet de l’utiliser et de recevoir intellisense dans les éditeurs de prise en charge (comme Visual Studio Code), ainsi que la vérification du type au moment de la compilation si vous utilisez TypeScript. Pour la plupart, ce comportement doit fonctionner hors de la zone, toutefois, si vous avez spécifié es6 comme valeur pour l’option du compilateur ou module de l’option target du compilateur dans votre tsconfig.json fichier, assurez-vous que vous définissez également l’option moduleResolution nodesur . Cela garantit que le compilateur TypeScript recherche node_modules les définitions de type des modules importés. Sinon, vous obtenez une erreur semblable à ce qui suit lors de la tentative d’importation du react-native-code-push module : error TS2307: Cannot find module 'react-native-code-push'.