Webview缓存优化咨询：实现WebApp静态资源离线复用与API按需请求

主流最优方案：Service Worker + Cache API #

这是前端标准的离线缓存方案，跨Android/iOS WebView生效，完全匹配「首次加载缓存静态资源，二次及之后复用缓存、仅API走网络」的需求。

实现步骤： #

1. 注册Service Worker
   在WebApp入口页面（比如test.jsp）中加入注册逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker 注册成功:', reg.scope))
      .catch(err => console.log('Service Worker 注册失败:', err));
  });
}

2. 编写Service Worker核心逻辑（sw.js）
   通过监听事件实现资源缓存和请求拦截：

// 缓存版本号，更新静态资源时修改此值即可触发缓存更新
const CACHE_NAME = 'webapp-static-v1';
// 需要缓存的静态资源列表（根据实际项目路径调整）
const CACHE_ASSETS = [
  '/poc/test.jsp',
  '/css/main.css',
  '/js/core.js',
  '/images/logo.png'
];

// 安装阶段缓存指定静态资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHE_ASSETS))
      .then(() => self.skipWaiting())
  );
});

// 拦截请求：静态资源走缓存，API请求直接走网络
self.addEventListener('fetch', (event) => {
  // 根据实际API路径规则判断是否为API请求
  const isApiRequest = event.request.url.includes('/api/');
  
  if (isApiRequest) {
    event.respondWith(fetch(event.request));
  } else {
    event.respondWith(
      caches.match(event.request)
        .then(cacheRes => {
          // 缓存命中直接返回，未命中则请求网络并缓存新资源
          return cacheRes || fetch(event.request).then(networkRes => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkRes.clone());
            });
            return networkRes;
          });
        })
    );
  }
});

// 激活阶段清理旧版本缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      );
    })
  );
});

原生WebView辅助配置 #

配合前端方案，在Android/iOS端调整WebView配置，强化缓存效果：

Android WebView #

WebSettings webSettings = webView.getSettings();
// 开启JavaScript支持（Service Worker依赖）
webSettings.setJavaScriptEnabled(true);
// 允许DOM存储API
webSettings.setDomStorageEnabled(true);
// 缓存模式：优先使用缓存，缓存不存在时请求网络
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 设置缓存路径与大小
webSettings.setAppCachePath(getApplicationContext().getCacheDir().getAbsolutePath());
webSettings.setAppCacheEnabled(true);
webSettings.setAppCacheMaxSize(10 * 1024 * 1024); // 10MB

iOS WKWebView #

let config = WKWebViewConfiguration()
// 使用持久化存储，支持离线缓存
config.websiteDataStore = WKWebsiteDataStore.default()
// 初始化WebView
let webView = WKWebView(frame: view.bounds, configuration: config)
// 若测试地址为HTTP，需额外配置允许加载非HTTPS资源（HTTPS可忽略）
if #available(iOS 10.0, *) {
    config.mediaTypesRequiringUserActionForPlayback = []
}

创新优化建议 #

1. 原生预缓存：App首次启动时，通过原生网络请求提前下载WebApp核心静态资源（如首屏JS、CSS、图片），写入WebView缓存目录，让用户首次打开WebView时直接复用缓存，进一步缩短首次加载耗时。
2. 资源分级缓存：将静态资源分为「核心资源（首屏必需）」和「非核心资源（非首屏）」，Service Worker优先缓存核心资源，非核心资源在首屏加载完成后异步缓存，平衡首次加载速度与缓存覆盖率。
3. 主动更新触发：通过WebSocket或App推送通知，当服务器静态资源更新时，主动通知WebApp触发Service Worker缓存更新，避免用户长时间使用旧资源。

内容的提问来源于stack exchange，提问作者Pankaj