2

I am developing an android app with HTML5 canvas, CSS, and JavaScript, using WebView. All content is stored locally on the device. I have made a simple, working app using this short video tutorial. The bare-bones app contains just two files (apart from HTML, CSS, and JS):

MainActivity.java:

package com.example.myappname;

import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebView;


public class MainActivity extends AppCompatActivity {

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null);

        webView.loadUrl("file:///android_asset/index.html");
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webview"/>

</LinearLayout>

When I expanded the app to include several JS files, I ran into CORS errors due to the same-origin policy.

From this post it appears that the flag allowFileAccessFromFileURLs is deprecated, and according to the official Android documentation you now have to use WebViewAssetLoader to load local content safely. The documentation on loading in-app content with WebViewAssetLoader provides several code snippets to demonstrate how it is done, this being the first:

private static class LocalContentWebViewClient extends WebViewClientCompat {

    private final WebViewAssetLoader mAssetLoader;

    LocalContentWebViewClient(WebViewAssetLoader assetLoader) {
        mAssetLoader = assetLoader;
    }

    @Override
    @RequiresApi(21)
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     WebResourceRequest request) {
        return mAssetLoader.shouldInterceptRequest(request.getUrl());
    }

    @Override
    @SuppressWarnings("deprecation") // to support API < 21
    public WebResourceResponse shouldInterceptRequest(WebView view,
                                     String url) {
        return mAssetLoader.shouldInterceptRequest(Uri.parse(url));
    }
}

I am an experienced developer, but this is my first Android project, and I have no prior experience with Java or Kotlin. The documentation does not provide a lot of context and assumes that the reader knows where to place the snippets. I need some guidance on where to place the code, and how to use it.

h4tt3n
  • 53
  • 6

0 Answers0