Flutter Web, debug in https? - flutter

One of the functions of my application requires the ability to record. Chrome won't let non-secure sites access the microphone.
I can use, and have been using, flutter build web --profile --dart-define=Dart2jsOptimization=O0 for this and pointing an IIS site at the ...../build/web, but my app takes 1-2.5 minutes to build each time. Really slows down the workflow of minor adjustments.
Is there a way to run to an https server?

Related

WebAPK creation failures on Android over VPN

My corporate VPN blocks all external traffic from an Android device. I am trying to test PWA that is internally hosted (all resources inside a firewall). What I observe is that despite passing Lighthouse audit my PWA fails the WebAPK creation process on a device. Specifically, the install process takes a long time, and eventually it degrades to an application shortcut install.
What I did:
Built the simplest PWA that I could think of (index.html registering service worker + sw.js with fetch even handling index.html request offline + web manifest) and hosted it on an internal server
Run Lighthouse audit on the desktop and made sure it passes all PWA Lighthouse audits
Run bubblewrap init on the manifest to double check that icons/names are OK
Tried to install PWA on an a Pixel phone from Chrome's dot dot dot menu behind firewall
After a long time, the application shortcut was installed (with Chrome overlay icon)
Checked chrome://webapks/ on my phone - no surprises here, I did not find WebAPK for my app
Turn on my corporate VPN workaround, which allows me to bypass VPN restrictions and access external addresses (rooted phone + ProxyDroid hackery)
Now WebAPK creation works
Question 1:
Could someone please explain what is involved in WebAPK creation that would make it fail behind a strict corporate firewall? Is there any external resource (a service perhaps?) involved here that I could advocate my corporate VPN to whitelist? If not, any advice of how to have automatic tests for WebAPK creation would be appreciated. I thought of using bubblewrap build, but, since it is for TWA's, I did not expected it to pass for my simple PWA.
Question 2:
In general, what is the best technique for diagnosing WebAPK creation failures for PWA's that pass Lighthouse audit?
The WebAPK is generated server-side by Chrome. Chrome sends details from the manifest, along with the icons to it's server, which then returns the WebAPK. As you pointed out, it's most likely your corporate firewall is blocking that request to the server, preventing Chrome from generating the WebAPK.
The code for generating WebAPKs in Chrome can be found here
For your second question, we don't really have good tools for debugging that, if Lighthouse passes, it should build the WebAPK (with the exception noted above). I suspect you could connect the device to your computer and use ADB to look at logs, but thats... ugly. Sorry.

Lighthouse and bubblewrap PWA check fails when testing offline for start_url

I have a PWA that I am trying to use to create an Android app (apk) with a trusted web activity using bubblewrap tool (https://github.com/GoogleChromeLabs/bubblewrap). To check the PWA criteria, it uses Lighthouse which fails the following audit step (red):
start_url does not respond with a 200 when offline
Timed out waiting for start_url to respond.
But actually the step regarding to current page being offline is ok (green):
Current page responds with a 200 when offline
My PWA is hosted at an url: https://example.com/myapp/. So the service worker (manifest) has the startup url and Scope at "/myapp/". So if I access this page in Offline mode (Check the box "Offline" in the dev tools "Application" tab) it serves an offline page that is cached at the beginning when the service worker is installed (I followed this example: https://developer.mozilla.org/en-US/docs/Web/API/Cache/match and everything seems to work fine, I tested even on my mobile in airplane mode).
Also, the startup page redirects to ?locale=en but it is the same webpage (so in Offline mode every url seems to show my offline html page). What is even stranger is that in about 20-30 audit reports, one time this step passed, randomly)
I am doing the Lighthouse tests on Mac, Chrome 84.
EDIT:
So I made some tests and I saw that if I access http://example.com/myapp (instead of http://example.com/myapp/ - there is a / at the end), the offline html page is not shown anymore. But in the manifest the scope and start_url are set to "/myapp/" exactly so I don't know if this is an issue (if I set them to "/myapp" the PWA won't work anymore saying that there is no service worker at that path, which sounds strange because my jetty server redirects /myapp to /myapp/ which both should be the same resource)
The Bubblewrap lighthouse check is a wrapper around the [Pagespeed Insights API]. The PSI API can be a bit flaky and fail to run at times. If the failure is constant, I'd recommend running the URL against PSI, as you should get the same report, but with more detailed information.

