Skip to content

Can't load local files in a WebView on iOS devices #4443

@EddyVerbruggen

Description

@EddyVerbruggen

I hear you think: "not this one again!?". Bear with me.

Tell us about the problem

Loading a local file like <WebView src="~/webview-content.html"/> fails when doing tns run ios on an iOS device. A simulator is fine, as well as Android.

The problem is the space in the calculated path to the file: /var/mobile/Containers/Data/Application/C015FB8D-32BA-43FF-A518-DDA6B5A4F5EA/Library/Application Support/LiveSync/app/path-to-webview-content.html, the space at Application Support breaks loading the content. Replacing it with %20 fixes it.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

  • CLI: 3.0.3
  • Cross-platform modules: 3.0.1
  • Runtime(s): tns-ios 3.0.1
  • Plugin(s): n/a

Please tell us how to recreate the issue in as much detail as possible.

Created a minimal demo app with instructions.

Fix

Submitted #4444

Temporary workaround

Until the PR is merged and released you can load content like this (Angular-TypeScript example, but it the same idea for any stack):

<WebView [src]="webViewSRC"></WebView>
import * as fs from "tns-core-modules/file-system";

public webViewSRC: string = encodeURI(`${fs.knownFolders.currentApp().path}/path-to-webview-content.html`);

Once the issue is fixed you can replace that with:

public webViewSRC: string = '~/path-to-webview-content.html';

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions