Kingfisher — คืออะไร แนวคิดหลัก และ ImageCache

Kingfisher คืออะไร?

Kingfisher เป็นไลบรารีสำหรับการโหลดและแคชรูปภาพแบบอะซิงโครนัสบนแพลตฟอร์ม Apple ซึ่งเขียนด้วย Swift ทั้งหมด ผู้เขียนไลบรารีคือ Wei Wang (onevcat) Kingfisher ให้ชุดเครื่องมือสำหรับโหลดรูปภาพจากเครือข่ายพร้อมการแคชอัตโนมัติ การแปลง และการรองรับเทคโนโลยี Swift สมัยใหม่: async/await, Combine, Sendable

ไลบรารีมีดาวมากกว่า 23,000 ดาว บน GitHub และใช้ในแอปพลิเคชันอย่าง Telegram, Snapchat และ Dropbox Kingfisher รองรับ GIF, APNG, HEIF และรูปแบบรูปภาพมาตรฐานทั้งหมด คำขอแต่ละครั้งส่งคืน Result ที่ปลอดภัยชนิดข้อมูล ซึ่งกำจัดข้อผิดพลาดในการแปลงชนิด

สถาปัตยกรรมของ Kingfisher สร้างขึ้นบนสามคอมโพเนนต์หลัก: Manager (ตัวจัดการดาวน์โหลด), Cache (แคชสองระดับ) และ Processor (การแปลง) คอมโพเนนต์เหล่านี้เชื่อมต่อผ่านโปรโตคอล ทำให้สามารถเปลี่ยนส่วนใดก็ได้โดยไม่ต้องเปลี่ยน dependencies

Kingfisher ทำงานอย่างไร: Manager และ Cache

KingfisherManager เป็นคลาสกลางที่ประสานงานการโหลด การแคช และการประมวลผลรูปภาพ ประกอบด้วยการอ้างอิงถึง ImageCache และ ImageDownloader และให้เมธอดเดียว retrieveImage ที่ส่งคืนรูปภาพที่พร้อมใช้งานหลังจากผ่านทุกขั้นตอน

กระบวนการโหลด

เมื่อเรียก retrieveImage Manager จะตรวจสอบ Memory Cache ก่อน — NSCache ที่มี UIImage ซึ่งคีย์ถูกสร้างจาก URL ต้นทางและ CacheSerializer หากพบรูปภาพ จะส่งคืนทันที หากไม่พบ จะตรวจสอบ Disk Cache — การอ่านจากระบบไฟล์ด้วยการถอดรหัสผ่าน serializer หากแคชดิสก์ว่างเปล่า จะทำคำขอเครือข่ายผ่าน ImageDownloader ผลลัพธ์จะถูกถอดรหัส แปลง และบันทึกในแคชทั้งสองระดับ

• Memory Cache — อิงตาม NSCache ถูกล้างอัตโนมัติเมื่อมีการเตือนหน่วยความจำ
• Disk Cache — การจัดเก็บไฟล์ด้วย TTL และการตรวจสอบขีดจำกัดขนาด
• ImageDownloader — อิงตาม URLSession พร้อมรองรับการปรับเปลี่ยนคำขอผ่านตัวปรับแต่ง

Swift Concurrency

ตั้งแต่เวอร์ชัน 7.0 Kingfisher รองรับ async/await อย่างเต็มรูปแบบ เมธอด retrieveImage พร้อมใช้งานเป็นฟังก์ชันอะซิงโครนัสที่ส่งคืน Result โดยตรงโดยไม่ต้องมีบล็อกการเสร็จสิ้น ทำให้สามารถใช้ไลบรารีในสถาปัตยกรรม Swift สมัยใหม่ด้วย Structured Concurrency

โมดูลหลักของ Kingfisher

Kingfisher แบ่งออกเป็นหลายโมดูล แต่ละโมดูลแก้ปัญหาของตัวเอง การแบ่งส่วนนี้ช่วยให้การทดสอบและการเปลี่ยนคอมโพเนนต์ง่ายขึ้น

KingfisherManager

KingfisherManager เป็นส่วนหน้าอาคารที่รวมการโหลด แคช และตัวประมวลผล โดยค่าเริ่มต้น จะใช้ซิงเกิลตัน KingfisherManager.shared แต่สามารถสร้างอินสแตนซ์แยกต่างหากด้วยการตั้งค่าที่กำหนดเองสำหรับสถานการณ์ที่แยกออกมา (เช่น สำหรับการทดสอบหน่วย)

