Buildfire - Load custom plugin on offline mode - buildfire

Our app is composed of several custom plugins. We would want our app to still work offline so our users will be able to navigate within the app even without internet connection.
The problem is when offline, we cannot switch to another plugin. It doesn't load and only displays the image below.
What's the best approach to this?

Assuming your app configuration has offline mode turned on
The builtin offline support is for the Datastore and ImageLib.
so if you use datastore to save your content then it should work in offline mode.
As for ImageLib as long as you use buildfire.imageLib.local that should support offline mode as well see docs here https://github.com/BuildFire/sdk/wiki/How-to-use-ImageLib

Related

Vue Frontend + NodeJS backend - local web app (browser)

I need to create an application which will be ran on the browser (local only, not hosted online). I will need to use a lightweight database which has a physical file (eg SQLite3, so I can have a .db file).
Also, just to mention:
I cant use IndexedDB alone to save the data because clearing browser data would clear the entire "database".
I also wouldn't be able to use electron since the bundle is too big. I need the browser for its portability
Also cant use PouchDB, since due to security constraints, online sync (CouchDB, etc) is not possible. Then it would be 100% stored in IndexedDB, which brings me back to my point on bullet 1
My question is - is there a way to create an offline web application build with VueJS frontend + NodeJS backend? I only need NodeJS because SQLite only works on the Node environment.
Deployment is preferably in .html only (is there any way that is possible, and access only using the file protocol file://)? Otherwise, I may consider using a local web server (localhost) - I'm not sure though if it is possible to serve an html file without any installations (node, python, etc), so I would still have to check all my options about this.
Any thoughts?
I am still new to this so please bear with me! There is very limited info online that talks about a 100% offline web application. Thanks a lot!

Buildfire: Debugging on IOS Test Flight

I can't seem to figure out why my plugin works fine on the Web App mode, versus the IOS Test Flight.
It seems like an angularjs dependency is not loading correctly, but I have no way of knowing.
Not sure what your app/plugin situation is precisely. However, a good place to start would be here https://github.com/BuildFire/sdk/wiki/App-Developer-Mode this will allow you to test your code live on the device without publishing. It hijacks the plugin and loads your localhost version so that you can test on the fly changes.
Also, you may want to try shipping logs with http://debug.buildfire.com this will allow you to read console logs remotely

How can I take advantage of ServiceFabric Autorefresh?

I recently read about ServiceFabric offering some kind of Autorefresh mode, considering its infrastructure and the cluster running independently.
So, according to what I've wrote, all I need to do it go to my project, check the properties and set the "Application Debug Mode" to Refresh Application.
Basically that is what I did now, but I don't quite see the difference. There's no repackaging happening at all.
Do I have to run some kind of cmdlet in the background, as it is the case with e.g. webpack watch?
The docs explains Refresh Application as follow.
Refresh Application This mode enables you to quickly change and debug
your code and supports editing static web files while debugging. This
mode only works if your local development cluster is in 1-Node mode.
This is the default Application Debug Mode.
On other application debug options, Visual Studio creates a package and deploy it to the cluster and register the application to run on Service Fabric, the package will contain all binaries compiled that are needed to run the application.
The main difference between the Refresh Application and the others, is that the package created is a symbolic link to the source in the Dev machine, you are not actually copying the package with the binaries, when you change the static files, it will be the same files used by the deployed application in SF, this will make more flexible to make changes without repackaging, registering and deploying the application on every change.
PS: It does not work the same way as the watch feature for nodeJs development, it is just to avoid the package deployment. You could just reload the page though.
This post explain in more details.

Offline web application with rewritten URL's

Using the Application Cache I can easily make my web application available offline and it works perfectly. The problem I am encountering is that I have recently started using a .htaccess file to rewrite urls from
http://www.example.com/?/page
to
http://www.example.com/page
After loading the 'homepage' in principal everything still works (as all pages are loaded through Ajax), but local bookmarks and the like do not work. Is there any way to add this functionality with a simple service worker, whilst still relying on the Application Cache for the rest of the offline functionality (thus allowing Firefox and Safari to fall back on the Application Cache, whilst Chrome and Opera would work perfectly offline).
Browsers that support service workers* use the presence of a service worker as a trigger to disable App Cache functionality for pages under the service worker's scope. See Is Service Worker intended to replace or coexist with Appcache?
I understand how using a service worker for something like rewriting URLs is independent from the offline use case, and therefore shouldn't interfere with App Cache, but there's no flag that you can use to say "Hey, this is a service worker that plays nicely with App Cache, so let me use both."
* This applies to Google Chrome. As other browsers add support for service workers, they might have different policies with regard to App Cache.

CRUD files on local (sandboxed) filesystem with chrome-extensions

I've been trying to do some CRUD operations to a local drive using chrome extensions.
I understand i won't be able to access the local file system directly, a sandboxed environment will do.
LocalStorage worked for data upto 5 mb. I'll be needing more.
I've found that setting "unlimitedStorage" won't grant more to the LocalStorage.
"unlimitedStorage"
Provides an unlimited quota for storing HTML5 client-side data, such as databases and local storage files. Without this permission, the extension or app is limited to 5 MB of local storage.
Note: This permission applies only to Web SQL Database and application cache (see issue 58985). Also, it doesn't currently work with wildcard subdomains such as http://*.example.com.
see chrome extension docs
I've then tried to use the FileSystemApi.
But it turned out that only chrome apps can use this api.
As far as i know I'm left with 4 other options:
WebSQL, which is deprecated.
IndexedDB, which looks promising
Application cache, referenced in the notes of the unlimitedStorage description.
Storage api, Which seems to be available for both extensions and apps
I've got a hunch that indexedDb will allow some form of CRUD. I'm reluctant to use WebSQL as it's deprecated and i've yet to find information about the Application cache, although i doubt that storing data for extensions is within the boundaries of its intended purpose.
Is it possible for chrome extensions to save, load and delete files on the local file system?
Am i misinformed about the LocalStorage Limitations or the use of the fileSystem Api in chrome extensions?
Will IndexedDB fulfill my needs?
Try with Cordova, Capacitor or similars.
In the browser, run the code in your test area, if you want to use your sandbox you need to run the application on the device (iOS, Android, Windows, Linux, etc.) and use native resources inside the sandbox, dont forget request permission.
If you work with ionic v4 you can use capacitor and mostest important is you can build for native app from web components to have your sandbox into native device!
Capacitor:
https://capacitor.ionicframework.com/docs/apis/filesystem/
Cordova:
https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html

Resources