Web App in Airplane mode/offline state?

[bryan-lott]

Hi, first off, love the app, this is amazing as a non-webdev™️ that I can get a web app up and running in a couple minutes!

Second, I'm having trouble getting (my hacked up version of) the Savings Calculator working on my android phone. I'd like it to work when I no service (think airplane mode) and the style sheets and plotly are linked from other sites. What I did to solve this is:

• Grab the assets (plotly and both css files) and add them to the project manually (i.e., file>create, copy+paste).
• I modified the references in the index.html file to point to just their filename.
• I then downloaded a zip with everything in it to my phone, unzipped, and tried to run the app via opening the index.html file directly in chrome.
• When I did that, it wasn't able to access the local plotly or css files.

I can provide the relevant app/snippets if you need them to debug.

[chr15m]

@bryan-lott thank you for the feedback, i am glad you're finding it useful.

Here are some questions to help us try to diagnose what's going on.

How do you know that the plotly + css files are not loading successful vs. some other issue?

Is the zip file definitely unzipped?

Do you know how to connect your phone over USB to your Chrome browser so we can see what errors there are in devtools?

Another thing you could try is to transfer the slingcode.html file itself to your phone and run that, and then do the send/receive trick to transfer the app. Let me know how you go.

[bryan-lott]

Phone is a Pixel 4XL running Android 10

In the gif below, you can see the behavior I'm experiencing. The css styling is not applied to the app and when the app goes to hit plotly, it throws an error. The zip file is definitely unzipped (you can see in the start of the gif the zip file I unzipped).

In addition, when I hooked up my pixel 4xl to my laptop, I got the following errors in the devtools console:

Code for the includes in the app is as follows

<link rel="icon" href="icon1.png">
<script src="plotly.js"></script>
<link rel="stylesheet" type="text/css" href="minimal.css"/>
<link rel="stylesheet" type="text/css" href="minimal-inputs.css"/>

[chr15m]

Thanks for the detail, I will do some research on this and get back to you.

[chr15m]

@bryan-lott that content:// URL looks a bit odd to me. When loading off the file system i'd expect it to be file://. The content link seems like it is serving from memory rather than disk and that may be why the other files are not available.

According to Stackoverflow you should be able to unzip the files to the sdcard and load from there with a file:// link. You might have to enable sdcard permission in chrome:

https://stackoverflow.com/questions/13332261/access-a-local-file-with-file-in-android

https://android.stackexchange.com/questions/137128/using-chrome-to-access-html-files-on-android

[bryan-lott]

Fantastic, I managed to get it working with firefox and a file:///sdcard path (that then redirected to file:///storage/emulated/0...).

Really appreciate you taking the time to help me out!

[chr15m]

@bryan-lott excellent, glad you found a way to make it work. I'd like to know more about this as it's a use-case I think is worth supporting and making smoother. Hope you don't mind if I ask a couple of questions.

Was the default browser (presumably Chrome) able to load off the sd card or that just never worked? Did you already have Firefox installed or you had to install it to make this work?

What is the workflow you are using - are you using the built in send/receive to get the app from laptop to phone and then exporting the zip from slingcode on the phone?

What about running slingcode.html directly on the phone - I'd like to know the problems you encountered so I can make it easier.

Thank you for any feedback you have!

[bryan-lott]

Browser behavior:

• Chrome wasn't able to load off the sd card, either hanging indefinitely (from file:///sdcard) or giving an access denied error (from file:///storage/emulated/0).
• Firefox immediately redirects to file:///storage/emulated/0 from file:///sdcard and I'm able to browse to the index.html.
• Brave, oddly enough, when going to file:///sdcard doesn't redirect, but is able to access the index.html file and run the same as firefox.

Workflow: The workflow I'm using is the built-in send/receive (while using the slingcode.net/slingcode.html online), then exporting the zip from slingcode on the phone. Obviously it'd be great to have an "export for mobile" button that does some of the packaging for you, and even provides a home screen shortcut but I'm sure that's pretty low on the priority list ;)

Running slingcode.html "offline" locally:

• Downloading the slingcode.html file loses the extension (and it becomes Slingcode)
• Renaming it after download allows it to be opened on both Brave and Firefox.
  • On both, opening it loses all styling from the css
• Chrome refuses to open it and considers it "viewing an offline copy of this page" of slingcode.net/slingcode.html.
• On all browsers, all of the buttons on the main page just highlight while tapping on them, but nothing happens.

Hope this helps!

For context, I'm working on a offroad recovery force calculator since the one I used to use no longer shows up in the play store. The offline functionality is required since whenever I'm doing offroad recovery work, we usually rarely have cell service! :) Have tried a few "app builders" but yours is the first to actually work while in airplane mode

[chr15m]

@bryan-lott I've been doing some reading up on this and these are some different locations that have worked for people using Chrome on Android:

• file://localhost/sdcard/page/index.html
• file://sdcard/page/index.html

Note that these both have two slashes only after the file: part.

References:

• https://android.stackexchange.com/questions/8312/how-can-i-can-open-local-files-in-the-default-android-browser
• https://android.stackexchange.com/questions/4775/how-can-i-open-an-html-file-i-have-copied-from-pc-to-sd-card-of-phone

[chr15m]

@bryan-lott when you are running "offline" locally and downloading the slingcode HTML, what OS is that on? Windows?

Thanks very much for all this info, really helps me get some sense of what might be useful to focus on for this use-case.

[bryan-lott]

Thanks for those! I'll give them try later today when I get a chance.

I've been using OSX for running offline/downloading locally.

[XelaAl]

Interesting project. I'm looking for an app builder for online store. Will it be a good choice for me? I've just found it myself and haven't given it a try. It seems to be a good choice. As for the online store, I'd also recommend checking Pocketfied out https://pocketfied.com/. This is a good app builder, easy-to-use, and no-code. And it is great if you want to transform your Shopify store into a mobile app. Hopefully, this info will be useful for you.