Use external mongodb in mobile build of Meteor

I've seen in a lot of places that in order to use an External Mongodb in Meteor applications, you should use an Environment Variable MONGO_URL. However, I'm building my application to work both as web app and mobile app (by generating an apk).
The problem is that when I start meteor as MONGO_URL='mongodb://user:pwd#path.mlab.com:9999/db' meteor it works well in my computer. But, it's not possible (I haven't found any way of doing so yet) to do this in mobile.
So, anyone has any idea of how I could use an external mongodb in mobile applications?
Thanks!
It seems to me that you are confused about how Meteor works, and more generally the client-server architecture.
Only your server has access to your database (whether on the same machine or at a third party provider), so that you keep control of exactly what your Client has access to.
By "Client", we mean what your visitor uses to access your app, whether a web app through a browser, or a mobile app through a Cordova wrapper.
So your mobile app only needs to know the URL of the server it has to connect to. That is specified by the --server option when you do your meteor build.
Then your server needs to know how to access the external MongoDB. This is your MONGO_URL environment variable. In production, you would set this variable on your server host. Each provider offers a different method to configure those environment variables, most of the time there is a graphical administration panel.
Note that the way Meteor works, you can use the same server to support both your web app and mobile app at the same time.
Finally, you can also test on mobile using meteor run android instead of just meteor (or with ios instead of Android, but you need a Mac). Of course you can still specify your MONGO_URL variable in the CLI when testing, exactly like you have done when testing on browser.
For mobile (cordova) meteor applications think of the app as just a web view with the ability to access native device features (camera, bluetooth ...). Since the application is basically a web view, the underlying mongodb associated with it is the same. If you want mobile device specific storage take a look at GroundDB
For your situation, if sounds like your mobile app is having problems connecting to your server, ultimately not allowing it to pull data from the mongoDB. Make sure that when you build the mobile application you have server specifed '--mobile-server'. Also if you are running it locally, make sure your mobile device is on the same network as your computer and any firewalls that might not allow connections are disabled.

Develop and Test a Facebook application

Typically I develop my websites on trunk, then merge changes to a testing branch where they are put on a 'beta' website, and then finally they are merged onto a live branch and put onto the live website.
With a Facebook application things are a bit tricky. As you can't view a Facebook application through a normal web browser (it has to go through the Facebook servers) you can't easily give each developer their own version of the website to work with and test.
I have not come across anything about the best way to develop and test a Facebook application while continuing to have a stable live website that users can use. My question is this, what is the best practice for organising the development and testing of a Facebook application?
I hope I understood your question correctly.
What we have is 2 versions of our app, that is two applications defined in facebook.
We have the regular version that runs on deploy, and we have the myapp-test version.
this version runs on the domain myapptest.com (or you can use myapp.local).
In your HOSTS file (%winder%\system32\drivers\etc) define this url and redirect it to your own server on localhost (127.0.0.1).
Now, all you need is a config file on each machine that is not updated via source-control.
The localhost (development) version uses the app_id for the myapp-test, and relevant settings.
The deploy uses the other settings.
Then when you deploy you just need to upload your code.

Local Facebook App Development using localhost

Is it possible to develop facebook apps locally on my system so that the callback URL need not be a public URL like http://abc.com and instead can be an internal IP address like localhost http://127.0.0.1?
It is now possible to develop Facebook apps locally.
I believe this is true especially if you're developing in an iframe, which is now the standard way of developing facebook apps (FBML is deprecated).
In case this does not work, there are still some ways to make working more convenient.
Take a look at this answer:
Testing FB apps is still a rather primitive process.
I generally setup a test application that is a complete copy of the production settings inside the FB development environment that uses an SSH tunnel to point to my development server. You can setup as many applications as you need inside FB - I generally have a development application, a staging app and production. Staging and Production are both on "live" servers rather than an SSH tunnel.
The rest of the answers to this question detail different workflows that people have utilized to make it more convenient to develop on a remote host.
you can use http://127.0.0.1/ProjectName as the callback url, or your ip address itself