Skip to content

lomocoin/react-native-offline-cache-webview

 
 

Repository files navigation

react-native-offline-cache-webview

Features

Offline cache enabled WebView, works for Android and iOS.

iOS Android

Install

npm i react-native-offline-cache-webview --save
react-native link react-native-offline-cache-webview

Usage

import OfflineCacheWebView from 'react-native-offline-cache-webview';
export default class webview extends Component {
    render() {
        return (
            <OfflineCacheWebView
                style={styles.webview}
                source={{uri: 'http://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018'}}
            />
        );
    }
}

Example

How does this work?

For iOS, the offline cache is implemented with RNCachingURLProtocol

RNCachingURLProtocol is a simple shim for the HTTP protocol (that’s not nearly as scary as it sounds). Anytime a URL is downloaded, the response is cached to disk. Anytime a URL is requested, if we’re online then things proceed normally. If we’re offline, then we retrieve the cached version.

For Android, it's provided by CacheWebView

CacheWebView is a custom implement of Android WebView resource interceptor. It beyond system WebView cache space limit, let cache config more simple ,fast and flexible. Visit website by offline.

This library is built on top of react-native-advanced-webview, the architecture leveraged for customizing React Naitve WebView

TODO

  • offlineCacheMode property to control on/off for cache usage
  • prefetch method for caching url by advance
  • clearCache method

References

About

Offline cache enabled WebView, works for Android and iOS(WIP)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 62.0%
  • Java 29.7%
  • JavaScript 6.8%
  • Python 1.5%