I'm building a PWA with Nuxt.js that uses the Web Serial API to communicate with our proprietary hardware. It works as expected (i.e. the port will be available without user action the next time you load the web app unless the browser security is reset) on Windows 10/11 and macOS devices, but the device this application will be running on is a Raspberry Pi 4 running the latest stable Rasbian release. On the only two browsers I've found that can run on the Raspberry Pi and support the Web Serial API are Chromium and Vivaldi. In both of those browser, there is an issue remembering which port(s) the user has already allowed access to.
In Chromium, even a page refresh will cause the port permissions to reset, requiring the user grant access to the serial port again. In Vivaldi, the permissions can survive a page refresh, but restarting to browser will cause it to forget any prior port authorizations.
I have not been able to find any option to whitelist websites in the browser settings the way you can for some other security/privacy options, like you can with things like website clipboard access, nor any way to disable the security feature altogether.
This will be running on custom hardware that ships with the software, so there are no limitations to what can be modified to resolve or work around this. The device is touchscreen only, and the app will be running in a fullscreen kiosk mode at boot. There just needs to be some way to prevent the user from needing to select a port like /dev/s0 and grant the web app access to it every single time they turn the device on.
Related
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.
I've run into issues when running a web server in an app that is embedded using the AppView approach.
The background is that we need to run two applications in Kiosk mode (digital signage implementation).
There is a primary app and a supporting application running, the support application needs to run a local web server for configuration and control purposes.
The web server needs to be accessible from external browsers.
I have had some success embedding the app with the web server and being able to access from a browser running on the same device, but not remotely.
These tests have only been done in desktop rather than kiosk mode.
From what I can tell the Manifest for both the embedded and host apps are correct, in that the apps run in single app mode ok.
The apps will embed using the AppView tag.
as per... https://developer.chrome.com/apps/tags/appview
1 - Is it possible to embed a web server as per the above senario?
2 - Are there any additional properties needed in the manifest
Any assistance would be greatly appreciated.
Thanks
P.S.
There are a few additional undocumented requirements for the embedding to work in Kiosk mode.
Such as listing the apps ID in the in the manifest for the container app.
i.e. you need to include "kiosk_secondary_apps" with a list of kiosk mode apps that you want to embed.
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.
I’m interested in finding out exactly what network requests are made by certain 3rd party Chrome apps. I can open the Dev Tools from chrome://inspect/#apps, or from the context menu (enabled under chrome://flags/#debug-packed-apps), or by means of the Chrome Apps & Extensions Developer Tool. Whatever I do, the Network tab stays blank except an occasional image/png, while I’m sure lots of HTTP requests (or HTTPS to be exact) actually take place.
How can I monitor all network requests that an app makes? It seems easy for extensions, but not for standalone apps. Or is MITMing myself with a proxy with a self-signed certificate that Chrome is configured to trust the only option?
I am trying to create a wifi direct p2p Group owner using wpa_supplicant and wpa_cli. Once the group is create with p2p_group_add, how can we connect legacy wifi devices to the GO? I see the GO in Android mobile search, however I am not able to detect/find GO in legacy laptop with just wifi support. May I know if any configurations need to be done for supporting legacy devices like security type etc. Please suggest.
An autonomous GO should be detected by any legacy wifi device - no special configuration is necessary. The GO should be beaconing and responding to any probe requests, both of which allow a legacy wifi system to detect it (it will just ignore the special P2P IE).
I just tried the same scenario and both my Android phone and my Windows 7 laptop could see the GO running on my Linux laptop.
As your Android phone can see the GO then it is obviously responding to probe requests, so the fact your Windows machine cannot see it is likely to be an issue with the specific netcard used (either in your wpa_supplicant machine, or your Windows machine).
Some further debugging may be necessary to find the root cause, for example using wireshark, and if possible either upgrading the wifi netcard driver on your Windows machine, or swapping it out with a different vendor.