PWA debug chrome "add to homescreen" button not doing anything - json

I am trying to add the "add to Homescreen" prompt function to my website. Now I've read the google developer articles and I have everything set up.
Now, If I try to manually add my page to the homescreen with the button "Add to homecreen" in the Chrome devtools > Application > Manifest , nothing is happening. A few times the console showed an error, but after fixing it nothing happens. I don't get the Add to shelf banner, but I don't get an error displayed in the console. Lighthouse doesn't show any error either. In fact, lighthouse shows a score of 92 in pwa.
Is this now meaning that everything is working? Is there an other debug function I've overseen?
Edit: If I press the button and than reload the page, after I press reload and the page is acctually loaded, the console displays:
Site cannot be installed: the page has requested the banner prompt be cancelled

I was having this same issue: Chrome Dev Tools Add to Homescreen was not working on ANY PWA. After days struggling trying to figure out where the problem was I finally found that Chrome main menu has an option to install the app, and that option is working fine. So you don't need to use Chrome Dev Tools option.

If you are testing in localhost, try http://localhost instead of 127.0.0.1.
I don't know why, but I have the same issue when using 127.0.0.1.
After changing to localhost, it works correctly.

Related

Is there a way to make chrome devtools undetectable?

I want to see how stuff works on a website, but each time I open Devtools (or refresh the page), I get an alert saying Devtools is open. It blocked me from using Devtools, so I want to disable this feature.
So, I searched how to "jam" google chrome Devtools and got these results:
Find out whether Chrome console is open
https://coderwall.com/p/iktwug/detect-if-chrome-devtools-are-open
https://github.com/sindresorhus/devtools-detect
But I can't find any information about making Devtools Undetectable or disabling this code. Tried undocking Devtools, didn't work.
This is their code blocking me from using Devtools:
https://hastebin.com/oxopowiduy.php
What should I do to make Devtools Undetectable?
In Chrome 73+ it's possible to open devtools before the page can run any code to detect it:
open chrome://inspect
click "Pages"
click "pause" on an entry for the tab you want to debug
Now you can inspect the page, find out how exactly it detects devtools, and defuse it. Judging by the code in your question, you can run window.uomg.create.onchange = null, but if not, set breakpoints in the code and debug it to find out a working method.
Based on this answer:
Find out whether Chrome console is open
The answer to your question is "No" - the sites are probably using jscript to detect the console is open and you will not be able to send back a false negative.

Website popup is blank for Chrome

Our application uses a popup window to show a report. This works in every browser except Chrome.
In Chrome the URL in the Network tab of the inspector has a blank response. I also see Chrome loading an inject.preload.js script from disk cache?
This exact same page works in Firefox and Safari as well. I haven't been able to check IE yet (i'm on a mac today).
What is this inject.preload.js script and why would Chrome not load a URL in a popup?
The exact same code running staging servers works, the popup loads just fine. In production it works everywhere except Chrome. Both staging and production use SSL, have the same config, etc.
I unfortunately can't link as its a secured site.
Inject.preload.js is generally some sort of adblocker. It could be the case that its acting up and blocking your popup. If it is the case, it would show as an icon to the right of the address bar.

Chrome Network Preview Is Not Working

Suddenly chrome network preview has stopped working.
A few days back I could see the preview of the response of an API call. now preview tab displaying nothing for any API call.
I tried re-installing the chrome but same behavior.
.
Is there any setting to enable preview ??
My chrome version is 58.5.3029.81
Try to disable filter button and refresh page. Then make a request and check priview tab. This helped me.

Chrome developer breaks on refresh

I tested this on multiple sites and I have the same problem everywhere. When I refresh the site in Chrome with developer tools open, the site stops and its stuck on loading. In developer tools opens the tab Sources with bundle.js file code and I get and error in console:
Cannot read property 'dataset' of null
Why is this error occurring and how can I resolve this? I tried to restart my computer but its not working. Disabling JavaScript in Chrome is not an option. I have Chrome Version 52.0.2743.116.

How to get Chrome to allow mixed content?

Chrome browser by default is blocking mixed content. How do I adjust my settings/configuration to allow mixed content without making any adjustments on the UI every time?
I have found two solutions but neither of them work:
Several articles say you can adjust this under the Security section
of "Under the Hood" in the Options. This option no longer seems to
exist. There is no Under The Hood tab and there is no such dropdown
to adjust how Chrome handles mixed content as far as I can tell.
Another option is to add the --allow-running-insecure-content flag
to your command line. I did this like so: "C:\Program
Files\Google\Chrome\Application\chrome.exe"
--allow-running-insecure-content. However this made no difference. If I tried adding the flag inside the double quotes, then Windows
complains saying it is invalid.
So what option do I have now with the latest version of Chrome?
Steps as of Chrome v91 (6/17/2021):
Click the Not secure warning next to the URL
Click Site settings on the popup box
Near the bottom of the list is Insecure content, change this to Allow
Close settings, go back to the site, and Refresh the page
Older Chrome Versions:
timmmy_42 answers this on: https://productforums.google.com/forum/#!topic/chrome/OrwppKWbKnc
In the address bar at the right end should be a 'shield' icon, you can
click on that to run insecure content.
This worked for me in Chromium-dev Version 36.0.1933.0 (262849).
In Windows open the Run window (Win + R):
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --allow-running-insecure-content
In OS-X Terminal.app run the following command ⌘+space:
open /Applications/Google\ Chrome.app --args --allow-running-insecure-content
Note: You seem to be able to add the argument --allow-running-insecure-content to bypass this for development. But its not a recommended solution.
The shield icon that is being mentioned was not in the sidebar for me either, however I solved it doing the following:
Find the shield icon located in the far right of the URL input bar,
Once clicked, the following popup should appear wherein you can click Load unsafe scripts,
That should result in a page refresh and the scripts should start working. What used to be an error,
is now merely a warning,
OS: Windows 10
Chrome Version: 76.0.3809.132 (Official Build) (64-bit)
Edit #1
On version 66.0.3359.117, the shield icon is still available:
Notice how the popup design has changed, so this is Chrome on version 66.0.3359.117.
Note: The shield icon will only appear when you try to load insecure content (content from http) while on https.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" " --allow-running-insecure-content"
On OSX using the current Chrome build (2/20/2020, 79.0.3945.130), you can:
Click on the 'i' info icon on the left side of address bar.
Click Site Settings
Scroll down to Insecure content
Change it from Blocked (Default) to Allow
Reload the page and try your action again.
running the following command helps me running https web-page, with iframe which has ws (unsecured) connection
chrome.exe --user-data-dir=c:\temp-chrome --disable-web-security --allow-running-insecure-content
Another solution which is permanent in nature between sessions without requiring you to run a specific command when opening chrome is as follows:
Open a Chrome window
In the URL bar enter Chrome://net-internals
Click on "Domain Security Policy" in the side-bar
Add the domain name which you want to always be able to access in http form into the "Add HSTS/PKP domain" section
On OSX the following works from the command line:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-running-insecure-content
Chrome 46 and newer should be showing mixed content without any warning, just without the green lock in address bar.
Source: Simplifying the Page Security Icon in Chrome at Google Online Security Blog.
You could use cors anywhere for testing purposes. But its note recommend for production environments.
https://cors-anywhere.herokuapp.com/
something like: https://cors-anywhere.herokuapp.com/http://yourdomain.com/api