Skip to content

H5 加速指南(已下线)

Vajra Sheng edited this page Sep 1, 2020 · 1 revision

此功能现已下线,请知悉。


从 AppSDK 6.1.0开始,我们大大优化了在一定条件下的 H5 页面的首屏加载速度。效果如下:

(以下动态图效果在 Wifi 情况下测得)

不使用加速: 使用加速:

商品详情页加速例子如上。需开启商品详情页免登或提前设置登录态才可使商品详情页获得加速。

不使用加速: 使用加速:

微页面加速例子如上。

想要实现上面的效果,只需要进行简单的配置即可。

预加载 HTML 页面

首先需要收集你的 App 中的热点页面的 URL,比如商城入口页,近期热推的商品页,正在推广的微页面等。然后在初始化 SDK 之后调用下面的代码进行 HTML 页面的预加载

[YZSDK.shared preloadURLs:@[url1, url2]];

之后使用 YZWebView 访问有赞体系内的相关页面时就会自动获得页面加速的能力。 另外,为了使缓存更可控,我们对 HTML 的预加载做了许多限制,在使用 H5 加速的过程中,应该注意以下几点:

  1. HTML 预加载仅对有赞体系内的页面有效。
  2. HTML 暂不支持会被重定向的链接,如你配置的 URL 的域名是类似于 detail.youan.com, kdt.im, koudaitong.com 之类的,最后会被重定向到 h5.youzan.com。使用预加载时,请填写 h5.youzan.com 的网址。

例如:短网址 https://kdt.im/rPDZih 在电脑端会被重定向到 https://detail.youzan.com/show/goods?alias=1ybbfcb4uq0xc&v2/goods/1ybbfcb4uq0xchttps://detail.youzan.com/show/goods?alias=1ybbfcb4uq0xc&v2/goods/1ybbfcb4uq0xc 在手机端最终会被重定向到 https://h5.youzan.com/v2/goods/1ybbfcb4uq0xc。 因此应当填写 https://h5.youzan.com/v2/goods/1ybbfcb4uq0xc 作为预加载的页面 URL。

** ✅正确的做法:**

NSURL *url1 = [NSURL URLWithString:@"https://h5.youzan.com/v2/goods/1ybbfcb4uq0xc"];
[YZSDK.shared preloadURLs:@[url1]];

** ❌错误的做法 **

NSURL *url1 = [NSURL URLWithString:@"https://kdt.im/rPDZih"];
[YZSDK.shared preloadURLs:@[url1]];
  1. 为了保证 HTML 的及时更新,每次命中缓存后,都会对缓存进行更新。更新后的新缓存会在下一次访问该页面时使用。
  2. HTML 预加载的最佳适用场景是高频访问的,变化较少的页面。请不要对变更非常频繁的页面使用 HTML 预加载。

HTML 的配置

我们开放了 HTML 预加载相关的配置,你可以在初始化 SDK 时对其进行更改。 这项配置是可选的,不配置则会以默认的方式使用 HTML 预加载。

    YZConfig *config = [[YZConfig alloc] initWithClientId:kClientID];
    NSString* scheme = [[[NSBundle mainBundle].infoDictionary[@"CFBundleURLTypes"] firstObject][@"CFBundleURLSchemes"] firstObject];
    config.scheme = scheme;
    config.enableLog = YES;
    
    YZHTMLConfig *htmlConfig = [[YZHTMLConfig alloc] init];
    htmlConfig.htmlCacheEnable = YES; /**< 启用 HTML 缓存,关闭则不会使用本地的 HTML 缓存。*/
    htmlConfig.htmlCacheValidTime = 7 * 24 * 3600 * 1000; // 预加载的 HTML 缓存的有效时间。缓存只在有效时间内被使用
    
    config.htmlCacheConfig = htmlConfig;
    [YZSDK.shared initializeSDKWithConfig:config];

预加载资源

资源的预加载不需要做主动操作,唯一需要配置的就是在 SDK 需要 token 时将 token 传给 SDK。 SDK 在预加载资源的过程中,有时会需要 token 以便进行下一步操作,此时,你需要实现 YZSDKDelegate,并将 token 返回给 SDK.

// 建议在初始化 SDK 时就赋值 delegate。
YZSDK.shared.delegate = self;
- (void)yzsdk:(YZSDK *)sdk needInitToken:(void (^)(NSString *_Nullable token))callback;
{
    [YZAccountService fetchTokenWithCompletionBlock:^(NSString *token) {
                                   // token 为 nil 会让 SDK 取消当前操作
                                   // token 为有效,则 SDK 会正确地预加载资源
                                   // token 无效,则 SDK 会再次调用 needInitToken 方法。
                                   callback(token);
                               }];
}