Nouveautés dans les widgets

Bonjour, je m’appelle Tanner Oakes et je suis ingénieur dans l’équipe System Experience. Les widgets offrent une excellent moyen de générer des informations et des actions pertinentes dans tout le système, afin que votre app reste utile même lorsqu’elle n’est pas au premier plan. WidgetKit ne cesse de s’agrandir, offrant des widgets plus performants et de nouvelles possibilités d’utilisation. Mon ami Luca a une app de suivi de la consommation de caféine. Je l’ai aidé à la mettre à jour. Tout au long de cette discussion, je vous montrerai comment tirer parti de toutes les nouveautés des widgets. Cette vidéo couvre les widgets, les activités en temps réel et les commandes disponibles dans de nouveaux endroits sur nos plates-formes. Elle présente également une nouvelle façon d’afficher le contenu pertinent des widgets dans le défilement intelligent sur watchOS. Enfin, elle vous montre comment actualiser vos widgets sur tous vos appareils grâce aux notifications push. Les widgets, les activités en temps réel et les commandes sont présents dans plein de nouveaux endroits. Tout d’abord, parlons du nouveau look possible des widgets à leur emplacement initial. Dans iOS 26, l’écran d’accueil peut être configuré pour présenter les icônes et les widgets de manière translucide ou personnalisé avec une couleur spécifique, comme le bleu ici. Ces apparences peuvent être configurées sur le bureau pour les widgets et le Centre de notifications de macOS Tahoe également. Ces nouvelles présentations sont conçues de la même manière pour iOS et macOS. Tout d’abord, le contenu des widgets est généré à l’aide d’un mode de rendu accentué, qui colore tout le contenu en blanc. Ensuite, l’arrière-plan du widget est supprimé et remplacé par un effet translucide ou une couleur teintée. Sans rien avoir à faire, mon widget de suivi de la consommation de caféine a fière allure en mode accentué. Certains widgets doivent parfois être peaufinés pour avoir un aspect optimal en mode accentué. J’ai ajouté à mon app un widget qui me montre ma boisson la plus souvent consommée. Pour moi, c’est un matcha latte. Mon widget utilise une grande image représentant la boisson, un titre en bas et un dégradé derrière le texte, ce qui le rend plus lisible lorsqu’il est placé au-dessus de l’image. Lorsque le rendu accentué est appliqué, tout le contenu du widget est teinté en blanc. Pour un contenu opaque comme ma tasse de latte, tout est coloré en blanc. Le contenu partiellement transparent comme mon dégradé est teinté en blanc tout en conservant son opacité. Ce n’est vraiment pas l’apparence que je veux. Je ne parviens plus à distinguer l’image, et le texte est difficile à lire. Je vais vous montrer comment mettre à jour mon widget pour mieux gérer le rendu accentué. Voici la vue de mon widget. J’ai un ZStack avec l’image de la boisson, le dégradé et ensuite la vue du texte. Je commence par ajouter la variable d’environnement widgetRenderingMode à la vue de mon widget. Je n’affiche la grande image et le dégradé linéaire que si le rendu du widget est en mode pleine couleur. Ensuite, je ramène mon image au-dessus du texte en ajoutant un VStack et en n’affichant mon image que si le widget est en mode accentué. Ma mise en page me semble plutôt bonne. Il ne me reste plus qu’à améliorer l’apparence de mon image. J’ajoute le modificateur widgetAccentedRenderingMode à l’image, en la réglant sur desaturated. widgetAccentedRenderingMode est un modificateur SwiftUI qui peut être appliqué aux images des widgets. L’argument que je renseigne me donne un contrôle précis sur la façon dont l’image doit être affichée en mode accentué. Il existe cinq options différentes que widgetAccentedRenderingMode accepte. Voyons comment chacun de ces modes affecte la présentation des images, en comparant le mode accentué d’iOS et de macOS à un mode accentué sur le cadran d’une montre.