ImageCache

ImageCache เป็นแคชสองระดับพร้อมการตั้งค่าแยกต่างหากสำหรับหน่วยความจำและดิสก์ Memory Cache ไม่มีขีดจำกัดจำนวนวัตถุ แต่ระบบจะล้างเมื่อหน่วยความจำต่ำ Disk Cache จัดเก็บไฟล์ในไดเรกทอรีด้วย TTL ที่กำหนดค่าได้ (ค่าเริ่มต้น 7 วัน) ขีดจำกัดขนาด (ค่าเริ่มต้น 0 — ไม่จำกัด) และการล้างอัตโนมัติ

ImageProcessor

ImageProcessor เป็นโปรโตคอลที่มีเมธอดเดียว process(item:options:) ที่ส่งคืนรูปภาพที่ประมวลผลแล้ว การใช้งานในตัว: ResizingImageProcessor (ปรับขนาด), RoundCornerImageProcessor (ทำมุมมน), BlurImageProcessor (เบลอแบบ Gaussian), OverlayImageProcessor (วางซ้อนสี) ตัวประมวลผลสามารถรวมกันได้โดยใช้ตัวดำเนินการ |>

ระบบแคชของ Kingfisher

สถาปัตยกรรมแคชของ Kingfisher อิงตามหลักการ write-through: ข้อมูลถูกเขียนไปยังทั้งสองระดับพร้อมกัน และการอ่านเริ่มจากระดับที่เร็วที่สุด — หน่วยความจำ คีย์แคชคือ URL สัมบูรณ์ของรูปภาพหลังจากลบพารามิเตอร์คำค้นหา

ในการจัดการขนาด Disk Cache จะคำนวณขนาดไฟล์ทั้งหมดโดยเรียงตามวันที่เข้าถึงล่าสุด เมื่อเกินขีดจำกัด ไฟล์ที่มีวันที่เข้าถึงเก่าที่สุดจะถูกลบจนกว่าขนาดจะต่ำกว่า 50% ของขีดจำกัด การล้าง TTL เกิดขึ้นระหว่างการเริ่มต้นแคชและทุกครั้งที่เรียก cleanExpired

ตัวอย่างการใช้ Kingfisher ใน Swift

Kingfisher มีอินเทอร์เฟซหลายแบบสำหรับโหลดรูปภาพ: ส่วนขยายบน UIImageView, ตัวจัดการแยกต่างหาก และ SwiftUI View

การโหลดใน UIImageView ผ่าน kf

kf เป็นคุณสมบัติเนมสเปซบน UIImageView ที่ให้เมธอด setImage, cancelDownload และตัวบ่งชี้การโหลด เมธอด setImage รับ URLSource และพารามิเตอร์เสริม Options และ completionHandler

import Kingfisher

imageView.kf.setImage(
    with: URL(string: "https://example.com/image.jpg"),
    placeholder: UIImage(named: "placeholder"),
    options: [
        .processor(RoundCornerImageProcessor(radius: .point(12))),
        .transition(.fade(0.3)),
        .cacheMemoryOnly
    ],
    progressBlock: { receivedSize, totalSize in
        print("โหลดแล้ว \(receivedSize) / \(totalSize)")
    }
)

เมธอดส่งคืน DownloadTask ที่รองรับการยกเลิกผ่าน cancel และการติดตามความคืบหน้า ภายใน setImage เรียก KingfisherManager.shared.retrieveImage พร้อมการตรวจจับ ImageView เป็น Target โดยอัตโนมัติ

การใช้งานกับ async/await

ตั้งแต่ Kingfisher 7.0 เมธอด setImage พร้อมใช้งานในเวอร์ชันอะซิงโครนัส ซึ่งช่วยให้สามารถผสานรวมการโหลดรูปภาพเข้ากับ Swift Structured Concurrency โดยไม่ต้องใช้ callback

func loadAvatar() async {
    do {
        let result = try await imageView.kf.setImage(
            with: url,
            options: [.processor(ResizingImageProcessor(
                targetSize: CGSize(width: 100, height: 100)
            ))]
        )
        // result.image มี UIImage
    } catch {
        print("ล้มเหลว: \(error)")
    }
}

KFImage สำหรับ SwiftUI

