image

TechnIKO #2 Migration UIWebview vers WKWebview

image
Équipe iOS
23 avril 2020

UIWebview vs WKWebview

UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte et certaines informations comme celles par exemple liées au compte utilisateur.

Avec iOS 8 Apple a mis à disposition un nouveau composant plus complet appelé WKWebview.

La principale différence entre ces deux composants c’est la performance. WKWebview charge les pages web plus rapidement et plus efficacement que UIWebview car il est exécuté dans un processus distinct de l’application en s’appuyant sur les optimisations JavaScript de Safari.

Pourquoi migrer vers WKWebview ?

Début 2020, Apple a signalé par email que le composant UIWebview ne sera plus autorisé dans les applications. Ils refuseront toute publication d’application contenant des UIWebview.

Deprecated API Usage – Apple will stop accepting submissions of apps that use UIWebView APIs starting from December 2020 .

Remplacer le composant dans l’interface

UIWebview étant un composant UIKit, il suffisait de drag & drop le composant dans votre storyboard, définir les contraintes puis le delegate et c’était réglé.

Avec WKWebview, si votre projet est toujours compatible pour les systèmes d’exploitation inférieur à iOS 11 vous ferez face au même problème que nous :

Il vous faudra intégrer votre WKWebview en code.

Importez Webkit

import WebKit
#import <WebKit/WebKit.h>

Ajoutez ce code dans le viewDidLoad

let webConfiguration = WKWebViewConfiguration()
let frame = view.bounds
let webView = WKWebView(frame: frame, configuration: webConfiguration)
webView.navigationDelegate = self
webView.clipsToBounds = true
view.addSubview(webView)

let urlRequest = URLRequest(url: url)
webView.load(urlRequest)
WKWebViewConfiguration *webConfiguration = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:webConfiguration];
webView.navigationDelegate = self;
webView.clipsToBounds = true;
[self.view addSubview:webView];

NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

Définissez les contraintes de votre webview (nous vous conseillons d’utiliser une librairie afin de simplifier l’écriture des contraintes en code, nous utilisons ***Masonry***)

webView.mas_makeConstraints { make in
		_ = make?.edges.equalTo()(self.view)
}
[webView mas_makeConstraints:^(MASConstraintMaker *make) {
		make.edges.equalTo(self.view);
}];

Les delegates

Puisqu’il est parfois compliqué de trouver l’équivalent des méthodes qu’on utilise habituellement avec UIWebview voici une liste qui pourra vous aider.

Méthode permettant de détecter le chargement de la UIWebview.

func webViewDidStartLoad(_ webView: UIWebView)
-(void)webViewDidStartLoad:(UIWebView*)webView;

Devient pour une WKWebview.

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!)
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;

Méthode permettant de détecter que la UIWebview a terminé de charger son contenu.

func webViewDidFinishLoad(_ webView: UIWebView)
- (void)webViewDidFinishLoad:(UIWebView*)webView;

Devient pour une WKWebview.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;

Méthode permettant de détecter que le chargement a échoué.

func webView(_ webView: UIWebView, didFailLoadWithError error: Error)
-(void)webView:(UIWebView*)webView didFailLoadWithError:(NSError*)error;

Devient pour une WKWebview

//Invoked when an error occurs during a committed main frame navigation.
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error)
//Invoked when an error occurs while starting to load data for the main frame.
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error)
//Invoked when an error occurs during a committed main frame navigation.
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
//Invoked when an error occurs while starting to load data for the main frame.
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;

Méthode permettant de définir une action en fonction des paramètres présent dans l’url ou d’intercepter des ancres.

func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebView.NavigationType) -> Bool {
	return true //or false
}
-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
	return true //or false
}

Devient pour une WKWebview

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
		decisionHandler(.allow) //or decisionHandler(.false)
}
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
		decisionHandler(WKNavigationActionPolicyAllow); //or decisionHandler(WKNavigationActionPolicyCancel);
}

Les requêtes POST

Afin d’appeler une requête en POST avec une WKWebview, il vous faudra préciser les Headers dans votre requête pour ne pas avoir une page blanche.

var request = URLRequest(url: url)
request.httpMethod = "POST"
            
let params = "your_query_params_as_string"
request.httpBody = params.data(using: .utf8)
request.addValue("application/x-www-form-urlencoded", forHTTPHeaderField: "Content-Type")
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:self.initialUrl];
[request setHTTPMethod:@"POST"];

NSString *params = @"your_query_params_as_string"
[request setHTTPBody:[params dataUsingEncoding:NSUTF8StringEncoding]];
[request setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];

N’hésitez pas à nous contacter si vous souhaitez en savoir plus ou mettre à profit nos compétences pour réaliser votre projet.

image
image
Jason Dejaégère
27 novembre 2020
UI design

Tendances et inspirations UI du moment dans le monde digital #1

Bien le bonjour ! 🖖 C’est avec grand plaisir qu’IKOMOBI vous présente sa nouvelle série mensuelle. Vous vous demandez de quoi ça parle ? Et bien, c’est tout simple. Cette série est un condensé des sites ou applications qui ont marqué, interpelé voire impressionné les membres du studio design. Une sélection d’une dizaine d’interfaces innovantes, […]
image
image
Carl-Stephan Parent
26 novembre 2020
Marketing digital