Pour widgetAccentedRenderingMode, le mode .nil revient à ne pas appliquer le modificateur. La couleur du contenu principal est appliquée à l’image. Pour mon widget iOS et mon widget watchOS, mon image est complètement blanche. Le mode .accented applique la couleur d’accentuation à l’image. Sur iOS et macOS, les couleurs principales et d’accentuation sont blanches. Mon image est donc blanche. Sur watchOS, la couleur d’accentuation correspond à la couleur du cadran. L’image de mon widget watchOS est donc bleue. .desaturated désature la couleur de l’image. Cet effet est le même sur les styles de présentation iOS et watchOS. .accentedDesaturated applique les deux effets : désaturation des couleurs de l’image et application de la couleur d’accentuation à partir du thème sélectionné. Sur iOS, cela signifie que l’image est un peu plus blanche, tandis que sur watchOS, mon image désaturée prend la couleur d’accentuation bleue du thème. .fullcolor affiche l’image complète non modifiée en mode de rendu accentué. Pour s’intégrer au mieux au cadran, cette option n’est pas prise en compte sur watchOS. Pour la plupart des widgets, utilisez .desaturated ou .accentedDesaturated pour que le contenu de l’image se fonde mieux avec le reste de l’écran d’accueil. Utilisez .fullColor pour les images de contenu multimédia, comme une pochette d’album ou une couverture de livre. Je vais vous expliquer comment rendre vos widgets encore plus puissants. Avec visionOS 26, vos apps visionOS peuvent désormais inclure des widgets. Et si vous avez déjà une app iPhone ou iPad compatible avec des widgets, ces derniers seront automatiquement disponibles dans visionOS. Toutes les tailles de famille de systèmes iOS et macOS sont prises en charge. Les widgets de visionOS ont une capacité d’interaction et d’animation, tout comme les autres plates-formes. Voyons comment fonctionnent les widgets sur visionOS et les nouvelles options fournies par WidgetKit. Dans visionOS, les widgets peuvent être ajoutés à la pièce, puis épinglés sur une surface. Par défaut, ils apparaissent en mode .elevated, comme posés sur la surface. Les widgets peuvent également être encastrés, ce qui donne l’impression qu’ils sont directement intégrés à la surface. Si l’un de ces styles ne convient pas à votre widget, utilisez le modificateur supportedMountingStyles pris en charge dans la configuration du widget pour spécifier les options à fournir. Ce modificateur est disponible pour les widgets visionOS et iOS. Par défaut, tous les widgets sont affichés sous une texture translucide. Pour les apps visionOS, une texture alternative de papier peut être spécifiée, ce qui donne au widget l’aspect d’une affiche. Ici, à gauche, mon widget de boisson fréquemment consommée est en mode translucide, et à droite, je teste le même widget en lui appliquant la texture papier. Utilisez le modificateur .widgetTexture dans la configuration du widget pour spécifier si le widget doit être affiché avec une texture papier ou en mode translucide. Pour compléter l’apparence des widgets de style affiche, une nouvelle famille de widgets systemExtraLargePortrait est disponible dans visionOS. Il s’agit d’une version orientée verticalement de la famille systemExtraLarge horizontale existante.

Ajoutez-le à la configuration du widget à l’aide du modificateur .supportedFamilies. Dans visionOS, le thème de couleur du widget peut également être personnalisé. Par défaut, le widget apparaît en mode pleine couleur. Si je sélectionne ce thème vert, le contenu du widget s’affiche en mode de rendu accentué. Le cadre et le contenu du widget sont teintés avec la couleur que j’ai sélectionnée. L’arrière-plan est ensuite supprimé et remplacé par une couleur unie qui complète le thème de couleur sélectionné. Ce style applique la même approche de rendu que celle évoquée précédemment pour iOS et macOS. Utilisez ces techniques pour que l’aspect du widget soit optimal dans ces thèmes de couleurs. Utilisez le modificateur widgetAccentedRenderingMode pour personnaliser la présentation de vos images. Utilisez aussi la variable d’environnement widgetRenderingMode pour appliquer des modifications plus substantielles sous certaines conditions.

Sur visionOS, les widgets peuvent être introduits dans votre environnement et placés sur plusieurs surfaces. Lorsque vous vous déplacez dans votre espace, les widgets restent figés à leur position. Même si un widget est loin sur un mur de l’autre côté de la pièce, il reste visible. Tout comme les objets physiques réels, les widgets plus éloignés sont plus petits et plus difficiles à voir. Contrairement aux objets physiques, les widgets de visionOS peuvent s’adapter en fonction de leur distance grâce à une nouvelle API LevelOfDetail. Voyons comment ajouter levelOfDetail au widget de suivi de ma consommation de caféine.

