Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gurov/ts-webview-pages
Simple boilerplate typescript code for building webviews. Without frameworks.
https://github.com/gurov/ts-webview-pages
android typescript webpack webview
Last synced: about 2 months ago
JSON representation
Simple boilerplate typescript code for building webviews. Without frameworks.
- Host: GitHub
- URL: https://github.com/gurov/ts-webview-pages
- Owner: gurov
- License: mit
- Created: 2017-06-05T01:07:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-06-06T07:20:04.000Z (over 7 years ago)
- Last Synced: 2024-10-30T02:44:28.318Z (3 months ago)
- Topics: android, typescript, webpack, webview
- Language: TypeScript
- Size: 65.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-webview-pages
Simple boilerplate typescript code for building webviews. Without frameworks. With authorization. Android v5+
Example in iframe [here](https://gurov.github.io/ts-webview-pages/dist/).
## Features
* Typescript (Fewer errors, easier refactoring)
* No frameworks (Extra small final bandle: **6kB** for [example](https://gurov.github.io/ts-webview-pages/dist/))
* A simple code (Without: two way bindings, reactive programming, etc.)
* Auth requests (Just pass authToken from Android)
## Description
**NOTE**: ts-webview-pages intended for small projects!
(4-5 pages with 2-5 articles)
### Structure of templates
* webview1.html
* article1
* article2
* ...
* webview2.html
* article1
* ...
Every webview has next javascript:
```javascript
// set name of webview
const CURRENT_WEBVIEW = 'dashboard';
```
### Structure of typescript code
```
src/
├── app/
│ ├── components/
│ │ └── webview1/
│ │ └── component1.ts
│ ├── webview1.router.ts
│ ├── index.ts
│ ├── models/
│ │ └── webview1.ts
│ └── services/
│ └── api-service.ts
└── templates/
└── webview1.html
```
#### index.ts
* Set `window.init` function
* Set auth tokens to `api-service.ts`
* Load `CURRENT_WEBVIEW` router
#### webview1.router.ts
* Set `window.onhashchange` function
* Load components by `location.hash`
#### component1.ts
* Call `api-service.ts`
* Push component template to page be html element id
#### api-service.ts
* API requests
## Webpack
Webpack script build the project to `dist` directory:
```
dist/
├── [hash].bundle.js
├── [hash].bundle.js.map
├── [hash].main.css
├── [hash].main.css.map
├── webview2.html
└── webview1.html
```
## How to use in Android
```java
@Override
public void onCreate(Bundle savedInstanceState) {
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
JSONObject authTokens = new JSONObject();
authTokens.put("authToken": "Bearer LKHLK...YUYI");
// pass tokens to js
view.evaluateJavascript("javascript:init('" + authTokens + "')", null);
}
});
webview.loadUrl("https://example.com/webview1.html");
}
```