iOS 9 Aan de slag met SFSafariViewController

Mobiele apps en het weergeven van inhoud op internet zijn nu alomtegenwoordig. Jarenlang hebben iOS-ontwikkelaars de opdracht gekregen om hun eigen internetervaring in hun app te creëren of de URL van Safari af te staan. Beide benaderingen brengen inherente nadelen met zich mee die voorheen onvermijdelijk waren.

Dat is allemaal veranderd met iOS 9 en de introductie van de SFSafariViewController klasse. Hiermee kunt u nu een volledige webbeleveniservaring in uw app bieden zonder dat u belangrijke ontwikkeltijd hoeft door te brengen.

1. Demo-overzicht

Voordat we beginnen, ga ik de aanpak uiteenzetten die ik heb genomen met de demo-app die bij deze zelfstudie hoort. Zoals je later zult zien, is er echt niet veel code nodig om de safari view controller te gebruiken. De echte waarde van de safari view controller komt van begrip wanneer om het te gebruiken en, nog belangrijker, waarom.

Opties voor het tonen van webinhoud

Vanaf iOS 9 hebben ontwikkelaars drie opties om webinhoud aan een gebruiker te tonen:

  • Safari: Gebruik Open url(_:) om de pagina binnen in safari te tonen, waardoor de gebruiker gedwongen wordt om uw applicatie te verlaten.
  • Aangepaste kijkervaring: Je kunt gebruiken WKWebView of UIWebView om helemaal vanuit het niets een browse-ervaring te creëren.
  • SFSafariViewController: Met SFSafariViewController, u kunt bijna alle voordelen van het bekijken van webinhoud in Safari gebruiken zonder gebruikers te dwingen uw app te verlaten.

Vóór iOS 9 waren de eerste twee opties de enige opties voor ontwikkelaars. Weten wanneer je het ene of het andere moest gebruiken, hing af van de context van de gepresenteerde inhoud. Tijdens het werken aan de demo-applicatie gaan we alle drie de opties gebruiken.

Nu we weten hoe inhoud kan worden weergegeven, laten we ons afvragen waarom deze in een app kan worden weergegeven. Op iOS zijn er twee belangrijke use-cases voor het bekijken van webinhoud.

  • Aangepaste webinhoud: Dit is inhoud die niet is bedoeld voor browsen. Dit kan een rapport zijn of iets dergelijks gegenereerd op basis van een API of server. Hier kijkt de gebruiker naar één stuk inhoud en doet hij niet veel anders.
  • Websites bekijken: Dit is het meest voorkomende scenario. De gebruiker moet even op internet surfen om zich aan te melden bij een service of door een website te navigeren.

Houd er ook rekening mee dat er een derde use-case is, web-gebaseerde authenticatie. Voor deze zelfstudie gaan we ons niet concentreren op dat scenario.

Aangepaste webinhoud

Als de omvang van de webervaring van uw gebruiker in uw app in de eerste use-case valt, is de safari-viewcontroller waarschijnlijk niet wat u nodig hebt. In die gevallen geeft u inhoud weer waarvan u de eigenaar en beheerder bent en die mogelijk uitgebreid moet worden aangepast.

Als u vindt dat uw app in dit scenario past, gebruik dan WKWebView. Het is de opvolger van UIWebView en bevat verschillende verbeteringen, zoals het gebruik van de Nitro JavaScript-engine. Met deze aanpak kunt u de volledige gebruikersinterface vanaf nul opbouwen. Je hebt ook andere mogelijkheden, zoals het veilig laden en gebruiken van bestanden WKWebsiteDataStore voor het bevragen van cookies.

Websites bekijken

De meerderheid van de apps hoeft echter alleen maar een algemene webbelevenis te bieden. Dit is het perfecte scenario voor de safarizichtcontroller. Vóór iOS 9 besteedden ontwikkelaars tijd aan het maken van hun eigen gebruikersinterface voor surfen op het web, wat tot problemen voor gebruikers kon leiden.

