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.
Related
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?
I am developing a web app with Facebook integration and I can't figure out why I can't test the login function locally. I have looked through the answers here (How to Test Facebook Connect Locally) and have tried to follow the steps of having the app in test mode, setting the site URL and the domain.
Based on FBs documentation here: https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/
I should be able to use http for localhost development, but I get the error
The method FB.api can no longer be called from http pages. https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/
and can't log in. Below are pictures of my app settings (including an indication it is an app in 'test mode').
So this is really only a half answer, but it seemed easier for me to just force https for my local development using mkcert (https://github.com/FiloSottile/mkcert). After creating local certs I updated my site URL to say https://localhost:8080 and I am able to log in without issue.
I want to perform load test of ios mobile app using Jmeter but I am facing issues in configuring my mobile phone. I have installed Jmeter and added recording template in it and set the port no of HTTP Test script recorder to 8888. I have also installed and trusted the certificate in my mobile device and set the proxy settings of my device by giving IP and port no. But after setting proxy I am unable to access the internet. Apps as well as other websites on chrome etc stops working due to loss of internet and when I remove proxy it starts working fine.
It's hard to say what is wrong without seeing jmeter.log file preferably with debug logging enabled for the proxy components, it can be done by adding the next line to log4j2.xml file (it's located in JMeter's "bin" folder)
<Logger name="org.apache.jmeter.protocol.http.proxy" level="debug" />
A "blind shot": in order to provide Internet access to the iOS device JMeter must have Internet access itself. Try adding a Thread Group and a HTTP Request sampler manually pointing to some site in the Internet which works for sure, i.e. http://example.com may be a good choice. Then add a View Results Tree listener and run the test. If the test fails it means that JMeter cannot access internet and most probably you need to configure it to use your corporate or ISP proxy
If the test is successful - look into the log files for JMeter and iOS and try to figure out the cause of the problem from them. If you fail to do this yourself - either update this thread with your configuration details and log files or ask a new question
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.
Built a fresh ionic v5 app from blank template. Added minimal logic to the home page for a simple toy project and deployed to a static blob on Azure.
Copied www folder to a blob and then made it public. Surf to the URL of index.html but this produced many errors of runtime.js:1 Failed to load resource: the server responded with a status of 400 (One of the request inputs is out of range.)
So then I tried a fresh storage module and used the 'static website` option and that does work except...
when it runs, it adds /home to the address and if the user tries to refresh the page then it fails with The requested content does not exist. because of course it thinks that's a resource inside the site.
You can simulate this by running a server (eg. http-server) inside the www folder, run the app then refresh with F5. I notice there is no problem when running using the dev command ng serve
Older ionic projects didn't have this problem. Have I done something peculiar?
This prevents any mobile phone from viewing the app and then adding to home screen because it includes the /home in the address.
Have found a partial solution here
https://stackoverflow.com/a/56584151/769427
which describes using the 404 page setting of a static website to point at index.html.
It does make it work (and with deep linking too) but the disadvantage is that a 404 error is registered each time in the dev tools.