Swift-iOS-Cache WKWebView Inhalte für die offline-Ansicht

Ich weiß, ich bin spät, aber ich habe in letzter Zeit auf der Suche nach einer Möglichkeit zum speichern von Webseiten zum offline-Lesen, und konnte immer noch keine zuverlässige Lösung, würde nicht hängen auf der Seite selbst und nicht veraltet UIWebView. Viele Leute schreiben, man solle die vorhandene HTTP-caching, aber WebKit zu tun scheint, eine Menge Sachen, die out-of-process, so dass es praktisch unmöglich durchzusetzen komplette caching (siehe hier oder hier). Aber diese Frage führte mich in die richtige Richtung. Basteln mit dem web-Archiv Ansatz, fand ich, dass es eigentlich ganz einfach zu schreiben Sie Ihre eigenen web-Archiv Exporteur.

Wie geschrieben die Frage, die web-Archive, nur der plist-Dateien, also alles was es braucht ist ein crawler, der extrahiert die erforderlichen Ressourcen aus der HTML-Seite, downloads und speichert diese in einer großen plist-Datei. Diese Archiv-Datei kann dann später geladen werden, in der WKWebView über loadFileURL(URL:allowingReadAccessTo:).

Erstellte ich eine demo-app, ermöglicht das archivieren von und die Wiederherstellung bis zu einem WKWebView mit diesem Ansatz: https://github.com/ernesto-elsaesser/OfflineWebView

Die Umsetzung hängt nur von Fuzi für das HTML-parsing.

Ich bin mir nicht sicher, ob Sie wollen einfach nur zum Zwischenspeichern von Seiten, die bereits besucht wurden oder wenn Sie spezifische Anfragen, die Sie möchten, um zu cache. Ich bin derzeit auf letztere. Also werde ich darüber sprechen. Meine urls dynamisch generiert werden, von einer api-Anfrage. Von dieser Antwort, die ich eingestellt requestPaths mit dem nicht-Bild-urls und dann einen Antrag stellen für jede der urls und die Antwort Zwischenspeichern. Für die Bild-urls, benutzte ich die Eisvogel Bibliothek zum Zwischenspeichern der Bilder. Ich habe bereits meine shared cache urlCache = URLCache.shared in meiner AppDelegate. Und teilte die Speicher, die ich brauche: urlCache = URLCache(memoryCapacity: <setForYourNeeds>, diskCapacity: <setForYourNeeds>, diskPath: "urlCache") Dann rufen Sie startRequest(:_) für jede der urls in requestPaths. (Kann getan werden, in den hintergrund, wenn es nicht notwendig sofort)

class URLCacheManager {

static let timeout: TimeInterval = 120
static var requestPaths = [String]()

class func startRequest(for url: URL, completionWithErrorCallback: @escaping (_ error: Error?) -> Void) {

    let urlRequest = URLRequest(url: url, cachePolicy: .returnCacheDataElseLoad, timeoutInterval: timeout)

    WebService.sendCachingRequest(for: urlRequest) { (response) in

        if let error = response.error {
            DDLogError("Error: \(error.localizedDescription) from cache response url: \(String(describing: response.request?.url))")
        }
        else if let _ = response.data,
            let _ = response.response,
            let request = response.request,
            response.error == nil {

            guard let cacheResponse = urlCache.cachedResponse(for: request) else { return }

            urlCache.storeCachedResponse(cacheResponse, for: request)
        }
    }
}
class func startCachingImageURLs(_ urls: [URL]) {

    let imageURLs = urls.filter { $0.pathExtension.contains("png") }

    let prefetcher = ImagePrefetcher.init(urls: imageURLs, options: nil, progressBlock: nil, completionHandler: { (skipped, failed, completed) in
        DDLogError("Skipped resources: \(skipped.count)\nFailed: \(failed.count)\nCompleted: \(completed.count)")
    })

    prefetcher.start()
}

class func startCachingPageURLs(_ urls: [URL]) {
    let pageURLs = urls.filter { !$0.pathExtension.contains("png") }

    for url in pageURLs {

        DispatchQueue.main.async {
            startRequest(for: url, completionWithErrorCallback: { (error) in

                if let error = error {
                    DDLogError("There was an error while caching request: \(url) - \(error.localizedDescription)")
                }

            })
        }
    }
}
}

Ich bin mit Alamofire für die Netzwerk-Anfrage mit einer cachingSessionManager konfiguriert mit den entsprechenden Headern. Also in meinem WebService-Klasse die ich habe:

typealias URLResponseHandler = ((DataResponse<Data>) -> Void)

static let cachingSessionManager: SessionManager = {

        let configuration = URLSessionConfiguration.default
        configuration.httpAdditionalHeaders = cachingHeader
        configuration.urlCache = urlCache

        let cachingSessionManager = SessionManager(configuration: configuration)
        return cachingSessionManager
    }()

    private static let cachingHeader: HTTPHeaders = {

        var headers = SessionManager.defaultHTTPHeaders
        headers["Accept"] = "text/html" 
        headers["Authorization"] = <token>
        return headers
    }()

