Unusual actions observed in Ionic 3 app using webview 3 plugin

I am currently facing a significant problem with Webview 3. One of our developers upgraded it to webview 3 without utilizing the Ionic native webview plugin, and surprisingly, it is functioning well on our Ionic 3 application. As per the documentation available in this document, there have been breaking changes noted such as:

"Replace any usages of window.Ionic.normalizeURL() with window.Ionic.WebView.convertFileSrc()"

However, this modification was not implemented by the developer, but the functionality related to the camera is still operational. For example,

imageURI = normalizeURL(imageURI)
continues to work effectively on webview 3. Could you provide insights into why this behavior persists and what potential issues might arise for the application in the future?

Here are the relevant files:

package.json

{
    "name": "amr",
    "version": "3.0.1",
    "author": "Ionic Framework",
    ...

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="mobile" version="4.5.32" versionCode="4.5.32" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
...
        <content src="index.html" />
    </widget>

Upon following the instructions provided in this documentation for an ionic 3 application, it resulted in displaying this error on the device instead. Is there an explanation for this discrepancy?

Git repository: https://github.com/Sampath-Lokuge/webview-3-with-ionic-3

angulartypescriptwebviewionic3cordova-plugins

Answer №1

normalizeURL invokes convertFileSrc internally and issues a warning indicating it is considered deprecated. This functionality may be removed in the upcoming major release, so you are secure for now, but not guaranteed in future releases.

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

What is the title of the commonly used state management approach in rxjs? Are there any constraints associated with it?

When working with Angular applications, it is common to use the following approach to manage shared states: import { BehaviorSubject } from 'rxjs'; interface User { id: number; } class UserService { private _users$ = new BehaviorSubject([]) ...

angularreduxrxjsngrxflux

What is the best way to extract the ID from an event in TypeScript?

HTML Code: <ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event)" ></ion-checkbox> TypeScript Code: onTap(e) { console.log(e); console.log(e.checked); } I am trying to retrieve the id of the checkbox. H ...

javascriptangulartypescriptionic2

How can I utilize npm with the original source code instead of minified or bundled code?

I am looking to access npm and JavaScript (or TypeScript) 3rd party libraries directly from the source code. Similar to how I can make changes in Python libraries by going into their source code, I want to have the same capability with my JavaScript depen ...

javascriptnode.jstypescriptnpm

Utilize swipe gestures in tables with Angular and Ionic for enhanced user interaction

I'm working on creating a swiping functionality for table pagination. Swiping right will take you to the next page, while swiping left will move you back to the previous page. Here's the code snippet of my table: <table #tableElement id=&qu ...

angularionic-frameworkswipe

Error encountered while installing Material UI in Next.js with TypeScript and pure JavaScript configurations

I'm brand new to React and Next.js, so please forgive me for asking what may seem like a silly question. I'm attempting to install Material UI in a fresh Next.js application that I created using "npx create-next-app@latest". I've been refere ...

javascripttypescriptmaterial-uinext.js

Could someone show me how to modify the color of Material UI Label text in Angular?

Currently, I am developing my Angular university Project using the Mui library. In my logIn form, I have a Dark background and I would like to change the color of my Label Textfield to something different. Can anyone provide assistance? ...

angularmaterial-ui

What is the process for installing both highcharts-angular and highcharts together?

UPDATE: Issue resolved - the problem was that the package.json file was read-only (refer to my answer). I have an Angular application (version 7) and I am attempting to integrate Highcharts. I am following the guidelines provided by highcharts-angular her ...

angularnpmhighcharts

What is the process for including a dependency in an npm package in order to install another npm package?

As I work on creating an npm package for my Angular app, I find myself in need of including a dependency that already exists on npm. My dependency object will include the following entries: "dependencies": { "@angular/animations": "^6.1.0", "@angu ...

angularnpmbuild-dependencies

Adding an interface for an object containing multiple objects requires defining the structure and behavior

I'm in the process of designing an interface for my object. Here is the data structure of the object: { "isLoaded": true, "items": { "0": { "name": "Mark", "age": "40" }, "1": { "name": " ...

typescript

The Influence of Getter Performance in Angular Templates

As I delve into an existing Angular application, I've noticed a pattern where values used in templates across many components are actually properties that are being accessed through getters and setters without any additional logic: <input type="nu ...

angulartypescript

Two lines in ChartJS with distinct fill gradients for each

I am facing an issue with ChartJS version 2.6 in my Ionic 3/Angular 4 app. I have set up a line chart config with 2 datasets, but I am struggling to apply individual fill gradients to each line. What I am aiming for is something like this: https://i.stac ...

angularionic-frameworkchart.js

simulate the behavior of a promise function within a class

I'm facing an issue with this class structure: @Injectable() class ServiceOne { method1(): Promise<any>{ return new Promise((resolve,reject)=>{ // performing some operations let value = 1; resolve({'value':1}); }); } ...

angular

Merging Promises in Typescript

In summary, my question is whether using a union type inside and outside of generics creates a different type. As I develop an API server with Express and TypeScript, I have created a wrapper function to handle the return type formation. This wrapper fun ...

typescriptexpresstypeerror

Sorting a list based on user-defined criteria in Ionic 3

Currently working on a project using Ionic and Firebase, I am faced with the task of comparing arrays produced by users with those stored in Firebase. This comparison is essential for filtering a list of products. The user can reorder a list containing 3 ...

javascriptarraysfirebaseionic3angularfire2

Utilize a Typescript library within a separate Typescript library

I have a TypeScript library on GitHub that I want to install using npm install --save git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f38362b1d15c3f4">[email protected]</a>:User/mylib.git into my targ ...

node.jstypescriptnpmnpm-install

A guide to merging two JSON objects into a single array

Contains two different JSON files - one regarding the English Premier League stats for 2015-16 season and the other for 2016-17. Here is a snippet of the data from each file: { "name": "English Premier League 2015/16", "rounds": [ { "name": ...

javascriptangulartypescript

"Encountering a module not found issue while trying to

Attempting to test out 3 node modules locally by updating their source locations in the package.json files. The modules in question are sdk, ng-widget-lib, and frontend. ng-widget-lib relies on sdk, while frontend depends on ng-widget-lib. To locally build ...

node.jsangulartypescriptnpm

Is there a way to determine the specific type of a property or field during runtime in TypeScript?

Is there a way to retrieve the class or class name of a property in TypeScript, specifically from a property decorator when the property does not have a set value? Let's consider an example: class Example { abc: ABC } How can I access the class or ...

typescripttypesreflectionproperties

Enhance your MaterialUI Button with a higher order component that accepts a component

I am currently working on implementing a Higher Order Component (HOC) for the MaterialUI Button component: import {Button as MUIButton, ButtonProps} from '@material-ui/core'; import * as React from 'react'; export const Button = (props ...

reactjstypescriptmaterial-ui

Activate backdrop feature in offcanvas mode

When trying to open an offcanvas panel, I discovered that adding show to its class is necessary for it to open. However, this caused the backdrop feature to stop working, and now clicking outside the panel does not close it. Is there a way to achieve the p ...

angularbootstrap-5