Is there any way to load local images in WKWebView? - html

i'm creating an application that generates invoice .It uses html and javascript.Every thing is working perfectly but it is not showing logo image.Any help would be appreciated.

You can load resources from your app's bundle via a custom URL scheme, e.g. my_url_scheme://logo.png (replace my_url_scheme with something unique of your choice).
You need to implement a WKURLSchemeHandler and registering it with your WKWebView via -[WKWebViewConfiguration setURLSchemeHandler:forURLScheme:]. Your WKURLSchemeHandler will be responsible for handling any requests with the my_url_scheme:// scheme, and can load the appropriate resource from the app's bundle and return it there.

Related

Vue-Nuxt: Why can't I see the generated HTMLs correctly?

So when I type npm run generate Nuxt generates my project into the dist folder. In that folder I can find a folder called _nuxt where I have .js files and the index.html file but when I open it in a browser it doesn't show anything.
So, my question is: Aren't those static files?
When you work with the CDN served vue.js you have the html file and you click and everything is showed on the browser because those .html files are static, they don't need an internal localhost server. Why npm run generate doesn't do the same? Or how can I see those generated files?
As #aljazerzen explained, Vue,js doesn't do SSR out of the box, one of the aims of Nuxt.js is to provide SSR for you, as a benefit you can also generate a static version of your website. If I get what you want correctly, what you want to do is that when you open your index.html (the one that Nuxt.js generates for you) you can see your functional webpage. When you're accessing your website as a file:/// url, your browser (at least I've seen it happen with Chrome) doesn't load your .js files.
I don't have any Nuxt generated websites at hand so I can't tell you exactly why this happen. But this is my guess: when Nuxt generate those files it gives them a src that can't be accessed as file:///, maybe something as /your_js.js, that when it tries to load it, thinks it's the / of the root folder instead of relative to your website's root (/).
The solution to this problem is to serve your assets using any web server. According to Nuxt.js's documentation:
nuxt generate :Build the application and generate every route as a HTML file (used for static hosting).
You could do a quick test and use a simple web server by typing:
python -m http.server
In the folder that contains your generated assets.
Hope this helps!
Nuxt uses server side rendering.
You can read more here.
To generate static HTML files, run:
nuxt generate
Explanation: Vanilla Vue.js application is rendered only when the page loads and JavaScript can start running. This means that some clients that do not have JavaScript enabled (web crawlers) won't see the page. Also for a brief second before Vue.js can render the page, there is blank screen, when plain HTML files could already be visible.
Now, server-side rendering (SSR) is a technique for rendering a single page app (SPA) on the server and then sending a fully rendered page to the client. The client’s JavaScript bundle can then take over and the SPA can operate as normal.
This can also help with SEO and with providing meta data to social media channels.
But on the downside (as you mentioned), such application cannot be hosted at a CDN, since you have to have a Node.js process running to render the page.
In my opinion, SSR is redundant with SPAs if what you are building is actually an application and not a website. A website should mostly display information and should not be interactive. It should leverage web-based mechanisms such as links, cookies and plain HTML with CSS. In the contrast, web application (eg. Vue.js application) should be more like a mobile application: it is larger to download, but performs better and offers much more interactive experience. Such application does not need server-side rendering, since we can wait for it to load a bit more and because it shouldn't be indexed by search engines (it is not a website).

Will there be an offline webview from local asset html-files in Flutter?

I guess this is just another feature request for Flutter presenting a local webpage as a WebView Widget - and all of it OFFLINE and originating from html, css and other asset files.
There are several Flutter plugins that are able to show a webView from a URL (being online) - but I haven't seen a solution yet for presenting a WebView from local assets offline.
A typical webpage with several pages (files and folders placed in the Flutter assets) would look like this:
index.html
page1.html
page2.html
/images/img1.jpg
/images/img2.jpg
/css/p1.css
/css/p2.css
etc.
I read the following discussions (see links below) and more but I don't grasp from it if there will ever be the technical possibility in Flutter for an offline WebView Widget or not.
Is it just a matter of time we have to wait for a plugin-team to implement this - or will this never be possible in Flutter at all ? I would like to receive a more fundamental answer than what I am able to grasp after having played with Flutter for 5-6 weeks.
Here is some discussion I've found about the subject:
How to display custom html instead of URL #23
Load HTML from assets or local files #27086
The inAppWebView plugin does this procedure to read offline html file or online:
Link to the plugin:
https://pub.dev/packages/flutter_inappwebview#-installing-tab-
Example:
InAppWebView(
initialFile: "assets/index.html"
)
Where in initialFile you pass the path of your HTML file that is inside your flutter project.