@discardableResult
static func sendCachingRequest(for request: URLRequest, completion: @escaping URLResponseHandler) -> DataRequest {

    let completionHandler: (DataResponse<Data>) -> Void = { response in
        completion(response)
    }

    let dataRequest = cachingSessionManager.request(request).responseData(completionHandler: completionHandler)

    return dataRequest
}

Dann in der Webansicht delegate-Methode lade ich die cachedResponse. Ich verwende eine variable handlingCacheRequest um eine Endlosschleife zu vermeiden.

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

    if let reach = reach {

        if !reach.isReachable(), !handlingCacheRequest {

            var request = navigationAction.request
            guard let url = request.url else {

                decisionHandler(.cancel)
                return
            }

            request.cachePolicy = .returnCacheDataDontLoad

           guard let cachedResponse = urlCache.cachedResponse(for: request),
                let htmlString = String(data: cachedResponse.data, encoding: .utf8),
                cacheComplete else {
                    showNetworkUnavailableAlert()
                    decisionHandler(.allow)
                    handlingCacheRequest = false
                    return
            }

            modify(htmlString, completedModification: { modifiedHTML in

                self.handlingCacheRequest = true
                webView.loadHTMLString(modifiedHTML, baseURL: url)
            })

            decisionHandler(.cancel)
            return
    }

    handlingCacheRequest = false
    DDLogInfo("Currently requesting url: \(String(describing: navigationAction.request.url))")
    decisionHandler(.allow)
}

Natürlich werden Sie damit umgehen wollen, wenn es ein Fehler als gut.

func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {

    DDLogError("Request failed with error \(error.localizedDescription)")

    if let reach = reach, !reach.isReachable() {
        showNetworkUnavailableAlert()
        handlingCacheRequest = true
    }
    webView.stopLoading()
    loadingIndicator.stopAnimating()
}

Ich hoffe, das hilft. Die einzige Sache, die ich bin immer noch versuchen, herauszufinden, ist die Bild-assets nicht geladen werden offline. Ich denke, ich werde brauchen, um eine separate Anforderung für diese Bilder und halten Sie einen Verweis zu Ihnen vor Ort. Nur so ein Gedanke aber ich werde diese zu aktualisieren, wenn ich das habe, geklappt.

AKTUALISIERT mit Bildern laden von offline-mit dem code unten
Ich benutzte die Kanna Bibliothek zum Parsen meine html-string aus meiner zwischengespeicherte Antwort, finde die url eingebettet in der style= background-image: - Attribut des div, regex verwendet, um die url (das ist auch der Schlüssel für die Kingfisher-Cache Bild), holte das zwischengespeicherte Bild, und dann verändert die css, um die Bild-Daten (basierend auf diesem Artikel: https://css-tricks.com/data-uris/) geladen und dann die webview mit dem geänderten html-Code. (Puh!) Es war ganz der Prozess und vielleicht gibt es einen einfacheren Weg.. aber ich hatte es nicht gefunden. Mein code aktualisiert, um alle diese änderungen. Viel Glück!

func modify(_ html: String, completedModification: @escaping (String) -> Void) {

    guard let doc = HTML(html: html, encoding: .utf8) else {
        DDLogInfo("Couldn't parse HTML with Kannan")
        completedModification(html)
        return
    }

    var imageDiv = doc.at_css("div[class='<your_div_class_name>']")

    guard let currentStyle = imageDiv?["style"],
        let currentURL = urlMatch(in: currentStyle)?.first else {

            DDLogDebug("Failed to find URL in div")
            completedModification(html)
            return
    }

    DispatchQueue.main.async {

        self.replaceURLWithCachedImageData(inHTML: html, withURL: currentURL, completedCallback: { modifiedHTML in

            completedModification(modifiedHTML)
        })
    }
}

func urlMatch(in text: String) -> [String]? {

    do {
        let urlPattern = "\\((.*?)\\)"
        let regex = try NSRegularExpression(pattern: urlPattern, options: .caseInsensitive)
        let nsString = NSString(string: text)
        let results = regex.matches(in: text, options: [], range: NSRange(location: 0, length: nsString.length))

        return results.map { nsString.substring(with: $0.range) }
    }
    catch {
        DDLogError("Couldn't match urls: \(error.localizedDescription)")
        return nil
    }
}

func replaceURLWithCachedImageData(inHTML html: String, withURL key: String, completedCallback: @escaping (String) -> Void) {

    //Remove parenthesis
    let start = key.index(key.startIndex, offsetBy: 1)
    let end = key.index(key.endIndex, offsetBy: -1)

    let url = key.substring(with: start..<end)

    ImageCache.default.retrieveImage(forKey: url, options: nil) { (cachedImage, _) in

        guard let cachedImage = cachedImage,
            let data = UIImagePNGRepresentation(cachedImage) else {
                DDLogInfo("No cached image found")
                completedCallback(html)
                return
        }

        let base64String = "data:image/png;base64,\(data.base64EncodedString(options: .endLineWithCarriageReturn))"
        let modifiedHTML = html.replacingOccurrences(of: url, with: base64String)

        completedCallback(modifiedHTML)
    }
}