Voici le widget qui affiche ma consommation totale de caféine pour la journée, la dernière boisson consommée, ainsi qu’un bouton utile pour ajouter une autre boisson au journal. Je voudrais que, lorsque ce widget est loin de moi, la valeur de la consommation totale de caféine soit plus grande et plus facile à lire. J’aimerais aussi masquer le bouton, qui sera plus difficile à utiliser plus loin. Voici mon widget de suivi de la consommation de caféine. Je veux changer la taille de la vue TotalCaffeineView, et afficher ou masquer sous certaines conditions LogDrinkView en bas de l’écran. Commençons par ajouter cette propriété d’environnement, levelOfDetail, à ma vue. levelOfDetail peut avoir l’une des deux valeurs suivantes. Default est le niveau de détail normal attendu des widgets. Sur visionOS, les widgets s’affichent avec le niveau de détail par défaut lorsqu’ils sont à une distance confortable. Si le widget est physiquement assez éloigné, le niveau de détail passe à .simplified, ce qui permet d’afficher une représentation plus simple et plus facile à voir du widget. J’ajoute cette condition à la vue LogDrinkView afin qu’elle ne s’affiche que si levelOfDetail est .default. Mettons maintenant à jour la quantité de caféine.

La vue de la consommation totale de caféine affiche le titre et la quantité totale de caféine mise en forme. Commençons par ajouter la variable d’environnement, LevelOfDetail, à ma vue. Pour que la taille augmente, je remplace sous certaines conditions la police de la quantité de caféine de .title à .largetitle en fonction du niveau de détail.

Désormais, chaque fois que le widget est suffisamment éloigné, il passera à une version simplifiée et plus facile à voir. Tout comme les changements de chronologie de votre widget, les changements de niveau de détail s’animent également. Pour déterminer quand personnaliser le style spatial et pour en savoir plus sur les recommandations sur le niveau de détail et d’autres considérations sur l’intégration des widgets dans cette nouvelle plate-forme, consultez « Design widgets for visionOS ». Parlons maintenant des widgets et des activités en temps réel qui apparaissent dans votre véhicule sur CarPlay. Dans CarPlay Ultra, les widgets apparaissent dans une ou plusieurs piles à gauche du tableau de bord. Depuis iOS 26, cette fonctionnalité est désormais disponible sur tous les véhicules CarPlay. Les widgets peuvent être configurés dans l’app Réglages sous CarPlay. Dans CarPlay, un accès visuel rapide à l’information, la grande typographie et la lisibilité permettent de lire facilement le widget sur l’écran de la voiture. Pour ce faire, CarPlay affiche les widgets en mode StandBy, en utilisant la famille systemSmall en mode pleine couleur avec l’arrière-plan du widget supprimé. Les interactions avec les widgets sont possibles sur les écrans tactiles. Utilisez le simulateur CarPlay disponible sur le site des développeurs pour tester le widget. Pour plus d’astuces sur la façon d’adapter un widget pour une présentation StandBy, reportez-vous à la rubrique « Bring Widgets to New Places » de la WWDC 23. Les activités en temps réel peuvent également être affichées sur l’écran d’accueil de CarPlay. Par défaut, les vues LeadingView et TrailingView de la fonctionnalité Dynamic Island des activités en temps réel s’affichent. Ici, je peux suivre en direct l’état de ma commande de café sur CarPlay. C’est un bon début, mais avec juste un peu plus de code, je peux l’améliorer encore. Voici le code de mon activité en direct. Actuellement, mes vues LeadingView et TrailingView sont affichées. Pour personnaliser cette présentation d’activité en direct pour CarPlay, j’ajoute le modificateur supplementalActivityFamilies transmettant l’argument .small à ActivityConfiguration. Désormais, au lieu d’utiliser les vues LeadingView et TrailingView, CarPlay affiche ma vue ActivityView, la même que celle utilisée sur l’écran verrouillé de l’iPhone. Pour certaines activités en temps réel, cela peut sembler génial, mais dans mon cas, il y a tellement de contenu qu’une partie est tronquée. Heureusement, je peux personnaliser ma vue.

