ElectronJS - Cache HTML and JS files from remote server - javascript

I have an electron app that retrieves the app files (.html & .js) from a remote server using the function mainWindow.loadURL('http://www.example.com/index.html')
The problem arises if the users network connection to the internet is offline or disconnected.
Is there a way in electron to cache the html and js files so that if the user is offline, electron will automatically load from the cache.
I have tried to use the HTML5 Application Cache and a plugin for webpack https://github.com/NekR/offline-plugin but these do not seem to work.

I see this is an old question but I stumbled across this when doing a semi-related search and there is no answer at all right now, so I'll provide one:
Ignoring the Electron-specific nature of this question, the web-standard way to do this is using Service Workers. Here are some docs on that:
"Using Service Workers" from MDN - https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers - this is a reference source.
"Adding a Service Worker and Offline into your Web App" - https://developers.google.com/web/fundamentals/codelabs/offline/ - this is a tutorial.
"Creating Offline-First Web Apps with Service Workers" - https://auth0.com/blog/creating-offline-first-web-apps-with-service-workers/ - this is also a tutorial.
I think this would be the most direct way to solve this, even within Electron. (An advantage of Electron here is that you have a single, known browser to make this work for, but I think what you are trying to do fits perfectly within the problem-space that Service Workers are designed to address.)
That said, I think Sayam's comment/question is valid -- if this html/js is the actual content of your electron app, and assuming it doesn't change too often you could (and maybe should) distribute it with the app itself. Then you don't need to do anything special for offline support (as long as that html/js doesn't need network-based resources), and changes to that code are deployed as application updates.
Personally I think that once-per-week is about the maximum frequency of updates for which this approach is suitable. It would not bother me if an app auto-updated 2 or 3 times per month, but I think I'd uninstall an app that updates itself 2 or 3 times per week if I had that option.
There may also be some electron and/or node modules that address this problem-space, but I've never bothered to look because one of the two options above has always seemed appropriate to me.

Old question but still valid usecase (offline cache for dynamic assets).
here is article that describes one solution for that (own ExpressJS caching middleware). Author made npm library to address that.

Related

Best way to handle a freezing thread in electron js

I am working on a project in electronjs with vue cli.
I am making some api calls that by their nature freeze the thread they're in. The API is archaic, and I need to use https://www.npmjs.com/package/winax this npm package to handle the response and process it to xml/json/etc.
The fact that the app is freezing when I call the api is already a horrible thing and I needed to find a viable way to have those calls running in the background. I have tried worker_threads, and vanilla web workers but I couldn't require this crucial winax package so my last resort solution was to create a new BrowserWindow that loads a html file that has my API calling class in its script.
The method works as I'm hiding the window that freezes but this solution comes with a lot of problems as I am not able to export that class and call it somewhere else. Because of this I am required to use the remote module, set global variables in order to handle the communication between my API responses and the other windows in my app.
I would happily include any other details that I am allowed to, however I am quite restricted by the confidentiality of my project so I'll do my best.
My question is: does this seem like something you've encountered and could point me in the right direction on how to handle those troublesome API calls?
Electron version: 8.5.5
OS: Windows 10 Pro
The app is intended to work only on Windows
I do not have any technical nodejs/electron knowledge in my company - in case I get an answer telling me to go to my senior :D

Detailed explanation on how React Native softwares are updated

I am developing a React Native application. it's a framework to build mobile applications with JavaScript and deploy for Android & iOS with the same code base.
I read somewhere that RN applications are dynamically updated. It means, without releasing new versions to AppStore or GoogleStore, we can update it. It is awesome!
But my question is: how can we do so? I searched a bit and found out that it is possible with Codepush. If so, how? Is it a free tool or we should pay for it? If it's not free, Isn't there a free solution to this?
Also, by updating dynamically, are we limited to update only JS bundle or we are able to update external assets like new fonts, images, and etc?
I would be thankful if an expert guides me by details and workarounds.
Cheers.
Like it explains in CodePush website;
CodePush is a cloud service that enables Cordova and React Native
developers to deploy mobile app updates directly to their users’
devices. It works by acting as a central repository that developers
can publish certain updates to (e.g. JS, HTML, CSS and image changes),
and that apps can query for updates from (using our provided client
SDKs). This allows you to have a more deterministic and direct
engagement model with your end-users, while addressing bugs and/or
adding small features that don’t require you to re-build a binary
and/or re-distribute it through any public app stores.
This means you can update your Javascript code remotely without submitting your app through App Store or Google Play.
This service is currently completely free and you can use it in your app without paying any fees. There are also couple of more systems that are payed or free but I have never used them so I can't say anything about them.
This service does not let you change or update any of the native code so if you add any native code supported libraries or write one yourself or update any existing native libraries or codes, you need to publish the new version through the stores.
This types of services also help you to do A/B tests and alfa/beta tests.
You can find much more detailed information at CodePush website and Google.
Codepush is free and you can use react-native-code-push to use codepush service. You can use its document to have this service on your app.

