New Plugin: Browser Storage, Session, Local & Cookie Storage - Offline Storage

in the sense of running every X seconds the say a get the expiry & if expiry > 15mins from last action that caused an expiry update then sure… this isnt like an API call or back end data, its much smoother and without being nearly as prone to delays… remember, the code code is running in the browser, the data will be stored in the browser and for the most part any verify action would only require a small part of the data as in the date for instance.

1 Like

Yes I understand better. Thanks. Can be use for multitude purposes. :slight_smile:

even analytical data based on trends that can assume family’s based on same browser different login or even match time a users desktop browser key is seen as there mobile browser key… we eat when we are hungry kind of marketing… and programmatically sensing hungry is gold.

1 Like

and once again, thank you very much :slight_smile: you good to go. any question you know where I am. Cheers.

1 Like

Hi @jarrad , Would this be a solution to allowing an android app store my data locally? For example, I have a bubble app that’s basically a contact directory and I’ll be wrapping it in an android apk. I can’t connect without internet though and I’m hoping that this will allow my users to access the app’s data when offline. Thanks in advance!

Hi @jamesonvparker, Short answer is yes. You do not need to include any extra permissions (except the obvious <uses-permission android:name="android.permission.INTERNET" />) in your manifest file and the good thing (for us) is even if the user clears your apps cache the local storage will live because its actually stored in the webview cache. I want to mention thought that there is actually a backup/local storage on device feature set on the android OS that can web leveraged through webview if your writing your own wrapper but in your case specifically you could have your data push/sync to the default contacts as the backup but also as a feature point. I have seen a lot of posts based around android wrappers on the forum and ive been meaning to put my 2cents worth down as far as a few tips that can help out, here are a couple of java methods worth knowing should you be building your own wrapper.

  • .setJavaScriptEnabled(true);
  • .setAppCacheEnabled(true);
  • .setAllowFileAccessFromFileURLs(true);
  • .setAllowFileAccess(true);
  • .setAppCacheEnabled(true);
  • .setBuiltInZoomControls(false);
  • .setSupportZoom(false);
  • .canGoBackOrForward(0); - mainly for single page apps, it will stop even the return arrow key from leaving the app.

One thing that should be done is telling your webview container that it is only to use your domain or it will return to your domain,

yourWebViewsID = (WebView) findViewById(R.id.webview);
yourWebViewsID.setWebViewClient(new WebViewClient() {
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(url.contains("yourapp.bubbleapps.io")) {
      view.loadUrl(url);
    }
    return true;
  }
});

and also, if the user has the internet disabled, flight mode, no reception, bubble goes down and so on, its wise to include a method of returning the users view to a local stored html file (especially in your use case as its what will happen when the user is offline),

yourWebViewsID.setWebViewClient(new WebViewClient() {
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        yourWebViewsID.loadUrl("file:///android_asset/yourOwnHTMLFile.html");
    }
});

there really are no limits here when you go down the I’m doing it myself road, but my highest recommendation is to include firebase, see HERE.

1 Like

Thanks @jarrad that was an extremely helpful response. I will take the time to look into all of that. I followed a bubble tutorial on building an android apk and iphone app as a webview wrapper and it helped me create my first mobile app by mainly copying, pasting, and editing a bunch of code into android studio. I noticed that it would only work online though and this whole discussion seemed to be just what I needed as a solution. I look forward to trying this out and I’ll post my results back here. I’ll try to be detailed to help anyone new to it figure it out as well.

1 Like

Is it okay to set “current date/time” for expiry date in localStorage since it never really expires?

Yes this is perfectly fine. The reason it never really expires is so that the plugin isn’t forced to decide when to constantly check/test for the expiry - leaving the control with the user in case your expiry needs to be monitored in seconds or years.

I see - sounds great! Thanks lot :slight_smile:

Is it possible to store the results of an API call in local storage? I get a list of…books back: “Title, Author, Date Published”. I would like to store them so that I can then use them in a repeating group. This doesn’t seem to be possible at the moment.

1 Like

This is possible with some regex although then next update will include arrays & type’s.

1 Like

Havent quiet gotten the time to update this as described above, although you can now get data back from the browser in bulk. Just provide a list of the keys and grab the list of values from the custom state. Enjoy!

I’m using @jarrad browser storage plug-in and returning saved data from the visitors browser in bulk and displaying this in a repeating group. There are plug-ins and then there are plug-ins that deliver in spades… This clever add-in is the latter and brings within reach capabilities for my application that are not natively available in bubble’s core platform.

1 Like

Can this plugin be used to store images on local data ?

1 Like

How does this work exactly? There are currently 2 things I’d like to accomplish with my wrapped apps:

  1. load all the static content (the containers, headers, menus etc) with the apps first load so this will be much faster in use.
  2. store dynamic data also locally so it can be viewed when the device is offline. updating it on connection restore would be awesome but that is a next step. I already have a hard enough time getting my head around this.

I guess the html file is only there as a last safety net although I dont know what use it really has. I would have to recreate the home page view of my app in static html? most of that data is dynamic so that doesnt feel like worth the trouble.

Is anyone using this plugin for this? I guess its clear now that I have no clue of what I’m talking about! :stuck_out_tongue:

Also, @jarrad the link to the demo seems changed. How can I access it now?

Sorry about the demo, I haven’t had a chance to make one since i changed everything over…

The code is saying there is a “WebView” element in the apk’s activity, as you know we set a URL for that “WebView” element to display, the app get’s opened, the site loads in the element and all is good,

(noting that this webview container is like a bare bones web browser in the android OS and when enabled has its own cache & stroage, meaning Browser Storage can store data here and even when a user clears their normal browser or other installed browsers that the data will persist)

But, what would the WebView element show in the case of Airplane Mode, No Internet Access, Bubble Servers unavailable or any other reason for the virtual connection between phone and bubble servers being broken??

You will see the same as you do when your desktop browser cant connect to Bubble and it looks (in your app) about as professional as a used car salesman with a wobble board…

The code fixes this by listening for the error that is fired when those problems occur and switches from loading the default url to another url - but this time the url has been set to a file you store in your app or on the device so it will display any resources that are local.

This code is not really what your looking for for two reasons,

  1. your after the primary url to be local, for this you store the html file in the apps database and reference it as the primary url.

  2. your wanting remote (Bubble) data included in the html file, meaning that html file will also need to include listeners and functions to deal with a connection loss.

Building yourself such a html file though - referencing rather than Bubble data the browser’s data would be a great way of dealing with the case, then just include either an onChange listener or setInterval type function to hit Bubble’s data via an endpoint to update the browsers stored values.

thanks for clearing this up. I will need to find someone to help me set this up as this is far beyond my copy-paste-coding skills

1 Like

A good way of attacking this is design it in bubble, then get yourself a dev (i can help with this) to make all the script, css & other external resources local resources, then adapt the page elements and functions accordingly, removing the crud along the way, I say this because it takes out the how it needs to look and function aspect from the dev’s point and will mean no back and forth like the typical website company would.

1 Like

Hi, will this be implemented anytime soon? I think it would be great to use the data in sessions/cookies as data type, would make it easier to use this in repeating groups (which I intend to do).

Thanks