Voici ActivityView. Ajoutons-y la variable d’environnement activityFamily. Dans le corps de ma vue, je peux afficher conditionnellement un contenu différent ou ajuster la mise en page pour offrir une expérience optimale. Lorsque activityFamily est .small, la vue des commandes du magasin est optimisée pour une mise en page plus petite. Sinon, j’affiche la vue des commandes par défaut. Avec juste un petit peu plus de code, mon activité en direct a fière allure dans CarPlay. Un coup d’œil suffit pour voir dans combien de temps ma commande sera prête. En adoptant supplementalActivityFamily, j’ai aussi considérablement amélioré l’apparence de mon activité en direct sur une Apple Watch jumelée. Votre app iPhone fait le nécessaire automatiquement, sans avoir besoin d’une app watchOS supplémentaire. Pour découvrir comment mettre en valeur une activité en direct dans le défilement intelligent sur watchOS, consultez la section « Design Live Activities for Apple Watch ». Et consultez la section « Turcharge your app for CarPlay » pour savoir comment accélérer vos widgets dans CarPlay. CarPlay n’est pas le seul nouvel espace possible pour les activités en temps réel. Les activités en temps réel provenant d’un iPhone jumelé apparaissent désormais dans macOS Tahoe. Tout comme dans Dynamic Island sur iPhone, mon activité en direct de suivi des commandes de café présente les vues LeadingView et TrailingView dans la barre de menus. Lorsque l’activité en direct est sélectionnée, la présentation de l’écran verrouillé de l’iPhone apparaît. Cliquez sur la présentation de l’écran verrouillé pour lancer l’app associée à l’aide de la mise en miroir de l’iPhone. Les activités en temps réel sur macOS peuvent être fournies par les iPhone dotés d’iOS 18 ou version ultérieure. Aucun changement de code n’est requis. Comme les widgets de l’iPhone sur macOS, ils prennent en charge les interactions et les liens profonds. Abordons les nouveaux emplacements des commandes sur macOS et watchOS. Sur macOS, les commandes peuvent être fournies par des apps s’exécutant sur Mac, qu’elles soient créées avec le SDK macOS, Catalyst ou à partir d’apps iOS s’exécutant sur des Mac équipés d’une puce Apple. Les commandes peuvent être ajoutées dans le centre de contrôle. Les petites, moyennes et grandes présentations disponibles sur iOS peuvent également être configurées sur macOS. Les commandes peuvent aussi être placées directement sur la barre de menus. Maintenant que j’ai ajouté une commande de suivi de la consommation de café à mon app sur macOS, je peux mettre à jour les boissons consommées directement depuis la barre des menus. Dans watchOS 26, les commandes peuvent apparaître à trois endroits. Elles peuvent être configurées dans le centre de contrôle, accessible depuis le bouton latéral. Les commandes peuvent également être exécutées en appuyant sur le bouton Action de l’Apple Watch Ultra. Elles peuvent aussi être configurées dans le défilement intelligent, où elles apparaîtront aux côtés d’autres widgets affichant le symbole, le titre et la valeur actuelle de la commande. Les commandes peuvent être fournies depuis une app watchOS ou iPhone sur un appareil jumelé. Pour obtenir un guide complet sur la création des commandes, reportez-vous à la rubrique « Extend Your App’s Controls Across the System » de la WWDC24. Voyons maintenant les widgets de pertinence dans la pile de défilement intelligent dans watchOS 26. J’ai ajouté un widget à l’app de suivi de la consommation de caféine sur watchOS afin de savoir quand mes cafés préférés offrent des happy hours à moitié prix. Il y a deux choses que j’aimerais améliorer avec mon widget. Tout d’abord, comme je suis les happy hours de plusieurs cafés, leurs happy hours se chevauchent souvent. Le contenu de mon widget dans le défilement intelligent est donc assez exigu. Deuxièmement, les happy hours ont tendance à avoir lieu à peu près au même moment. En dehors de ces horaires, mon widget n’est donc pas très utile. J’aimerais que le widget happy hours n’apparaisse dans le défilement intelligent que s’il est pertinent et affiche des informations plus détaillées pour chaque évènement actif. C’est ce que permettent de faire les widgets de pertinence de watchOS 26. Voyons comment configurer mes happy hours en tant que widget de pertinence. Pour définir un widget de pertinence, créez un type de widget et, au lieu de StaticConfiguration ou AppIntentConfiguration, utilisez RelevanceConfiguration. Comme pour les autres configurations, il faut une chaîne kind, un objet fournisseur et une fermeture pour transformer votre entrée personnalisée en vue SwiftUI. Le type de fournisseur est RelevanceEntriesProvider. Les méthodes d’espace réservé et de pertinence sont similaires à celles de TimelineEntriesProvider. Pour le placeholder, je peux renvoyer une entrée simple à afficher pendant la préparation de mon contenu. Pour la pertinence, je récupère d’abord une collection d’objets de configuration que j’ai définis.

