https://github.com/eddyverbruggen/nativescript-webview-utils
🕸Add request headers to a NativeScript WebView. Perhaps more utils later.
https://github.com/eddyverbruggen/nativescript-webview-utils
headers nativescript nativescript-plugin request-header webview
Last synced: 14 days ago
JSON representation
🕸Add request headers to a NativeScript WebView. Perhaps more utils later.
- Host: GitHub
- URL: https://github.com/eddyverbruggen/nativescript-webview-utils
- Owner: EddyVerbruggen
- License: apache-2.0
- Created: 2017-11-04T10:02:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-11T17:21:27.000Z (almost 4 years ago)
- Last Synced: 2025-04-14T23:13:06.691Z (14 days ago)
- Topics: headers, nativescript, nativescript-plugin, request-header, webview
- Language: TypeScript
- Homepage:
- Size: 2.16 MB
- Stars: 20
- Watchers: 2
- Forks: 17
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NativeScript WebView Utils plugin
Add request headers to a NativeScript WebView. Perhaps more utils later.
[![Build Status][build-status]][build-url]
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]
[![Twitter Follow][twitter-image]][twitter-url]
[build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-webview-utils.svg?branch=master
[build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-webview-utils
[npm-image]:http://img.shields.io/npm/v/nativescript-webview-utils.svg
[npm-url]:https://npmjs.org/package/nativescript-webview-utils
[downloads-image]:http://img.shields.io/npm/dm/nativescript-webview-utils.svg
[twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social&label=Follow%20me
[twitter-url]:https://twitter.com/eddyverbruggen
> For NativeScript versions older than 7, use a plugin version older than 4.0.0.
## Installation
From the command prompt go to your app's root folder and execute:
```
tns plugin add nativescript-webview-utils
```
## Usage
### Demo app (XML + TypeScript)
You can run [the demo app](https://github.com/EddyVerbruggen/nativescript-webview-utils/tree/master/demo) from the root of the project by typing `npm run demo.ios` or `npm run demo.android`.
## API
### `addHeaders`
If you're loading a page that requires you to send additional headers (for security perhaps),
this function allows you to dynamically inject those to any links within the webview.
#### NativeScript with Angular
```html
```
```typescript
import { EventData } from "tns-core-modules/data/observable";
import { WebView } from "tns-core-modules/ui/web-view";
import { WebViewUtils } from "nativescript-webview-utils";
export class MyComponent {
someSource: string = "https://httpbin.org/headers";
webViewLoaded(args: EventData): any {
const webView: WebView = args.object;
const headers: Map = new Map();
headers.set("Foo", "Bar :P");
headers.set("X-Custom-Header", "Set at " + new Date().toTimeString());
WebViewUtils.addHeaders(webView, headers);
}
}
```
#### NativeScript with XML
```xml
```
```typescript
// then add a few headers in the associated JS / TS file like this:
import { WebViewUtils } from 'nativescript-webview-utils';
import { WebView } from 'tns-core-modules/ui/web-view';
import * as observable from 'tns-core-modules/data/observable';
export function webViewLoaded(args: observable.EventData) {
const wv: WebView = args.object;
const headers: Map = new Map();
headers.set("Foo", "Bar :P");
headers.set("X-Custom-Header", "Set at " + new Date().toTimeString());
WebViewUtils.addHeaders(wv, headers);
}
```
### `setUserAgent`
This method was removed in 2.0.0 because it caused bugs when `addHeaders` was used as well.
You should now use `addHeaders` and set the `User-Agent` header:
```typescript
import { WebViewUtils } from 'nativescript-webview-utils';
import { WebView } from 'tns-core-modules/ui/web-view';
import * as observable from 'tns-core-modules/data/observable';
export function webViewForUserAgentLoaded(args: observable.EventData) {
const wv: WebView = args.object;
const headers: Map = new Map();
headers.set("User-Agent", "My Awesome User-Agent!"); // this line!
WebViewUtils.addHeaders(wv, headers);
}
```
## Credits
Quite some code was borrowed from [this repo](https://github.com/okmttdhr/nativescript-webview-custom-header).