个人中心
gpt4 book ai didi

ios wkwebview离线化加载h5资源解决方案

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章ios wkwebview离线化加载h5资源解决方案由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

思路: 使用NSURLProtocol拦截请求转发到本地.

1.确认离线化需求 。

部门负责的app有一部分使用的线上h5页，长期以来加载略慢... 。

于是考虑使用离线化加载.

确保[低速网络]或[无网络]可网页秒开.

2.使用[NSURLProtocol]拦截 。

区别于uiwebview wkwebview使用如下方法拦截 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@interface ViewController ()
 
@end
 
@implementation ViewController
 
- ( void )viewDidLoad {
   [super viewDidLoad];
   // 区别于uiwebview wkwebview使用如下方法拦截
   Class cls = NSClassFromString(@ "WKBrowsingContextController" );
   SEL sel = NSSelectorFromString(@ "registerSchemeForCustomProtocol:" );
   if ([(id)cls respondsToSelector:sel]) {
     [(id)cls performSelector:sel withObject:@ "http" ];
     [(id)cls performSelector:sel withObject:@ "https" ];
   }
}
?
1
2
3
4
# 注册NSURLProtocol拦截
- (IBAction)regist:(id)sender {
   [NSURLProtocol registerClass:[FilteredProtocol class ]];
}
?
1
2
3
4
# 注销NSURLProtocol拦截
- (IBAction)unregist:(id)sender {
   [NSURLProtocol unregisterClass:[FilteredProtocol class ]];
}

3.下载[zip] + 使用[SSZipArchive]解压 。

需要先 #import "SSZipArchive.h 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
- ( void )downloadZip {
   NSDictionary *_headers;
   NSURLSession *_session = [self sessionWithHeaders:_headers];
   NSURL *url = [NSURL URLWithString: @ "http://10.2.138.225:3238/dist.zip" ];
   NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
  
   // 初始化cachepath
   NSString *cachePath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject];
   NSFileManager *fm = [NSFileManager defaultManager];
  
   // 删除之前已有的文件
   [fm removeItemAtPath:[cachePath stringByAppendingPathComponent:@ "dist.zip" ] error:nil];
  
   NSURLSessionDownloadTask *downloadTask=[_session downloadTaskWithRequest:request completionHandler:^(NSURL *location, NSURLResponse *response, NSError *error) {
     if (!error) {
      
       NSError *saveError;
      
       NSURL *saveUrl = [NSURL fileURLWithPath: [cachePath stringByAppendingPathComponent:@ "dist.zip" ]];
      
       // location是下载后的临时保存路径,需要将它移动到需要保存的位置
       [[NSFileManager defaultManager] copyItemAtURL:location toURL:saveUrl error:&saveError];
       if (!saveError) {
         NSLog(@ "task ok" );
         if ([SSZipArchive unzipFileAtPath:
           [cachePath stringByAppendingPathComponent:@ "dist.zip" ]
                   toDestination:cachePath]) {
           NSLog(@ "unzip ok" ); // 解压成功
         }
         else {
           NSLog(@ "unzip err" ); // 解压失败
         }
       }
       else {
         NSLog(@ "task err" );
       }
     }
     else {
       NSLog(@ "error is :%@" , error.localizedDescription);
     }
   }];
  
   [downloadTask resume];
}

4.迁移资源至[NSTemporary] 。

[wkwebview]真机不支持直接加载[NSCache]资源 。

