Feature: Consider to cache openIM.wasm in initializeWasm

openimsdk / open-im-sdk-web-wasm

JS SDK for OpenIM Web use by Webassembly of go

Apache License 2.0

29 stars 37 forks source link

Checklist

[X] I've searched for similar issues and couldn't find anything matching
[X] I've discussed this feature request in the OpenIMSDK Slack and got positive feedback

Is this feature request related to a problem?

❎ No

Problem Description

"openIM.wasm" is about 27M and almost never change. So it's good to cache it when using it in a h5 project. When access project using browsers like chrome, caching is default behavior. But it seems there is no caching behavior in webview, at least for me. So can we cache it when we call initializeWasm, which is underlying of getSDK? Current code is below:

https://github.com/openimsdk/open-im-sdk-web-wasm/blob/dd0f1c3c2468d40c751e684342ed028d68498960/src/sdk/initialize.ts#L7-L33

We can replace fetch to fetchCache. Codes like below:

async function fetchCache(url) {
    if (caches === undefined) {
        return await fetch(url)
    }

    const c = await caches.open('open-im-sdk-wasm') // caches api is only available in https site or localhost  
    let resp = await c.match(url)
    if (resp === undefined) {
        resp = await fetch(url)
        c.put(url, resp.clone())
    }
    return resp
}

中文大意：

获取 sdk 的时候会加载一个 27M 左右的 openIM.wasm 文件。在浏览器中打开 h5 工程的时候它会缓存，但在 webview 中貌似无法缓存（至少我没做到）。所以我建议在加载 wasm 文件的时候用 caches api 手动缓存它。

不过 caches api 只在 localhost 和 https 站点中才存在，而且关于缓存更新的逻辑也应该再考虑一下。

Solution Description

Using cache api when loading "openIM.wasm". Codes at above.

Benefits

Users can open h5 projects more quickly.

Potential Drawbacks

Caches api only available in https site or localhost.

Additional Information

I'm using openim-h5-demo.
User access project in a webview. And seems there is no caching, which is different than browser.

Caching behavior in webviews can indeed be different from that in regular browsers, as webviews might not have the same level of cache management or might be configured differently. Here are some general steps you can take to enable caching for assets like your "openIM.wasm" file in webviews:

HTTP Caching Headers:
Ensure your server is configured to send appropriate HTTP caching headers with your .wasm file. Headers like Cache-Control: public, max-age=31536000 (which indicates the asset can be cached by any cache for 1 year) can instruct the webview to cache the file.
Service Workers:
Implement a service worker in your web project. Service workers can effectively manage cache behaviors for web applications, including webview-based applications. You can use the Cache API in the service worker to cache specific assets.
WebView Settings:
Depending on the platform and webview implementation you're using (Android's WebView, iOS's WKWebView, Electron, etc.), check if there are specific settings or methods to enable or control the cache programmatically.

For example, in Android's WebView, you can enable caching using:
```
webView.getSettings().setAppCacheEnabled(true);
webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
```
WebView Caching Libraries:
Look into third-party libraries or plugins that are designed to improve caching in webviews.

In addition, for the cache method you are using now, the simplest way is to carry the version number (1.0.0-openIM.wasm) in the command of the openIM.wasm file. When the request url changes, the cache should be updated.

openimsdk / open-im-sdk-web-wasm