• Stars
    star
    232
  • Rank 172,847 (Top 4 %)
  • Language
    Objective-C
  • License
    Apache License 2.0
  • Created over 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

iOS offline package solution for H5

license Pod Version Platform Language wiki

中文文档 | Introduction


HLLOfflineWebVC is a lightweight and high-performance hybrid framework developed by HUOLALA mobile team, which is intended to improve the load speed of websites on mobile phone. It base on WKWebView at iOS system.
HLLOfflineWebVC can cache html, css, js, png and other static resource on the disk. When the app load the web page, it directly load the resource from disk and reduce network request. You can get more details from the article.

Before VS After Using HLLOfflineWebVC

Before Using HLLOfflineWebVC After Using HLLOfflineWebVC
Time Cost 2s 1s
Movie

Features

  • Safe and reliable: no hook and no private API,  three degrade strategy.
  • Easy to maintain: three layer structure and modular design.
  • Fully functional: it contains H5 offline resource managing, url and offline resource mapping config, data reporting, debug tool.

Requirements

  • iOS 9.0 or later
  • Xcode 11.0 or later
  • CocoaPods 1.11.2 or later

Get Started

  1. Download the code.
  2. Enter the 'Example' folder, enter command 'pod install' to install 3rd-party libraries.
  3. Open the project 'HLLOfflineWebVC.xcworkspace' and built it by Xcode. If you complile and run the demo successfully, you will see the UI below:

Communication

  • If you find a bug, open an issue.
  • If you have a feature request, open an issue.
  • If you want to contribute, submit a pull request.

Architecture

  • OfflineWebPackage

    The core module of HLLOfflineWebVC.

  • OfflineWebDevTool

    An useful tool to Debug the offline web.

  • OfflineWebBisNameMatch

    Connect the web page with offline resource by config.

  • OfflineWebUtils

    An inner API used by other module.

How To Use

If you want to bring the code into your project, you need to do the following:

Develop A HTTP Service

  1. HTTP Request

    https://huolala.cn/queryOffline?clientType=iOS&clientVer=1.0.0&offlineZipVer=1.0.0&bisName=xx

 requet data parameters description:

parameter name parameter meaning note
clientType operating system type iOS,Android
clientVersion app version eg: 1.0
bisName unique identifier of your offline web page eg: act3-offline-package-test
offlineZipVer the local offline web file version 0 means no offline web cache

 respond data format is a json,parameters description:

parameter name parameter meaning note
bisName unique identifier of your offline web page eg: act3-offline-package-test
result query result -1: disable offline web, 0: no update, 1: has new version
url zip file download url if no update, the url is null
refreshMode notify client how to update 0:update next(default) 1:update immediately
version offline web pages version eg: 25609-j56gfa
  1. Cross Origin

    When an offline web page make a network request, the origin is null,should modify your gateway or server to support.

Modify HTML And JS File

  • use relative path, no absolute path.
  • cookie、local storage should support the situation that host is null.
  • add a file to describe the offline web version .the file name is ".offweb.json" and the content is: { "bisName": "xxx", "ver": "xxx" }

Bring The Code Into Your Client

Install Completely

Install all the modules in your project.

  1. Add the string " pod 'HLLOfflineWebVC' " in your pod file.

  2. Call the initial function.