需要先迁移资源至[NSTemporary] 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
- ( void )migrateDistToTempory {
   NSFileManager *fm = [NSFileManager defaultManager];
   NSString *cacheFilePath = [[NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@ "dist" ];
   NSString *tmpFilePath = [NSTemporaryDirectory() stringByAppendingPathComponent:@ "dist" ];
  
   // 先删除tempory已有的dist资源
   [fm removeItemAtPath:tmpFilePath error:nil];
   NSError *saveError;
  
   // 从caches拷贝dist到tempory临时文件夹
   [[NSFileManager defaultManager] copyItemAtURL:[NSURL fileURLWithPath:cacheFilePath] toURL:[NSURL fileURLWithPath:tmpFilePath] error:&saveError];
   NSLog(@ "Migrate dist to tempory ok" );
}

5.转发请求 。

如果[/static]开头 => 则转发[Request]到本地[.css/.js]资源 。

如果[index.html]结尾 => 就直接[Load]本地[index.html] (否则[index.html]可能会加载失败) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
//
// ProtocolCustom.m
// proxy-browser
//
// Created by melo的微博 on 2018/4/8.
// Copyright © 2018年 com. All rights reserved.
//
#import <objc/runtime.h>
#import <Foundation/Foundation.h>
#import <MobileCoreServices/MobileCoreServices.h>
static NSString* const matchingPrefix = @ "http://10.2.138.225:3233/static/" ;
static NSString* const regPrefix = @ "http://10.2.138.225:3233" ;
static NSString* const FilteredKey = @ "FilteredKey" ;
@interface FilteredProtocol : NSURLProtocol
@property (nonatomic, strong) NSMutableData  *responseData;
@property (nonatomic, strong) NSURLConnection *connection;
@end
@implementation FilteredProtocol
+ ( BOOL )canInitWithRequest:(NSURLRequest *)request
{
   return [NSURLProtocol propertyForKey:FilteredKey inRequest:request]== nil;
}
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request
{
   NSLog(@ "Got it request.URL.absoluteString = %@" ,request.URL.absoluteString);
 
   NSMutableURLRequest *mutableReqeust = [request mutableCopy];
   //截取重定向
   if ([request.URL.absoluteString hasPrefix:matchingPrefix])
   {
     NSURL* proxyURL = [NSURL URLWithString:[FilteredProtocol generateProxyPath: request.URL.absoluteString]];
     NSLog(@ "Proxy to = %@" , proxyURL);
     mutableReqeust = [NSMutableURLRequest requestWithURL: proxyURL];
   }
   return mutableReqeust;
}
+ ( BOOL )requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b
{
   return [super requestIsCacheEquivalent:a toRequest:b];
}
# 如果[index.html]结尾 => 就直接[Load]本地[index.html]
- ( void )startLoading {
   NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy];
   // 标示改request已经处理过了，防止无限循环
   [NSURLProtocol setProperty:@YES forKey:FilteredKey inRequest:mutableReqeust];
  
   if ([self.request.URL.absoluteString hasSuffix:@ "index.html" ]) {
 
     NSURL *url = self.request.URL;
 
     NSString *path = [FilteredProtocol generateDateReadPath: self.request.URL.absoluteString];
    
     NSLog(@ "Read data from path = %@" , path);
     NSFileHandle *file = [NSFileHandle fileHandleForReadingAtPath:path];
     NSData *data = [file readDataToEndOfFile];
     NSLog(@ "Got data = %@" , data);
     [file closeFile];
    
     //3.拼接响应Response
     NSInteger dataLength = data.length;
     NSString *mimeType = [self getMIMETypeWithCAPIAtFilePath:path];
     NSString *httpVersion = @ "HTTP/1.1" ;
     NSHTTPURLResponse *response = nil;
    
     if (dataLength > 0) {
       response = [self jointResponseWithData:data dataLength:dataLength mimeType:mimeType requestUrl:url statusCode:200 httpVersion:httpVersion];
     } else {
       response = [self jointResponseWithData:[@ "404" dataUsingEncoding:NSUTF8StringEncoding] dataLength:3 mimeType:mimeType requestUrl:url statusCode:404 httpVersion:httpVersion];
     }
    
     //4.响应
     [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
     [[self client] URLProtocol:self didLoadData:data];
     [[self client] URLProtocolDidFinishLoading:self];
   }
   else {
     self.connection = [NSURLConnection connectionWithRequest:mutableReqeust delegate:self];
   }
}
- ( void )stopLoading
{
   if (self.connection != nil)
   {
     [self.connection cancel];
     self.connection = nil;
   }
}
- (NSString *)getMIMETypeWithCAPIAtFilePath:(NSString *)path
{
   if (![[[NSFileManager alloc] init] fileExistsAtPath:path]) {
     return nil;
   }
  
   CFStringRef UTI = UTTypeCreatePreferredIdentifierForTag(kUTTagClassFilenameExtension, (__bridge CFStringRef)[path pathExtension], NULL);
   CFStringRef MIMEType = UTTypeCopyPreferredTagWithClass (UTI, kUTTagClassMIMEType);
   CFRelease(UTI);
   if (!MIMEType) {
     return @ "application/octet-stream" ;
   }
   return (__bridge NSString *)(MIMEType);
}
#pragma mark - 拼接响应Response
- (NSHTTPURLResponse *)jointResponseWithData:(NSData *)data dataLength:(NSInteger)dataLength mimeType:(NSString *)mimeType requestUrl:(NSURL *)requestUrl statusCode:(NSInteger)statusCode httpVersion:(NSString *)httpVersion
{
   NSDictionary *dict = @{@ "Content-type" :mimeType,
               @ "Content-length" :[NSString stringWithFormat:@ "%ld" ,dataLength]};
   NSHTTPURLResponse *response = [[NSHTTPURLResponse alloc] initWithURL:requestUrl statusCode:statusCode HTTPVersion:httpVersion headerFields:dict];
   return response;
}
#pragma mark- NSURLConnectionDelegate
- ( void )connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
   [self.client URLProtocol:self didFailWithError:error];
}
#pragma mark - NSURLConnectionDataDelegate
- ( void )connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response
{
   self.responseData = [[NSMutableData alloc] init];
   [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
}
- ( void )connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
   [self.responseData appendData:data];
   [self.client URLProtocol:self didLoadData:data];
}
- ( void )connectionDidFinishLoading:(NSURLConnection *)connection {
   [self.client URLProtocolDidFinishLoading:self];
}
+ (NSString *)generateProxyPath:(NSString *) absoluteURL {
   NSString *tmpFilePath = [NSTemporaryDirectory() stringByAppendingPathComponent:@ "dist" ];
   NSString *fileAbsoluteURL = [@ "file:/" stringByAppendingString:tmpFilePath];
   return [absoluteURL stringByReplacingOccurrencesOfString:regPrefix
                          withString:fileAbsoluteURL];
}
+ (NSString *)generateDateReadPath:(NSString *) absoluteURL {
   NSString *fileDataReadURL = [NSTemporaryDirectory() stringByAppendingPathComponent:@ "dist" ];
   return [absoluteURL stringByReplacingOccurrencesOfString:regPrefix
                          withString:fileDataReadURL];
}
@end

结语

完整[DEMO]请参考: https://github.com/meloalright/wk-proxy 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://juejin.im/post/5adac2766fb9a07a9a106c0b 。

最后此篇关于ios wkwebview离线化加载h5资源解决方案的文章就讲到这里了,如果你想了解更多关于ios wkwebview离线化加载h5资源解决方案的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Python的Flask框架应用调用Redis队列数据的方法
文章推荐： Python第三方库的安装方法总结
文章推荐： 在Python程序和Flask框架中使用SQLAlchemy的教程
文章推荐： WKWebView、WebView和JS的交互方式详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com