Compatibile con Xcode 8

Tutorial WebView con il linguaggio Swift. Crea il tuo Browser personale

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Come posso presentare un contenuto web nella mia applicazione iOS? Come posso mostrare una pagina web senza aprire direttamente safari?

La risposta è nella WKWebView. La WKWebView (WebKitWebView) è l’oggetto da utilizzare per la visualizzazione di un contenuto web. É stato introdotto da Apple nella versione di iOS 8 e nasce come sostituto dell’UIWebView.

Quindi se sei un nuovo programmatore, oppure uno in cerca di aggiornamenti, Apple esorta a trasformare tutte le vecchie UIWebView nelle corrispettive e aggiornate WKWebView.

Quasi tutte le applicazioni permettono di visualizzare una pagina internet. Alcune utilizzano questo sistema per visualizzare la versione mobile del sito web e quindi camuffarla come applicazione nativa iOS (metodo ormai caduto in disuso e non più condiviso). Altre app, invece, utilizzano il WKWebView per farti cercare informazioni nel web (pensa ai browser personali) ed altre ancora per mostrarti delle pagine internet specifiche.

wkwebview-linguaggio-swift-e-google-ricerca

Pensa, ad esempio, all’applicazione di Facebook. Aprire un link che ha condiviso un tuo amico, o una pagina che segui, aprirà una finestra che scorre dal basso verso l’alto in cui viene visualizzata la pagina web. Il tutto inglobato dentro la stessa applicazione e grazie all’utilizzo delle WKWebView.

La WKWebView va benissimo per qualsiasi esigenza che riguarda la visualizzazione di un contenuto che si trova nel web (persino eseguire un Javascript). Però, a differenza della UIWebView che nasceva come oggetto standard presente nell’Object Library di Xcode, la WKWebView deve essere interamente creata da codice. Ma non preoccuparti, sono pochissime righe di codice.

In poche parole, in questo tutorial imparerai a creare il tuo Browser personale utilizzando la WKWebView con il linguaggio SwiftNel particolare, imparerai a:

  1. Creare un’applicazione che al suo interno contiene una WKWebView, dove verrà mostrato il contenuto web.
  2. Aggiungere una barra di ricerca in cui l’utente potrà inserire l’URL del sito da visualizzare.
  3. Aggiungere una ProgressView per la visualizzazione dello stato di caricamento di una pagina.

Se sei uno sviluppatore di vecchia data, avrai notato che con iOS 9 è stato bloccato l’accesso ai siti che non implementano il protocollo HTTPS. In questo tutorial vedrai come risolvere e bypassare il blocco al collegamento ad un sito senza protocollo HTTPS.

Pronto ad utilizzare la tua prima WKWebView con il linguaggio Swift? Cominciamo!

Interfaccia Applicazione

Inizia creando un nuovo progetto iOS Single ViewApri Xcode, vai su File\New\Project… e, nella finestra che si apre, seleziona iOS\Application\Single View Application, premi Next e poi Create. Come nome dell’applicazione metti “Simple WebView” ed assicurati di selezionare il linguaggio Swift

Entra nel Main.storyboard. Seleziona il ViewController, vai nel menu di Xcode in alto e seleziona Editor\Embed In\NavigationController. In questo modo abiliterai la navigazione tra diversi ViewController e l’apparizione della NavigationBar.

Schermata 2015-11-02 alle 12.45.30

Ti ho fatto fare questo passaggio perché, generalmente, la visualizzazione di una WKWebView avviene in risposta ad un evento generato in un altro ViewController (ad esempio una tabella con i link delle pagine più viste). Quindi immagina questo progetto come una parte di uno più complesso.

Se ti va, quando hai finito questo tutorial, puoi integrare questa app con la lettura di un feed RSS di un sito web.

Nel tuo ViewController dovrebbe essere comparsa la NavigationBar. Dentro questa devi aggiungere, trascinandolo dall’Object Library, una UITextField, da mettere al centro della NavBar, una ProgressView da posizionare subito sotto la NavigationBar ed una UIView da mettere immediatamente sotto:

wkwebview-ed-interfaccia

Dalla TextField inserirai il link o url del sito da visualizzare e grazie alla ProgressView vedrai lo stato di caricamento del sito.

Ma dove verrà mostrata la pagina web? dov’è la WKWebView?