Generating static pages for React

The goal is to have my React app running client-side on Amazon S3 (CDN), and have the news files generated so that I can have meta tags for social sharing (mostly because of Facebook).
So for example if someone shares http://website.com/news/343434 then I would have the file /news/343434/index.html on Amazon S3, which would only have the head section filled for the meta tags, and one div in the body with the id root for the React app to attach.
The problem with this method is that the generated files don't know the reference to the main.js file because of the hash that is added to the file name for cache busting. And even if I did, that would mean I would need to re-generate all the news files whenever the React app is deployed, since the hash would change.
I had another idea of having a lambda function on AWS that would basically return the template file filled with the correct meta tags and the reference to the main-{hash}.js file, etc. It seems to be the best solution that I can think of.
Are there any other solutions that might work well?
There are frameworks that address server-side rendering for React Apps. Check https://github.com/zeit/next.js/ for example.

HTML5 read files from path

Well, using HTML5 file handlining api we can read files with the collaboration of inpty type file. What about ready files with pat like
/images/myimage.png
etc??
Any kind of help is appreciated
Yes, if it is chrome! Play with the filesytem you will be able to do that.
The simple answer is; no. When your HTML/CSS/images/JavaScript is downloaded to the client's end you are breaking loose of the server.
Simplistic Flowchart
User requests URL in Browser (for example; www.mydomain.com/index.html)
Server reads and fetches the required file (www.mydomain.com/index.html)
index.html and it's linked resources will be downloaded to the user's browser
The user's Browser will render the HTML page
The user's Browser will only fetch the files that came with the request (images/someimages.png and stuff like scripts/jquery.js)
Explanation
The problem you are facing here is that when HTML is being rendered locally it has no link with the server anymore, thus requesting what /images/ contains file-wise is not logically comparable as it resides on the server.
Work-around
What you can do, but this will neglect the reason of the question, is to make a server-side script in JSP/PHP/ASP/etc. This script will then traverse through the directory you want. In PHP you can do this by using opendir() (http://php.net/opendir).
With a XHR/AJAX call you could request the PHP page to return the directory listing. Easiest way to do this is by using jQuery's $.post() function in combination with JSON.
Caution!
You need to keep in mind that if you use the work-around you will store a link to be visible for everyone to see what's in your online directory you request (for example http://www.mydomain.com/my_image_dirlist.php would then return a stringified list of everything (or less based on certain rules in the server-side script) inside http://www.mydomain.com/images/.
Notes
http://www.html5rocks.com/en/tutorials/file/filesystem/ (seems to work only in Chrome, but would still not be exactly what you want)
If you don't need all files from a folder, but only those files that have been downloaded to your browser's cache in the URL request; you could try to search online for accessing browser cache (downloaded files) of the currently loaded page. Or make something like a DOM-walker and CSS reader (regex?) to see where all file-relations are.

cross domain rest dojo call

I have to load data for a different url the page will run on the android browser and will load content from remote server .
I have to use dojo so I tried with dojo.xhrGet , it does'nt load the data so when I red the reference guide I saw that that method has some limitation with external url's .
So what I have to do now if I have to call a REST service with dojo .
the REST service URL on the remote server:
http://192.168.1.65:9080/RAD8JAX-RSWeb/jaxrs/customers/accounts/111-11-1111/
and the data that I should see
[{"id":"001-111001","balance":12345.67},{"id":"001-111002","balance":6543.21},{"id":"001-111003","balance":98.76}]
please help me with a method that can fix my problem I dont know dojo well I'm blocked right now because I can't use the data between two application they can't communicate
Your question is unclear, but I think you are saying you want to load data from a different domain to the main web page.
You cannot reliably use AJAX to load data from anywhere other than the domain of page you are visiting.
Almost all modern internet browsers deliberately block that, for the protection of their own users.
Instead, you will need to find some way of getting your server to relay the information.
So imagine currently you do:
Load page a.example.com/index.html
Page uses dojo to try to load b.example.com/data
You would instead need to do:
Load page a.example.com/index.html
Page uses dojo to try to load a.example.com/data
When the a.example.com server receives a request to load /data, it should connect (perhaps using cURL) to b.example.com/data and then output the same text.