Hey there! Let's tackle your two questions with practical, hands-on solutions that fit both frontend and Android WebView scenarios:

To pull this off, you'll need a combination of offline caching and strict resource restriction rules:

• Service Worker + Cache API: Core offline caching
  Service Workers act as a proxy between your app and the network, letting you cache local resources and control which requests are allowed. Here's a minimal implementation:

  // sw.js (service worker file)
  self.addEventListener('install', (event) => {
    // Cache all your local relative-path resources on install
    event.waitUntil(
      caches.open('local-app-v1')
        .then(cache => cache.addAll([
          '/',
          '/index.html',
          '/css/main.css',
          '/js/app.js',
          '/assets/logo.png'
        ]))
    );
  });
  
  self.addEventListener('fetch', (event) => {
    const requestUrl = new URL(event.request.url);
    // Only handle requests to localhost or same-origin relative paths
    if (requestUrl.hostname === 'localhost' || requestUrl.origin === self.location.origin) {
      event.respondWith(
        // Serve cached resources first; fall back to network if available
        caches.match(event.request).then(cachedResponse => cachedResponse || fetch(event.request))
      );
    } else {
      // Block all external resources with a 403 response
      event.respondWith(new Response('External resources are restricted', { status: 403 }));
    }
  });
  

  Register the service worker in your main HTML:

  // In your main page's script
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then(reg => console.log('Service Worker registered:', reg.scope))
        .catch(err => console.error('Service Worker registration failed:', err));
    });
  }
  

• Content Security Policy (CSP): Enforce resource restrictions
  Add a CSP meta tag to your HTML to block any accidental external resource loads at the browser level:

  <meta http-equiv="Content-Security-Policy" content="
    default-src 'self' localhost;
    script-src 'self' localhost;
    style-src 'self' localhost;
    img-src 'self' localhost;
  ">
  

  This will immediately reject any requests to external domains, even before they hit the network.

There are two reliable approaches here, plus full support for debugging tools:

实现方式 #

方案1: Frontend Service Worker + WebView Configuration #

Leverage the same frontend service worker setup above, then configure WebView to enable offline capabilities and enforce resource rules:

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();

// Enable core features for offline and JS support
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAppCacheEnabled(true);
webSettings.setAppCachePath(getApplicationContext().getCacheDir().getPath());

// Block external resources with WebViewClient
webView.setWebViewClient(new WebViewClient() {
  @Override
  public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    String url = request.getUrl().toString();
    // Allow only localhost or local asset files
    if (url.startsWith("http://localhost") || url.startsWith("https://localhost") || url.startsWith("file:///android_asset/")) {
      return super.shouldInterceptRequest(view, request);
    } else {
      // Reject external requests
      return new WebResourceResponse("text/plain", "UTF-8", new ByteArrayInputStream("External resources are not allowed".getBytes()));
    }
  }
});

// Load your local or localhost URL
webView.loadUrl("http://localhost:3000");
// Or load from assets if you bundled frontend files: webView.loadUrl("file:///android_asset/index.html");

方案2: Bundle Frontend Assets Directly in Android #

If your frontend is static, package all HTML/JS/CSS/image files into Android's assets directory. Loading file:///android_asset/index.html ensures all resources are loaded locally by default—no need for a service worker. Just enable WebView's cache settings to ensure offline access.

工具支持 #

• Chrome DevTools: Fully Supported
  You can debug the WebView just like a regular Chrome tab. Enable debugging in your WebView:

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
  }
  

  Then open Chrome on your desktop, go to chrome://inspect, and select your connected device's WebView to access the full DevTools suite (network tab, console, service worker inspector, etc.).

• JS Solutions: Fully Supported
  All standard frontend JS APIs (Service Worker, Cache API, CSP) work in WebView as long as you've enabled JavaScript and related storage permissions (like DomStorageEnabled). You can reuse the exact same frontend code from your web implementation.

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