- (void)initOfflineWeb {
    NSDictionary *offwebConfigDict = DefaultWebPackageConfig;
    [HLLOfflineWebConfig setInitalParam:offwebConfigDict
        logBlock:^(HLLOfflineWebLogLevel level, NSString *keyword, NSString *message) {
            NSLog (@"use your log SDK :%d:%@:%@", (int) level, keyword, message);     
        }
        reportBlock:^(NSString *event, NSDictionary *dict) {
            NSLog(@"data report:%@,%@", event, dict);
        }
        monitorBlock:^(HLLOfflineWebMonitorType type, NSString *key, CGFloat value, NSDictionary *lables) {
            NSLog(@"use your monitor sdk ");
            
        }
        env:@"prd"
        appversion:[[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"]];
}

  1. Config the dictionary.

    "OffwebConfigDict" is a dictionary from json, configure the degrade strategy, auto add offweb parameters to url:

{
	"switch": 1,
	"predownloadlist": ["uappweb-offline"],
	"disablelist": [],
	"rules": [{
		  "host": ["test1.xxx.com", "test2.xxx.com"],
		  "path": ["/uapp"],
		  "offweb": "uappweb"
		}
	]
}
parameter name parameter meaning required or optional
switch 1 open,0 close required
predownloadlist If you need download an offline web page, add the business name optional
disablelist disable some offline web page optional
rules when the host and path match the rules, webview will add 'offweb=uappweb' to you url optional
  1. Modify webview container.

Implement the function bellow in your basic webview container. Then edit the parent class of HLLOfflineWebVC.

 - (BOOL)webview:(WKWebView *)webview shouldStartLoadWithRequest:(NSURLRequest *)request {
        return YES;
}

Declare WKWebview delegate <WKUIDelegate,WKNavigationDelegate> in the head file.

Install Core Module

Just install the core module that not contains 'HLLOfflineWebVC', the CocoaPods command is: pod 'HLLOfflineWebVC/OfflineWebPackage' . The main API :

  1. Check Update API
 //@param bisName: unique identifier of your offline web page 
 //@param resultBlock:the result block

 - (void)checkUpdate:(NSString *)bisName result:(HLLOfflineWebResultBlock)resultBlock;
  1. Get the Local File Path of Offline Web
 //@param webUrl: online web page url 
 //@return: the local file path of "index.html". If not exist, return nil
 
- (NSURL *_Nullable)getFileURL:(NSURL *)webUrl;

Author

HUOLALA mobile technology team.

License

HLLOfflineWebVC is released under the Apache 2.0 license. See LICENSE for details.

More Repositories

1

page-spy-web

Debug remotely and easily like chrome devtools.
TypeScript
4,192
star
2

hll-wp-therouter-android

A framework for assisting in the renovation of Android componentization(帮助 App 进行组件化改造的动态路由框架)
Kotlin
1,086
star
3

hll-wp-glog

Glog is a cross platform high-performance log library developed by Huolala.
PHP
319
star
4

page-spy

📦 The platform SDKs for PageSpy
TypeScript
193
star
5

HLLOfflineWebView-android

Android offline package solution for H5
Java
177
star
6

hll-popupsmanager-ios

Objective-C
94
star
7

page-spy-api

Go
33
star
8

hll-wp-therouter-ios

A framework for assisting in the renovation of iOS componentization
Objective-C
29
star
9

hll-harmony-component

Batchfile
27
star
10

hll-wp-guldan-ios

OC Method Time Cost Tool
Objective-C
14
star
11

react-pull-to-refreshify

A simple react pull-to-refresh component with 0 dependencies.
TypeScript
9
star
12

i-devices

A device that achieves various device style effects such as smartphones (iPhone series, Google series) and computers (MacBook, SurfaceBook series) through pure CSS code
JavaScript
8
star
13

hll-cocoapods-podspec-binary

Ruby
7
star
14

nad

A solution that bridges language boundaries.
TypeScript
5
star
15

preload-js

TypeScript
3
star
16

nad-java-core

This library is for collecting all Spring Web routes as a serializable data structure.
Java
3
star
17

word-to-vue

A tool that converts Word documents into Vue template.
JavaScript
2
star
18

page-spy-extension

JavaScript
2
star
19

hll-dynamic-res-plugin

Resource Dynamization Solution For Android
Java
2
star
20

react-json-view

<ReactJsonView /> is a react component for displaying serializable data.
TypeScript
2
star
21

batteryfinder-android

A detection tool of Android App power consumption
Kotlin
1
star
22

hll-safetyairbag-ios

Objective-C
1
star