Pour mon widget happy hours, une configuration est pertinente entre l’heure de début et de fin de cet happy hour. Je définis donc l’attribut de pertinence avec ce contexte en utilisant l’intervalle de date pour chaque happy hour. J’implémente ensuite la méthode d’entrée. Contrairement à un widget Timeline, RelevanceEntriesProvider ne fournit qu’une seule entrée pour une configuration. J’ai toutes les données dont j’ai besoin pour cette entrée dans ma configuration, les données du magasin et la plage horaire de l’happy hour. Je peux donc la créer immédiatement. Si j’avais besoin d’autres données ou ressources, je pourrais les récupérer ici, car cette méthode est marquée async. Maintenant que mon widget de pertinence est configuré, mon widget happy hours ne s’affiche dans le défilement intelligent que lorsqu’il est pertinent. De plus, si j’ai plusieurs configurations pertinentes en même temps, je peux voir plusieurs instances de mon widget dans le défilement intelligent. Les widgets de pertinence sont une nouvelle fonctionnalité puissante de watchOS 26, qui permet d’associer directement le contenu d’un widget à sa pertinence. Ces widgets sont très utiles seuls ou en complément des widgets existants basés sur la chronologie. Pour en savoir plus sur les widgets de pertinence, explorez « What’s new in watchOS 26 » avec Anne. Comme les widgets peuvent maintenant apparaître à tant d’endroits et sur tant de plates-formes, je voudrais qu’ils restent à jour où qu’ils soient. J’ai récemment ajouté un serveur afin que mes données sur la caféine consommée restent synchronisées sur tous mes appareils. Voyons quelles options sont disponibles pour actualiser mon widget, à commencer par ses rechargements programmés. Sur ce schéma, à gauche, j’ai bundle d’app, qui contient mon app et mon extension Widget. Sur le côté droit, j’ai une boîte représentant WidgetKit. Lorsqu’un widget est configuré sur un appareil, par exemple, sur l’écran d’accueil de l’iPhone, ou sur un cadran de montre, WidgetKit demande une chronologie à l’extension Widget. L’extension répond avec une chronologie de widget, qui inclut TimelineReloadPolicy. WidgetKit l’utilise pour déterminer la date et l’heure suivantes auxquelles recharger ce widget. L’utilisation de TimelineReloadPolicy est une excellente option pour les widgets qui doivent être mis à jour à intervalles réguliers, tels qu’un widget qui affiche les horaires d’un café, un widget météo ou un widget boursier. Le rechargement programmé de la chronologie est planifié par le système pour aider à maintenir les performances et la durée de vie de la batterie.

