I have a SPA say https://www.example.com. And one of the sub-pages https://www.example.com/foo can be added as a PWA. On navigating to /foo from the homepage, the manifest and service-worker get installed and registered correctly and the PWA can be installed from the A2HS native buttons too, but the event beforeinstallprompt isn't called on chrome. If the page /foo is refreshed then the event is called. It's only when the navigation happens to it from another page that isn't in the scope of the PWA. The lighthouse audit passes all tests on /foo as well.
Has anyone tried creating multiple PWAs on a SPA, or encountered a similar issue?
I don't think this is a good solution, but this is how I got around it on my Gatsby.js site:
On every page (even those where I don't have the "Add to Homepage" custom trigger), I listen for the beforeinstallprompt event.
I set up a listener for a custom event on the <html> element on the pages that have my "Add to Homepage" custom trigger.
When beforeinstallprompt fires, I stash a reference to the event on the <html> tag (this does not get swapped out in between pages for my SPA) using jQuery's $.data() - I couldn't get vanilla JavaScript dataset to work but I may have been using it wrong, and I had jQuery loaded in anyway.
In the beforeinstallprompt handler, after setting the data, I fire the custom event on the <html> element.
The page that has the "Add to Homepage" custom trigger catches this custom event, grabs the reference to the beforeinstallprompt event from the $( 'html ').data( 'event' ) and carries on with it as normal.
Hopefully that helps; it feels pretty hacky but I'm pretty new to PWAs / SPAs / React!
Related
We have addEventListener and removeEventListener.
Why we don't have getEventListeners?
Is this because of security reasons?
What will happen if listeners can be found in page context script?
I am trying to write a puppeteer script to trigger a div click event.
But I want to make sure there is an event listener on click-event before clicking it.
And I found that it is very difficult to check if a div has a event listener.
The puppeteer document tells me that to use DOMDebugger.getEventListeners in Devtools Protocol to achieve this.
I was wondering why the browser is designed like this.
I get this error in the Chrome console every time I try to evaluate an expression.
EvalError: Possible side-effect in debug-evaluate
What could be causing it?
I think I found the issue, reading through a discussion on an electron issues board.
It could potentially be caused by this: [inspector] Add custom error dispatch machinery for debug evaluate.
And hopefully fixed in this: [inspector] Don't trigger window.onerror with side-effects disabled.
This was an oversight in https://crrev.com/c/3557234, which led to a really weird developer experience: once a window.onerror handler was installed, typing into the Console or other side-effect free debug evaluations triggered this handler.
The website you are inspecting contains an onerror event listener.
A new bug in the latest version of Chrome triggers this event every time an expression is evaluated in DevTools. This includes live expressions and the console.
If this is your own website, add this line of JavaScript to your event listener to ignore any errors triggered outside of a script, where script is the second argument of the event listener function:
if(!script.endsWith(".js")) return;
Note that this will only work for external JavaScript (in .js files), in the case of JavaScript embedded in HTML <script> tags, it will disable your event listener entirely.
If this is not your website, you can temporarily disable the event listener in DevTools, like this:
At the top of DevTools, open the "Elements" tab
Press "ยป", on the right of "Styles", "Computed", "Layout"
Choose "Event listeners"
Find and expand "onerror"
Click "Remove"
This will remove the event listener, but the issue will return after you refresh the page.
Hopefully the next version of Chrome will fix this bug.
I am developing a Chrome extension that adds a custom devtools panel. My panel has some text boxes that allow user input, but any time I type a question mark, it opens Chrome help instead of tying the '?' character. Is there a way to stop this behavior?
UPDATE:
I should have mentioned that I'm using React in my extension and that I was using React's synthetic events.
This turned out to be unrelated to Chrome and due to a React JS nuance.
I was trying to call event.stopPropagation() on a React synthetic event which doesn't actually stop propagation to non-react registered event handlers such as the one that opens the help dialog.
The fix was to register a keydown event to the native DOM element and calling stopPropagation on the native event. This properly stoped the help menu from opening in response to typing in my input.
e.g.
<input
ref={input => input.addEventListener(event => event.stopPropagation())}
onChange={this.myOnChangeHandler}
/>
I am working on a Firefox Extension, using the SDK. The addon will be changing the CSS on specific websites (by attaching a stylesheets in the head). They obviously need to be attached before the main content of the page loads.
I need to be able to listen for the URL of a tab changing, and attach a script, before the tab content has loaded. The script will wait until the <head> has loaded before attaching the stylesheets.
I tried using tabs.on('ready', function(tab) { tab.attach(...) } ), but this does not work, because it listens for the tab to be fully loaded, and then runs the code inside the function()
I also tried pageMod, but this does the same as the above. It attaches to the pages I need it to, but only after they are fully loaded.
Does anyone know how to detect for a tab URL change, before the page is ready?
Note: Please do not answer with a setInterval() method, I cannot state this enough!
I worked out how to do it, I had not read the pageMod documentation well enough.
You can specify when the script is attached, using contentScriptWhen: "when", where when can be start, ready or end (obviously I used start)
I have managed to integrate a donate paypal button in a Cordova app:
<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
...
</form>
All works fine except that when the button is pressed, a new window appears and completly covers the app webview making it impossible for the user to go back to the app (the only way is killing the app process), which I think is a very bad user experience.
Things that I've tried:
target='_blank': same result
target='myIFrameName': Cross-domain problem
Post the form via ajax and put result in a div: Form must be calculated on the fly error (with $http.put in ionic, haven't tried with jQuery)
Please, any solution?
The best one would be to have the paypal window inside the current webview not covering header, as I could place a back button there (something like iframe solution that could work with cross domain) but also could be with placing a link to go back in the paypal donate page. I haven't investigated deeper enought the paypal plugin at this location: https://github.com/paypal/PayPal-Cordova-Plugin. anyone knows if it could do the work? (I've already opened an issue there asking for this feature)
Why not use a inApp browser ? Cordova InAppBrowser
And call cordova.InAppBrowser.open( url, '_blank', 'location=yes'); on a button click function, or whatever suits you.
_blank = inside the app
_system = system's browser( will redirect you from app )