When there is a lack of internet connection, WKWebView does not reach completion or timeout

When using a WKWebView to navigate to a local HTML page, I encountered an issue with a remote Javascript asset tag that never finished downloading. This occurred even when the iOS device was not connected to the internet or had slow internet speeds.

The problem is that the WKWebView does not abort the download of this asset nor does it trigger any callbacks in the WKNavigationDelegate. This results in users being stuck on a blank HTML page that never fully loads and does not generate any errors.

In some cases, debugging with Safari's remote iOS Javascript debugger revealed an error message stating "Failed to load resource: The Internet connection appears to be offline" in the console log. However, on certain devices in Airplane Mode, the WKWebView does not seem to timeout or give up, preventing any WKNavigationDelegate callbacks from being executed.

To replicate this issue, one can use the iOS 8.2 simulator with a WKWebView iOS application, navigate to a locally served HTML file, insert a script tag with a remote URL, and then simulate a "100% Loss" Internet connection using Apple's Network Link Conditioner.

Is there a recommended approach to force a WKWebView to timeout or return an error/success callback to its WKNavigationDelegate in such situations?

Answer №1

Here is a suggestion:

WKNavigationDelegate

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error

If you encounter an error, make sure to check the error code, which could be -1009 in most cases:

For more information on error codes, refer to: Error Codes

Answer №2

To ensure your remote script has loaded on your HTML page, you may need to include a small snippet of JavaScript code that runs a timer and checks for any loading errors.

If the script fails to load, the JavaScript can display an error message directly on the page or notify your application using a script message handler.

(It appears that HTML does not have a built-in API for detecting content loading errors, but you can find some insights on this topic at Verify External Script Is Loaded)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for ensuring the Google Maps API script has loaded before executing a custom directive on the homepage of an Angular website

Issue - I am facing issues with Google Maps autocomplete drop-down not working on my website's main page even after parsing and loading the Google Maps API script. The problem seems to be a race condition on the main page of my website, specifically i ...

Tips on maximizing efficiency in number game coding

Seeking to create a number using a specified set of 6+ inputs. For instance, aiming for the number 280 with inputs [2,4,5,10,30,50,66], the desired output format would be something like this: ((2+5) * 4 * 10). Each input number can only be used once per s ...

Animating the smooth collapse of panels within listviews

I have successfully implemented a smooth animation code for a collapsible panel, and it is working wonderfully: <script type="text/javascript"> function pageLoad(sender, args) { smoothAnimation(); } function smoothAnimation() ...

develop a hidden and organized drop-down menu using the <select> tag

I am currently developing a website for a soccer league. The site includes two dropdown lists with specific criteria, where the options in the second dropdown are limited based on the selection made in the first dropdown. My goal is to initially hide cer ...

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

Creating a new row does not result in the creation of a new span displaying the character count message

Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...

Deciphering the intricate mechanics behind _.bind

This block of code is an excerpt from the Underscore library, specifically showcasing the implementation of the _.bind function. However, I am struggling to comprehend the purpose behind modifying the prototype of an empty function. var customConstruc ...

Improprove jQuery code to eliminate redundancy

Is there a better way to improve the appearance of this code? Here is a condensed snippet of the HTML: <div id="template" style="display:none;"> <div style="position:relative;"> <fieldset> <img class="sm_kont" ...

Creating a Mongoose schema to store an array of objects, where updates will automatically add new objects

const mongoose = require('mongoose'); module.exports = mongoose.model('GridModel', { Request_Id : { type : Number, required : true }, viewStudents : { type : Array , default : [] } }); The mongoose model above needs to b ...

Ubuntu is experiencing a DNS problem. While the URL request works perfectly on MacOSX, it is unsuccessful on Ubuntu

A custom nodeJS script has been developed to utilize the require('request').post() method. The script executes successfully on MacOSX (Travis), however encounters issues on Ubuntu (Travis). To troubleshoot, experimentation with NodeJS 'https ...

python extract values from a JSON object

I've been searching everywhere, but I haven't been able to find a solution. It seems like my question is not clear enough, so I'm hoping to receive some guidance. Currently, I am working with turbogears2.2. In my client view, I am sending a ...

Animating Page Transitions using Angular 2.0 Router

Seeking to implement animated transitions for new components using the onActivate method in Angular 2. A Plunk has been set up to demonstrate the issue at hand: http://plnkr.co/FikHIEPONMYhr6COD9Ou Here is an example of the onActivate method within a pag ...

The Tab component's onClick event is nonfunctional

I am currently utilizing the Tab feature from the material-ui library in my React project. As I try to come up with a workaround for an issue I am facing, I notice that my onClick event listener is not being triggered. An example of one of the tabs: < ...

Increase visibility, decrease visibility by utilizing ng-hide/ng-show and functions

As I implement the show more/show less feature, I am uncertain if achieving a smooth effect is feasible. However, I believe it's worth reaching out to this community for some creative ideas on how to make it possible. I have a list of dynamic links w ...

Using jQuery and Bootstrap in an ASP.NET Core project

I am encountering an issue with the configuration of bootstrap and jquery within my project, causing these tools to fail to load properly. The problem seems to be that bootstrap is loading before jquery, resulting in error messages appearing when I check ...

Using the .show() function will not alter the outcome or trajectory

I am currently working with some divs in my project where I want to implement the JQuery functions .show() and .hide(). However, I have encountered an issue where I am unable to change the effects or directions of these animations. Here is a snippet of th ...

How can components be utilized with v-edit-dialog?

Hey there, I've been exploring the v-edit-dialog component offered by Vuetify and had a query about its implementation. Currently, I'm structuring my v-data-table in a way where I'm importing a component with props into a template slot. The ...

Comparing strings in JavaScript arrays

I have developed a JavaScript function that compares two strings and calculates the number of similar characters using a specific logic: String 1 = “aaabc” | String 2 = “aakbc” ===> The function returns 2 String 1 = “88835” | String 2 = “ ...

I am struggling to decide which attribute to use for implementing image swap on mouseover() and mouseout()

I have a problem using jQuery to switch between images when hovering on and off. Here's the code snippet I'm working with: HTML <img class="commentImg" src="images/comments.png" data-swap="images/comment_hover.png" alt=""> jQuery $(" ...

Updating content with jQuery based on radio button selection

Looking for assistance with a simple jQuery code that will display different content when different radio buttons are clicked. Check out the code here. This is the HTML code: <label class="radio inline"> <input id="up_radio" type="radio" n ...