De browse-ervaring is inconsistent in verschillende apps, wat de gebruiker kan verwarren. Sommige interfaces missen mogelijk ook de dingen die gebruikers verwachten, zoals een voortgangsbalk die aangeeft hoeveel van de pagina is geladen.

Verder heb je geen toegang tot alle functies van Safari. Dit omvat de readerweergave, de iCloud-sleutelhanger voor autofill-mogelijkheden en meer. Als je die functies vóór iOS 9 wilde hebben, moest je de gebruiker de app laten verlaten door de inhoud in Safari te openen. De SFSafariViewController klas lost elk van deze problemen op.

2. Start de demo-app

Bouw en voer de demotoepassing uit om te beginnen. Je krijgt een zeer minimale gebruikersinterface te zien die uit drie opties bestaat. Elke optie komt overeen met een van de eerder genoemde methoden om webinhoud te presenteren.

3. Inhoud in Safari openen

De eerste optie die we zullen demonstreren is de meer traditionele route, die de URL afgeeft aan Safari. Open ViewController.swift en let op de urlString eigenschap bovenaan het bestand. Dit zal bepalen wat er in de komende voorbeelden wordt gepresenteerd, dus voel je vrij om het in te stellen op wat je maar wilt.

private var urlString: String = "https://google.com"

Een belangrijk ding om op te merken is dat in iOS 9 TLS 1.2 standaard wordt afgedwongen. Als de server die u probeert te bereiken dit niet ondersteunt, ziet u mogelijk de volgende fout in de console:

Er zijn manieren om dit te doen, zoals het toevoegen van een sleutel aan je apps Info.plist het dossier. Dit was een wijziging die door Apple werd aangebracht om de beveiliging rond de surfervaring op het web te vergroten. Ga verder en voeg de volgende code toe aan de openInSafari (_ :) actie:

@IBAction func openInSafari (afzender: AnyObject) let url = NSURL (string: self.urlString)! UIApplication.sharedApplication (). OpenURL (url)

Bouw en voer de app uit. Wanneer u op de bovenste knop tikt, "Openen in safari", verlaat het besturingssysteem uw app en opent de URL in Safari.

Hoewel deze optie zeker haalbaar is, hebben we de gebruiker gedwongen onze app te verlaten. Als ontwikkelaars willen we idealiter dat de ervaring binnen onze app blijft. Eén verbetering die iOS 9 met deze aanpak heeft gemaakt, is echter de kleine knop Terug linksboven:

Als u op deze knop tikt, gaat de gebruiker terug naar de app die de URL aan Safari heeft doorgegeven. Om het probleem op te lossen dat de gebruiker gedwongen wordt onze app te verlaten, gaan we verder met de volgende aanpak.

4. Inhoud in Webkit of WebView openen

We openen nu dezelfde URL in onze app. Om dit te doen, gebruiken we een ingesloten UIWebView. De logica voor deze eenvoudige webbrowser is te vinden in de CustomWebViewController klasse.

Omdat we geen van de geavanceerde functies van WebKit nodig hebben, openen we gewoon de pagina in een webweergave. Vervang de code in de klasse ViewController prepareForSegue (_: afzender :) als volgt:

override func prepareForSegue (segue: UIStoryboardSegue, sender: AnyObject?) if let navVC = segue.destinationViewController as? UINavigationController laat cwvc = navVC.topViewController als! CustomWebViewController cwvc.urlString = self.urlString

Ga je gang en start de app. Tik op de middelste knop, "Open met webview", en de pagina zou nu in de app moeten worden geladen.

Hoewel de gebruiker in de app blijft, zijn de nadelen van deze aanpak duidelijk. Zonder meer ontwikkelingswerk aan onze kant, is er geen laadindicatie, URL-adresbalk en andere dingen die gebruikers verwachten wanneer ze op internet surfen. Laten we nu het SFSafariViewController klas om die problemen op te lossen.