Is there a way to run universal apps on Firebase Hosting?

I have recently deployed my Angular 2 application to Firebase hosting successfully and am really enjoying this set up so far, particularly on how easy it is to deploy using CI as well.
At the moment, I am looking at adding a universal server rendering support to my app, but I'm not sure if this is handled by Firebase Hosting, as it says it is static file only.
However, what made me think that this could be a potential feature that I am missing is that Firebase offers support for single page applications, hence I decided to ask.
If there isn't support for such apps, can we expect it in the future?
At the moment this is not possible. However since Angular 2, Google and Firebase go hand in hand I would say this it is just a matter of time.
In the meantime you can create a Node.js-based server, where you install Angular Universal, and have it connect to Firebase with the Firebase Node SDK.
Next, you simply communicate with that Node-backend from your Angular 2 application.
If you're using angularfire2, that will break universal either way. There's something in the package that calls "window" which doesn't exist on the server. Unless something changes with universal or angularfire this is a ways off
At the end of that video David East mentions that one can use Google Cloud Functions with Angular Universal and such: https://www.youtube.com/watch?v=R3v8EcYzf_M
The video itself is quite useful for firebase users. But the topic starts at approximately 23:30.
A different approach is to skip universal altogether and do something like this.
Rendertron is a headless chrome that can be launched. Similar to phantomjs. But universal gives speed.

Creating a single page web app as part of a website

I am working on a project which allows users to monitor energy consumption. The main dashboard page is a web app which is pretty neat and makes extensive use of javascript and ajax. The server currently runs apache and uses php; however, I am planning on installing node.js and updating the server side scripts in order to support websockets (and I also like the idea of using javascript on the server and client side).
I have followed several online introductions but I am struggling to find answers to specific questions, one of which is outlined below.
All guides to node seem to only support single page web apps. This is an issue as there are a number of different pages which require files to be served. How can I support file serving but enable one of the pages to use websockets. Does this functionality, which is only required for one page, need to be coded into the main server script on the site or is there a way of separating this so that the server goes to server the dashboard html file and then discovers that the file requires specific websocket dependencies?
Thank you very much for taking the time to read my questions. If you can answer any of them, or even provide any general advice, it would be greatly appreciated.
1: The only reason the guides do single page web apps is because that's node's forte. Node.js serves static files and rendered templates just fine. Just include the JS for the websockets only in the pages that need it.
2: It's not quite as simple as with php, but take a look at express.js
3: Yes, and really you shouldn't even need different ports, you can write a proxy in node in one line.
4: CentOS is fine, node is platform agnostic. All the linuxes have top support followed by osx, solaris and windows.

iOS application that self-updates javascript (or other interpreted) resources?

Based on several questions I've seen:
How to implement auto-updating iOS Apps from App Store?
auto upgrading iOS apps
Is it possible to have a self-updating iPhone application?
it seems pretty clear that apps are not allowed to "self-update" code on startup (or through some other mechanism within the app), since the new code was part of the app submitted to app store.
However, there are plenty of applications out there that do perform automatic updates on startup (for example, this popular game downloads several hundred MB on first startup) - it seems this type of thing is allowed for resources - as long as the download is data/resources - stuff that doesn't change the compiled code.
Technically, Javascript included with an app's resource bundle could be considered a resource, and so it's safe to auto-update any included Javascript. On the other hand, Javascript could be considered 'code', as it's interpreted by Webkit (in a UIWebView) and executed. If this counts as code, one could even go to the extreme and create some interpreter that runs commands included in the app based on contents of an xml file (very easily considered a resource) that gets auto-updated to the app. Would this count as 'code'?
So, my main questions I'm looking for answers to:
Where exactly is the line between 'resource' and 'code'? Does 'code' just mean 'compiled Objective-C'?
Are there any known examples of accepted apps that do something like this?
Also, since I'm sure it'll be asked, my main reason for wanting to download and execute the javascript locally instead of just hitting the remote site all the time is for performance / offline capabilities.

Categories

Resources