Come contenitore della pagina web da caricare utilizzerai la UIView che ti ho fatto inserire.

I vincoli di Auto Layout

Per fare in modo che l’App abbia un layout adattabile, cioè venga visualizzata correttamente in tutti i dispositivi iOS, devi obbligatoriamente sistemare i vincoli di Auto Layout.

vincoli-auto-layout-e-wkwebview

Se stai avendo difficoltà già da adesso a seguire questo tutorial, il mio consiglio è quello di partire da qualcosa di più semplice come questo tutorial o, di cominciare con il piede giusto, seguendo il corso di sviluppo applicazioni per iOS con il linguaggio Swift.

IBOutlet

Con l’interfaccia ci siamo quasi.

Prima di sistemare il layout della TextField, che può essere fatto solo da codice, è necessario creare le IBOutlet tra gli oggetti. Apri l’Assistant Editor, seleziona la UITextField e, premendo CTRL+Click, trascina la freccia verso il codice. Crea una connessione IBOutlet e rinominala in myTextField

Lo stesso procedimento devi farlo per la ProgressView, che chiamerai myProgressView e per la UIView che chiamerai myView:

Adesso, per sistemare la grandezza della TextField, nel viewDidLoad assegnagli le stesse dimensioni, in larghezza, della view dell’applicazione:

WKWebView con il linguaggio Swift

Il primo step da fare è quello di importare il framework WebKit che permette, tra le tante cose, di poter sfruttare le nuove tecnologie per la navigazione web come il WKWebView.

Vai nel file ViewController.swift e, sotto l’import dell’UIKit, importa il WebKit:

Una volta importato il framework WebKit, devi creare una variabile di tipo WKWebView dove poter istanziare l’oggetto omonimo. Ti consiglio di dare una lettura alla referenza Apple: WKWebView Apple Reference.

Nel metodo viewDidLoad devi instanziare l’oggetto, assegnandogli le dimensioni della finestra del ViewController (cioè le dimensioni del dispositivo in uso) e poi passarlo alla proprietà myView, utilizzando il metodo addSubviews per innestare la webview dentro la finestra myView:

Per poter caricare un url, i passaggi da fare sono i seguenti:

  1. Definire un oggetto URL partendo da una stringa.
  2. Creare un oggetto URLRequest a cui passare l’oggetto URL.
  3. Fare performare la request alla webView.

Dato che sono operazioni sempre uguali, crea la seguente funzione (aggiungila dentro la classe ViewController):

Adesso è arrivato il fatidico momento. Nel metodo viewDidLoad, chiama la funzione loadURL, passandogli il sito web della Apple:

Ti ricordo che il metodo viewDidLoad() viene caricato prima della visualizzazione dell’interfaccia. Quindi, se vuoi impostare un URL di default che venga visualizzato quando l’applicazione viene aperta, devi modificare il codice nel viewDidLoad.

Se avvii l’applicazione, dovresti vedere il sito web di apple:

tutorial-webview-con-il-linguaggio-swift

ProgressView e caricamento

Per rendere l’applicazione più responsive, ti ho fatto aggiungere una progressView per far capire all’utente lo stato di caricamento della pagina web.

Lo stato d’avanzamento della progressView può essere aumentato o ridotto, modificando l’attributo progress. La barra è completa se ha valore 1 e vuota se ha valore 0. Un metodo, chiamato setProgress(value:, animated:) permette di aumentare il valore dell’attributo progress in maniera animata.

Il problema è sincronizzare lo stato di caricamento della pagina web con il valore della progressView.

Fortunatamente, la WKWebView, ha un attributo chiamato estimatedProgress che calcola lo stato di caricamento della pagina. Se la pagina è caricata allora avrà valore 1, 0 altrimenti. I valori intermedi rappresentano il caricamento della pagina. Quindi, se impostiamo il valore del progress, della UIProgressView, uguale all’estimatedProgress, della WKWebView, riusciamo a mostrare lo stato di caricamento della pagina.

Vediamo come fare!

Prima della funzione loadURL, aggiungi:

Un observer, come la stessa parola suggerisce, osserva il comportamento di una proprietà dell’oggetto in cui viene chiamato. Nel nostro caso, stiamo osservando il comportamento della proprietà estimatedProgress che è quella che calcola il caricamento della pagina web.

Infine, nella classe ViewController, aggiungi il metodo per il controllo degli Observer:

Well done! Adesso dovresti vedere lo stato d’avanzamento della WKWebView:

Ricerca da TextField

Ci siamo quasi! l’ultimo passaggio da fare è quello di permettere il collegamento ad un sito web direttamente dalla TextField. Per farlo, apri l’Assistant Editor, seleziona la TextField e, tenendo premuto CTRL+Click Sinistro, crea una IBAction con evento Did End On Exit chiamata textField_DidEnd

Non ti ricordi come si fa? Vatti a rinfrescare la memoria: La prima applicazione iOS.

A questo punto, non devi far altro che richiamare il metodo loadURL dalla IBAction passandogli il text della TextField:

Ed anche questa è fatta!

Nel caso volessi utilizzare la textField per eseguire ricerche su Google, devi modificare la funzione loadURL o aggiungerne un’altra.

Io preferisco aggiungerne un altra. Poi in base alla tipologia di testo scritto nella textField, se contiene il www o meno, farò partire una delle due funzioni.

Eccoti lo snippet di codice Swift per la ricerca su google:

Per la ricerca su google, bisogna utilizzare l’url:

Dove searchString è la frase che stai ricercando su google. Per ricerche formate da più parole, bisogna sostituire lo spazio tra le parole con il simbolo +.

Il metodo components divide la stringa, in base allo spazio vuoto tra le parole, in un array). Il codice è commentato e spiega il procedimento per la conversione. Ed il metodo joined unisce gli elementi della stringArray in una stringa, separando le parole con il simbolo +.

Se adesso volessi utilizzare la barra di ricerca, sia per cercare su google che per collegarci ad un sito web, dovresti fare un po’ di refactoring.

Dovresti mettere un controllo sul testo inserito sulla textField. Se l’utente inserisce qualcosa che comincia con www allora vuol dire che sta provando a collegarsi ad un sito. In tutti gli altri casi, vuole cercare su google.

Quindi, modifica la IBAction con le seguenti funzioni:

Testiamo la ricerca sul web ed il comportamento della WKWebView:

wkwebview-linguaggio-swift-e-google-ricerca

Sbloccare la connessione non sicura verso siti HTTP

Con iOS 9, Apple ha deciso di restringere le connessioni verso i servizi che non permettono una comunicazione sicura tramite protocollo HTTPS. Per farla breve, non è più permesso accedere ai siti che non cominciano per http:// ma solo per quelli con https://.

Ovviamente, non tutti i siti utilizzano ancora il protocollo HTTPS. Sia perché non c’è necessità e motivo, in genere vengono utilizzati dagli ecommerce e dai siti che conservano dati importanti, e sia per il costo non indifferente.

Apple è stata sempre lungimirante in questo. Il motivo, almeno secondo me, è che forse vuole spingere gli sviluppatori a convertire i propri servizi web, come i siti web da cui recuperano le informazioni, in piattaforme più sicure.

Fatto sta che, fortunatamente, è possibile eludere questo blocco e quindi permettere l’utilizzo di connessioni non sicure nella propria applicazione. Il seguente paragrafo si applica anche ad altre situazioni.

Ad esempio, nel tutorial del recupero di un JSON per l’app del meteo, abbiamo sbloccato la connessione non sicura perché, se no, non eravamo in grado di recuperare le informazioni sul meteo della nostra città.

Per poter risolvere il problema, ti basta aggiungere delle piccole proprietà tra le righe del file Info.plistNel Project Navigator, clicca con il destro sul file Info.plist e seleziona Open As\Show Code:

Schermata 2015-11-03 alle 12.29.31

E prima delle due ultime righe, aggiungi:

Adesso hai veramente finito!

Conclusione e Download Progetto

Adesso hai visto quale strumento utilizzano le software house più famose per visualizzare un contenuto web all’interno delle loro applicazioni iOS.

Se sblocchi il modulo, trovi il download del progetto completo:

[sociallocker]

DropBox Download

[/sociallocker]

Buona Programmazione!

Changelog

  • 12/10/2016 – Aggiunto il changelog. Aggiornamento del tutorial per il supporto di Xcode 8 e Swift 3.0

Start typing and press Enter to search

size-class-in-xcode-con-auto-layoutMappe con il linguaggio Swift