NativeScript, WebView show local HTML file if offline

Question

In NativeScript how do I show a local HTML file if the WebView is offline.

In this example I try to load a string instead of a file. But I can't get this to work ether.

    let errorHtml = `
        <html>
            <style>
                body {
                    background-color: red;
                    color: #fff;
                }
            </style>
            <body>
                <h1>Error</h1>
            </body>
        </html>
    `;

    webView.on(webViewModule.WebView.loadFinishedEvent, (args) => {
        if (!args.error) {
            loadLanguagesInWebView();
            listenLangWebViewEvents();
        } else {
            webView.src = errorHtml;
        }
    });

    webView.src = "www.google.com";

Manoj · Accepted Answer · 2019-01-21 11:13:26Z

1

If you have included HTML files locally within your app, you don't have to worry whether the device is offline.

If you are asking about loading a remote website when device is offline, then it has nothing to do with the WebView.

It's all you have to do with your web app, implement Service Worker API. I use Angular for my web apps, all I had do was to enable the service worker module to get offline support for my web app. Depending on your web app's tech stack, you might have to do similar adjustments.

answered Jan 21, 2019 at 11:13

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Erik Andershed Over a year ago

I have a WebView loading a site from a server. But I like to show an “offline” page (html file local) saying something like “there is no internet connection”.

Manoj Over a year ago

If the site is not in your possession, then you can just listen to WebView's loadFinished event and if there is an error and connectionType is none, then set the error message on WebView.

Erik Andershed Over a year ago

I updated the question with the code I have today. But I can't get the error page to show if the main page (exemple google.com) is not loaded.

Manoj Over a year ago

It seems to work just fine for me - Playground Sample

Erik Andershed Over a year ago

But if I set my phone on flight mode and restart the app the error page is not show up. Its is just blank. How do I get the error page show up if there is no connection?

Collectives™ on Stack Overflow

NativeScript, WebView show local HTML file if offline

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related