3 avantages marketing incontournables qu’offre une application mobile en 2020.

Traditionnelles, ou bien tout ou partie digitales, aucune organisation n’échappe aujourd’hui à la question de la place qu’il convient d’octroyer au mobile au sein de sa stratégie digitale. Depuis maintenant plus de dix ans, le champ des possibles offert par les applications mobiles n’a eu cesse de s’agrandir, offrant toujours plus d’opportunités de créer un […]
image
image
Carl-Stephan Parent
26 novembre 2020
Développement application mobile

Avec MAUI, Microsoft achève l’intégration de son framework de développement d’applications mobiles à la plateforme .NET

Xamarin.Forms évolue en .NET Multi-platform App User Interface (MAUI). Cet article nous donne tout d’abord l’opportunité de revenir sur l’histoire de Xamarin et les principaux points forts du framework mobile de Microsoft. Nous vous présentons les changements prévus prochainement et les raisons de cette évolution stratégique pour l’éditeur de Redmond. De Xamarin à Xamarin.Forms : […]
image
image
Bérengère Noël
20 octobre 2020
UX design

Comment le design UX permet de transformer le parcours client pour répondre aux nouvelles attentes des consommateurs dans le secteur du m-commerce alimentaire ?

Concevoir des parcours clients percutants pour répondre aux nouvelles attentes des consommateurs Un grand groupe européen dans le domaine du retail alimentaire a fait appel au Studio UX Design d’IKOMOBI afin d’être accompagné dans la conception d’une nouvelle application mobile m-commerce. À l’heure du tout digital, les enseignes redoublent d’efforts pour répondre aux nouvelles attentes […]
image
image
Carl-Stephan Parent
24 septembre 2020
UX design

Transformation digitale, amélioration continue et application mobile

Le précédent numéro d’Ikonnect, la newsletter mensuelle d’Ikomobi, vous a donné l’opportunité de découvrir une nouvelle application mobile conçue et réalisée par les pôles Design UX et Android. Le succès rencontré par cette app, dont la vocation principale est de faciliter la gestion des rayons de magasins, a encouragé la direction de Cora à poursuivre […]
image
image
Carl-Stephan Parent
27 août 2020
IKOMOBI

Une app pour donner un vrai coup de pouce aux collaborateurs et mieux gérer les rayons du magasin. Vous êtes un retailer et vous en rêvez ? Cora et Ikomobi l’ont fait !

Pour faire face aux services popularisés par les géants du e-commerce (on pense à Amazon notamment avec Amazon Fresh ou Prime Now) ou les nouvelles enseignes spécialisées, le magasin traditionnel n’a pas d’autres choix que de se réinventer pour proposer une expérience fortement teintée de digital en phase avec les attentes des consommateurs d’aujourd’hui. Un […]
image
image
Équipe Android
16 juillet 2020
Développement application mobile

Faut-il migrer vers Jetpack / Android X ?

Pour assurer la rétrocompatibilité des applications mobiles avec le système Android, Google s’appuyait sur une bibliothèque de composants intitulée Android Support. La firme de Mountain View invite désormais à migrer les applications mobiles Android vers Jetpack et ses bibliothèques Android X.  Pourquoi faut-il procéder à cette migration dans les meilleurs délais ? À compter de […]
image
image
Équipe iOS
16 juillet 2020
Développement application mobile

TechnIKO #3 : Comment tester les push iOS simplement ?

Tester les notifications push sur iOS peut être un exercice très fastidieux : Configurer l’application pour qu’elle accepte les push Créer les certificats de push en conséquence Les uploader sur la plateforme utilisée pour gérer l’envoi des push (par exemple Accengage) Trouver le token de son device et créer un segment avec Configurer la push […]
image
image
Carl-Stephan Parent
16 juillet 2020
UX design

Le pôle Design UX d’Ikomobi imagine les nouveaux parcours de souscription online pour une enseigne spécialiste du crédit à la consommation

Proposer des parcours clients efficaces pour se distinguer au sein d’un marché très concurrentiel  Le crédit à la consommation est un marché fortement concurrentiel en France et à l’international. Il est constitué des banques de détail traditionnelles, de leurs filiales spécialisées (BNP Paribas Personal Finance, BPCE financement, Franfinance…) et des banques en ligne qui se […]
image
image
IKOMOBI
25 juin 2020
Développement application mobile

Click and collect : Ikomobi conçoit et réalise en un temps record, une application mobile pour l’enseigne de restauration Fée maison

Comme vous le savez, le click and collect (ou retrait sur point de vente) c’est ce nouveau parcours malin qui permet de passer commande depuis un site e-commerce, un e-shop dédié ou bien depuis une application mobile, puis de récupérer ses achats à un créneau horaire donné. L’intérêt suscité par ce nouveau service a été […]
image
image
Jason Dejaégère
25 juin 2020
Développement site web

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la […]
Message bien envoyé !