L’API WidgetCenter est une autre option disponible pour les apps. Dans une app, si une modification de données a lieu et doit être reflétée dans son widget, la méthode reloadAllTimelines ou reloadTimelines(ofKind:) de WidgetCenter peut être appelée. Cela indique à WidgetKit que le contenu du widget est obsolète et doit être rechargé. WidgetKit demande ensuite une chronologie à l’extension widget pour mettre à jour le widget. C’est une excellente option si le contenu du widget change principalement dans l’app, comme la mise à jour d’un journal des cafés consommés, la modification d’une note ou la désactivation d’un rappel. Étant donné que l’app est en cours d’exécution lorsque cette API est appelée, le système ne planifie pas cette demande. Mais que se passe-t-il si un changement de données se produit sur le serveur ou sur un autre appareil ? C’est là qu’interviennent les mises à jour push des widgets. Un serveur de suivi des modifications des données peut envoyer une notification push aux APN, qui indique à WidgetKit de recharger les widgets de cette app. Comme pour les autres mises à jour, WidgetKit demandera alors une chronologie mise à jour à partir du widget. Les mises à jour push des widgets sont un excellent outil si les données peuvent changer à l’extérieur de cet appareil. Tout comme TimelineReloadPolicy, les mises à jour des notifications push des widgets sont planifiées pour préserver les performances et la durée de vie de la batterie. Grâce à cette fonctionnalité, les widgets disposent désormais d’une suite complète d’options de recharge pour gérer une variété de situations. Ces options ne s’excluent pas mutuellement. Certains widgets peuvent vouloir utiliser deux de ces options, voire les trois. Grâce aux mises à jour push des widgets, le journal de suivi de la consommation de caféine de mon widget reste à jour sur tous les appareils, que j’utilise mon app iPad, mon widget Vision Pro ou la commande macOS de la barre des menus. Voyons comment ajouter cette fonctionnalité à mon widget. Je vais créer un WidgetPushHandler et l’ajouter à la configuration de mon widget, puis j’ajouterai le droit de notification push à l’extension Widget et je créerai une demande push de mise à jour du widget. Tout d’abord, je crée une structure conforme au protocole WidgetPushHandler. Ce type est la façon dont nous vous informons en cas de changement de votre jeton push ou de l’ensemble des widgets configurés. Utilisez la méthode pushTokenDidChange pour envoyer vos informations de jeton push et de widget au serveur. Ensuite, je dois mettre à jour la configuration de mon widget. Voici la configuration de mon widget de suivi de la consommation de caféine. J’ajoute le modificateur pushHandler à mon widget pour activer sa prise en charge des notifications push. Pour ce modificateur, je renseigne le type pushHandler de widget que j’ai implémenté.

Enfin, dans Xcode, j’accède à l’onglet Signing and Capabilities de mon extension de widget. J’y ajoute le droit de notification push afin qu’il puisse communiquer avec les APN. Maintenant que mon widget est configuré pour les mises à jour push, voyons comment envoyer une notification push de mise à jour de widget. Pour mettre à jour votre widget via une notification push, envoyez une requête HTTPS POST au serveur Apple Push. Utilisez le jeton push de widget fourni dans votre WidgetPushHandler comme dernière partie du chemin d’accès de la requête. Pour vos en-têtes, utilisez les widgets apns-push-type et définissez l’en-tête apns-topic à l’aide de l’identifiant de lot de l’app, avec le suffixe .push-type.widgets. Dans le corps de votre demande dans le dictionnaire aps, définissez la valeur de la clé de changement de contenu sur true. Pour en savoir plus sur les notifications push, consultez le « Push Notifications Primer ». Consultez aussi « Meet Push Notifications console » pour voir comment tester facilement les demandes de notification push. Les mises à jour push pour les widgets permettent d’actualiser le contenu des widgets, mais elles sont effectuées de manière pertinente et ne remplacent pas directement d’autres expériences de notification. Si vous avez une mise à jour urgente ou importante à afficher, envoyez une notification à l’utilisateur. En cas de mises à jour régulières pendant une période limitée, comme une commande de boissons, des résultats sportifs ou des informations de vol, utilisez une activité en direct. Utilisez les mises à jour push des widgets pour maintenir leur contenu à jour. Les mises à jour push des widgets sont disponibles sur toutes les plates-formes qui prennent en charge les widgets. L’envoi d’une notification push de widget met à jour tous les widgets activés pour le push configurés sur l’appareil. N’oubliez pas que ces rechargements de widgets sont planifiés. Essayez de limiter le nombre de mises à jour push, par exemple en réduisant leur nombre sur votre serveur. Pendant le développement et le test, utilisez le mode développeur WidgetKit dans Réglages pour ignorer les planifications de mise à jour push et de rechargement de votre app. Nous avons vu beaucoup de choses aujourd’hui. Prenez le temps d’explorer ces nouvelles plates-formes pour les widgets. Regardez quelques-unes des vidéos énumérées précédemment pour vous inspirer. Assurez-vous que vos widgets ont fière allure sur iOS et macOS. Enfin, si les données de vos widgets peuvent être mises à jour à partir de sources externes ou d’autres appareils, envisagez d’ajouter des notifications push pour les tenir à jour. Je suis fasciné par ces nouvelles fonctionnalités et tous ces nouveaux emplacements. J’ai hâte de profiter de vos widgets partout où j’irai. Merci de votre attention !