KFImage เป็น SwiftUI View คล้ายกับ AsyncImage จาก iOS 15 แต่รองรับแคชของ Kingfisher อย่างเต็มรูปแบบ View ใช้ KingfisherManager.shared โดยอัตโนมัติแต่รองรับตัวจัดการที่กำหนดเองผ่านตัวปรับแต่ง .configure

struct AvatarView: View {
    let url: URL

    var body: some View {
        KFImage(url)
            .placeholder { ProgressView() }
            .resizable()
            .fade(duration: 0.25)
            .forceTransition()
            .frame(width: 80, height: 80)
            .cornerRadius(40)
    }
}

ตัวบ่งชี้การโหลดใน Kingfisher

Kingfisher มีระบบตัวบ่งชี้ในตัวสำหรับแสดงความคืบหน้าของการโหลดรูปภาพ IndicatorType เป็นการแจงนับที่มีสามตัวเลือก: .activity (UIActivityIndicatorView), .progress (UIProgressView) และ .custom (การใช้งานโปรโตคอล Indicator แบบกำหนดเอง) ตัวบ่งชี้จะปรากฏเหนือ ImageView โดยอัตโนมัติระหว่างการโหลดและซ่อนหลังจากเสร็จสิ้น

สำหรับตัวบ่งชี้ที่กำหนดเอง จำเป็นต้องใช้โปรโตคอล Indicator ด้วยเมธอด startAnimatingView() และ stopAnimatingView() ซึ่งช่วยให้มีโซลูชันแบบไฮบริด: โครงกระดูกพร้อมภาพเคลื่อนไหว shimmer, รูปภาพ placeholder พร้อมการเปิดเผยทีละน้อย หรือโลโก้พร้อมภาพเคลื่อนไหวความโปร่งใส Kingfisher ยังรองรับการตั้งค่าตัวบ่งชี้ทั่วโลกผ่าน KingfisherManager.shared.defaultOptions

Kingfisher vs SDWebImage

บนแพลตฟอร์ม iOS Kingfisher และ SDWebImage เป็นไลบรารีโหลดรูปภาพที่โดดเด่นสองแห่ง การเลือกระหว่างทั้งสองขึ้นอยู่กับภาษาโปรเจกต์ ข้อกำหนดด้านประสิทธิภาพ และระบบนิเวศ

ข้อได้เปรียบหลักของ Kingfisher คือสถาปัตยกรรม Swift-first: รองรับ async/await, Combine Publishers, Sendable และชนิด Result อย่างเต็มรูปแบบ SDWebImage รักษาความเป็นผู้นำด้วยระบบนิเวศปลั๊กอินที่กว้างขึ้น (WebP, SVG, MapKit) และการรองรับ Objective-C

การตั้งค่า Kingfisher ในโปรเจกต์ iOS

Kingfisher ติดตั้งผ่าน Swift Package Manager, CocoaPods หรือ Carthage หลังจากติดตั้ง เพียงนำเข้าโมดูลและเรียกเมธอดการโหลดใดๆ — ไลบรารีพร้อมใช้งานโดยไม่ต้องกำหนดค่าเพิ่มเติม

// Swift Package Manager (Package.swift)
dependencies: [
    .package(
        url: "https://github.com/onevcat/Kingfisher.git",
        from: "7.12.0"
    )
]

// CocoaPods (Podfile)
pod 'Kingfisher', '~> 7.12'

สำหรับการปรับแต่งการตั้งค่าทั่วโลก ใช้ KingfisherManager.shared สามารถเปลี่ยนการหมดเวลาของตัวดาวน์โหลด กลยุทธ์แคช และตัวประมวลผลเริ่มต้น ด้านล่างเป็นตัวอย่างการกำหนดค่าแคช 500 MB ด้วย TTL 14 วัน

let cache = ImageCache(name: "custom")
cache.memoryStorage.config.totalCostLimit = 100 * 1024 * 1024
cache.diskStorage.config.sizeLimit = 500 * 1024 * 1024
cache.diskStorage.config.expiration = .days(14)
KingfisherManager.shared.cache = cache

ImageDownloader ยังถูกกำหนดค่าผ่านตัวจัดการ: สามารถตั้งค่า URLSessionConfiguration ที่กำหนดเองพร้อมการหมดเวลา ส่วนหัว และนโยบายแคช สำหรับการติดตามความคืบหน้า มีโมดูล KFIndicator พร้อมรองรับ ActivityIndicator, ProgressView และตัวบ่งชี้ที่กำหนดเอง