5. Inhoud openen in Safari View Controller

Voordat we de kunnen gebruiken SFSafariViewController klasse, we moeten importeren Safari-services. Bovenop ViewController.swift, voeg de volgende importverklaring toe onder de importverklaring voor UIKit:

importeer SafariServices

Werk vervolgens de implementatie bij van openWithSafariVC (_ :) zoals hieronder getoond:

@IBAction-func openWithSafariVC (afzender: AnyObject) let svc = SFSafariViewController (URL: NSURL (string: self.urlString)!) Self.presentViewController (svc, geanimeerd: true, completion: nil)

Start de app en tik op de onderste knop, "Openen met safari view controller", om de inhoud te zien die nu in a wordt weergegeven SFSafariViewController aanleg.

We hebben de gebruiker nu binnen onze app laten blijven en ze hebben alle voordelen van Safari. Deelbladen zijn beschikbaar via de tabbladbalk, samen met de optie om de pagina toe te voegen als favoriet of de inhoud in Safari te openen.

Er zijn een aantal interessante configuraties om van te profiteren. We kunnen bijvoorbeeld de gebruiker de browser gemakkelijk in de lezermodus laten lanceren door te passeren waar naar entersReaderIfAvailable.

@IBAction func openWithSafariVC (afzender: AnyObject) let svc = SFSafariViewController (URL: NSURL (string: self.urlString) !, enterReaderIfAvailable: true) self.presentViewController (svc, geanimeerd: true, completion: nil)

Bovendien respecteert de Safari View-controller de tintkleur. Dit maakt het gemakkelijk om de branding van uw app aanwezig te houden terwijl u toch de vertrouwde gebruikersinterface van Safari intact houdt.

Een probleem dat we echter moeten oplossen, is dat de gebruiker de view controller momenteel niet kan sluiten. Laten we dat nu oplossen.

6. SFSafariViewControllerDelegate Protocol

Als u de view controller wilt sluiten, moeten we ons houden aan de SFSafariViewControllerDelegate protocol. Open ViewController.swift en maak het ViewController klasse conform de SFSafariViewControllerDelegate protocol.

class ViewController: UIViewController, SFSafariViewControllerDelegate ...

Voeg vervolgens de volgende deelnemersmethode toe aan de ViewController klasse:

func safariViewControllerDidFinish (controller: SFSafariViewController) controller.dismissViewControllerAnimated (true, completion: nil)

Deze gedelegeerde methode wordt aangeroepen wanneer de gebruiker op de Gedaan knop in de Safari view-controller. Het moet worden gebruikt om de view controller te sluiten en terug te keren naar uw app.

Het enige dat u hoeft te doen, is onze view controller toewijzen als gedelegeerde van de Safari View-controller. Update de implementatie van de openWithSafariVC (_ :) methode zoals hieronder getoond:

@IBAction func openWithSafariVC (afzender: AnyObject) let svc = SFSafariViewController (URL: NSURL (string: self.urlString)!) Svc.delegate = self self.presentViewController (svc, geanimeerd: true, completion: nil)

Als u de app uitvoert en de Safari View-controller opent, ziet u dat u de Safari-viewcontroller nu kunt sluiten door op de knop te tikken Gedaan knop in de rechterbovenhoek.

Conclusie

De Safari View-controller is ongelooflijk eenvoudig te gebruiken. Het is zelfs een van de kleinste API's die ik heb gezien met slechts twee initializers en twee gedelegeerde methoden. Toch brengt het alle functies die gebruikers van Safari verwachten naar uw app.

Wat misschien net zo spannend is, is dat ontwikkelaars niet langer tijd hoeven te besteden aan het maken van aangepaste webbrowsers. Als u een eersteklas surfervaring op uw app wilt toepassen, neemt u enkele regels code met de SFSafariViewController klasse.