So I am trying to download a complete HTML page in a React-Native app , so that the user can view the page later when they are offline too. I am rendering the page using WebView and it works without any issues when online.
For getting it offline, I am doing a axios.get to fetch the page and I'm storing it. But when I'm rendering this page I noticed that its missing all the css/images since, they were not part of the GET request. How can I download the complete HTML page and render it as it were online?
I'm not able to think of any way to download all the page's assets.
You need to download all referenced assets and possibly change references so they work locally. There are a few tools that can do this.
The simplest way is probably by saving the website using your web browser. This may or may not work the way you expect but it’s worth trying.
If it’s not enough, try tools like HTTrack or wget. Instructions here.
it similiar with my current issue, im facing with long time download aset time when user try to open the webview, its reduce UX anyway, then we should do something for better performace, and i found this package
https://www.npmjs.com/package/react-native-static-server
but i worry about the long term maintenance of this package, if the package some day not updating their package when react native updating their library, ist gonna be worst scenario.
Related
Browsers cache static files. It's what they're designed to do. 99% of the time, that's a good thing. Until we as developers update that static content.
If a developer updates a javascript file, but a user's browser pulls the cached version of it, then:
Best case, it'll be missing some new functionality until the browser decides to update its cache
Worse case, if you also updated the html page to call a javascript function that didn't exist in the older version of the javascript file that the browser cached, your page breaks
As developers, we know to hit Ctrl+Shift+R, or Ctrl+F5, or open dev console, disable cache on the Network tab, and reload. But users don't know that.
What is the best practice to handle updates to static content?
Is it to make sure that when you add new functions to a .js file, you push out the update to production a few hours/days before you update the html to call that function in <script> tags, allowing browsers to updated their cache over that time?
Is it to not call javascript functions from HTML within <script> tags at all?
Is there a way to somehow force browsers to expire cache on a specific static file when you update it?
Something else?
Obviously disabling all caching on your site is possible, but not a realistic solution.
PS. I'm not using any kind of frontend framework - just raw javascript/jquery. If the situation is different with frontend frameworks, I'd love to heard about that too at a high level
If I understand correctly, you want the JavaScript file to be updated for the user when you update. you should use service work API to create a cache version for specific files or use the Google workbox library. click here. for service worker API click here
Some years ago location.reload(true) allowed bypassing the cache like CTRL / Command+Shift+R does. Only Firefox continues to support this feature by now, but the hard reload using javascript is no longer supported on chromium based browsers. (spec doesn't describe this feature (anymore))
This change was also discussed on this issue on github/Microsoft/TypeScript and several other places on the web.
jQuery uses a simple workaround to be compatible with almost everything. If you load something with jQuerys jQuery.ajax({ url, cache: false }), it appends a _=TIMESTAMP parameter to the url, which has a similar effect but may bloat the cache.
You can make use of the Entity tag header (ETag). Entity tags are similar to fingerprints and if the resource at a given URL changes, a new Etag value must be generated by the server, which is a similar behavior to the Last-Modified header. (caniuse:etag)
Entity tags in: Apache, IIS, nginx (nginx docs), nodejs
It is also possible to clear the sites cache with a Clear-Site-Data: "cache" header. (mdn, caniuse:clear-site-data)
We are currently looking at porting a enterprise silverlight application over to html5. The major roadblock that we have hit is the ability to open files from the user's local disk. Currently they have a document library which just links to files on their computer that they can open from within the app and view or print out. All that I read is that you can only access the local sandbox of the web app with the html5 file api's. We want to load these files from code.
Does anyone know of any workarounds to this?
Thanks
There is no way for html5 to access local file without user selection. But FSO: FileSystemObject works for IE and MAYBE could be regarded as a work around. But still there are some requirements to meet.
It is possible to use chrome's filesystem API to access files on a users local filesytem. So you'd have to be willing to make this a chrome only application.
Using java you can create a "Signed" applet which has access to the local filesystem. (if the applet is signed you can request filesystm permissions)
then there is a tutorial for accessing methods of your java code directly from javascript here: http://docs.oracle.com/javase/tutorial/deployment/applet/invokingAppletMethodsFromJavaScript.html
you should be able to perform something similar from silverlight.
There is no workaround in pure HTML5/Javascript. You need the use of plugins, such as Java or Silverlight (maybe you shouldn't port it after all). As for workarounds, HTML5 gives you an easy way drag and drop multiple files that you could transfer on the server and then display back to your users. Another workaround would be to install a custom agent (a software with only a tray icon) that would send the information about the current user "document library" to server and then again, you could display it back to the user.
Note: I've heard somewhere that browsers will eventually stop supporting plugins. http://www.howtogeek.com/179213/why-browser-plug-ins-are-going-away-and-whats-replacing-them/
Ya, I agree with Markain. However, if you were to limit your audience solely to chrome users, I daresay, you would most likely use some of your users. If Huazhihao is right, then your number of leaving customers should decrease but users who regularly use firefox won't be happy. Overall, I think that this will not work. Otherwise, there would be too many websites that trashed your hard driver (or at least wherever you have the rights to edit/delete files). I think it would be best if your product was setup to synchronize the file whenever an internet connection was detected and a change was made to the file. That way the user would not need to visit the website whenever the file was uploaded. If this is some kind of an error file, then it would be most beneficial if you were to make a link in the application that when clicked, would upload the file to the website and the website were to do whatever was necessary. If this is a purely online thing, then I don't see what business you would have looking through other peoples' files =-). Hope I helped!
Overview
I am trying to make a Chrome Extension that takes the currently open html page and all its dependencies (CSS, JS) and uploads it to a custom domain via FTP. I would then be able to open it on my phone to make sure the website looks good on a phone.
Basically, I am trying to replicate the VSCode extension Live Server's functionality, but with it uploading the file to a custom domain. I know you'd normally be able to access live server's locally hosted server from a phone, but my university's internet setup doesn't seem to allow for this, hence my desire for an extension like this.
All I know about my hosting service is that it uses cPanel and supports FTP, which I assume is all I need. I can set up new FTP connections and logins. All the FTP details in the code will be hardcoded, but drawn from a separate file and .gitignored so they aren't in my commit history, which I hope is enough.
What I've Tried & What I'm Stuck On
I have most of the chrome extension stuff figured out; The FTP transfer process is what's giving me issues.
I first tried using chrome-app-ftp, but quickly realized that was old and was running into issues, so I switched to jsftp.
I used browserify to fix the "require" issue, and that cleared up some stuff.
I'm currently stuck on the following bug:
Error: TypeError: createConnection is not a function
I've done my research, and I do not think the error is because of an issue in my code; I believe that it is just a limitation of the tools I am using. This seems to be an issue with front-end JS not supporting the "net" module, which brings me to my question.
My Question
How do I circumvent my lack of support for the "net" module in the front-end? Do I need to set up some sort of local back-end for this with node or something like that? I have basically zero experience with anything back-end, so I might need pointed towards what sort of back-end is best for this. I more just need to know which tech stack is best for doing this.
If additional information is necessary I'll be checking back frequently and happy to help. Thanks in advance.
Title pretty much says it all. Your help is greatly appreciated. I'm so happy that I just got the JavaScript to show up in the first place, now only if it actually updated when I changed it, I can actually starting using JavaScript effectively in my portal project.
Help is MUCH appreciated!!!
If you running your project from JDeveloper directly its supported just out of box, change your files and reload. Don't forget about browser cache.
Use OHS in front of your weblogic server and setup location for serving static files. Update as you do it with regular web server.
Quick and dirty (only for debugging/development stage). Embed your script in adf page using <af:resource> component.
We are developing a third party java script file that is implemented as a widget on many sites (That we do not control the code of).
This script may be updated from time to time (As we modify it/ add abilities/ fix bug ...)
As the browser saves most js files in cache, we need to have some sort of solution to tell the browser to reload the Script. of course a naive solution is to make re-load always, but this solution is not very efficient, and code changes should not accrue often.
Any idea how this can be done?
The solution of changing our script src/url with "?version=1.1.1" cannot be applied here as this widget is third party and we do not have any control on clients website codes.
Thanks.
Since you are the 3rd party and are giving your clients a link to the javascript file they need to include, have them point at your javascript with a url like this:
http://example.com/file.js
Then use a redirect on your server (Url Rewrite/htaccess etc) to point them to the latest version of that file. Lets say you versioned your script by putting it into a folder and your latest version was 1.3. You would setup the redirect from http://example.com/file.js to http://example.com/1.3/file.js. Then every time you release a new version, update your redirect to point to the new folder.
EDIT: More detailed explanation