I'm writing a small PWA and I'm trying to add an install banner to the page in VueJS/QuasarJS. In the first step, I'm trying to catch if the beforeinstallprompt is firing, with the following code:
mounted() {
console.log("mounting"); // works
window.addEventListener("beforeinstallprompt", (e) => {
console.log(e); // this only fires during Lighthouse Audit
e.preventDefault();
this.deferredPrompt = e;
console.log(`'beforeinstallprompt' event was fired in mounted.`) // only during Lighthouse Audit
})
};
Whenever I load the app, it is not firing at all. But then I tried to run a Lighthouse Audit in Chrome Dev Tools, suddenly it worked! Also, Lighthouse shows that the PWA is installable. But when I do exactly the same thing without Lighthouse, it is not working. So, what is Lighthouse doing that I'm missing...?
Compiling, I've tried two ways but both show same result (only works after I run Lighthouse):
Development build: quasar dev -m pwa --> runs on localhost
Deployed: quasar build -m pwa, firebase deploy --> deployed on firebase
I tried both Firefox and Chrome on Desktop and Android, all with same result. Please if you have an idea, let me know.
Thanks a lot in advance!
Related
I have a SSR page build on Nuxt (Vue). There is a simple code which runs in the browser.
methods: {
submitGeneralForm() {
alert("submit");
console.log('teeeeeeeeeeeeeeeeeeeeest')
},
SSR means that site it rendered on the server and then send to the browser. This piece of code should run in the browser. It is related to the button click. Alert works fine but I dont see any console.log() in the browser. Dont understand it. What is wrong with that?
EDIT:
Here is the example Github repository. Run yarn install + yarn dev to reproduce the issue. Node version v14.17.6 npm version 6.14.15 and yarn version 1.22.11 You will see alert() on page load from /layouts/default.vue which contains this code
export default {
mounted() {
alert('11111111111111');
console.log('22222222222222');
alert('33333333333333');
}
};
This is screenshot of console.log() in console.
Make sure you don't have anything in the console's filter input field.
For example, in the following image you can see the word "status" is masking the console.log() log lines:
I'm not sure why your code is not printing the console.log() since it's something basic and does not require any specific configuration.
I've tested your repro and it's working perfectly fine on both Chrome and Firefox. Maybe try another browser, factory reset it or ask a buddy to try on their side.
This is something on your machine IMO.
Also, be aware of the filter on top of the console, be sure that nothing is present here, otherwise it could filter the things you see in the actual console.
In your Browser you have a Console Output Section, where you also have some settings. There you can set the log levels, which should be in your output (Verbose, Info, Warnings and Errors). Console.logs are logged under the level Verbose, so you have to make sure this option is checked. By default this option is unchecked in some cases.
You have a filter, "status". It will filter anything which does not contain "status" keyword in it.
I've been trying to get live preview in Sanity to work for several days now, without luck.
It works like a charm when I follow this tutorial:
how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms.
But when I create a starter blog like this one: sanity-template-gatsby-blog, it does not work at all.
I've followed three tutorials, but it always fails, even if I do exactly the same.
This is my gatsby-config:
module.exports = {
plugins: [
"gatsby-plugin-postcss",
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-source-sanity",
options: {
projectId:"nt51j1jx",
dataset:"production",
token: "ABC123", //this is a dummy for this post
watchMode: true,
overlayDrafts: true
},
},
],
};
When I create a new post and click "web preview", I get a 404
It does not help to click publish, and I can't see any changes on the local host.
Changes to existing posts are also not visible.
I have to restart the server every time I want to see the changes. That's not the case with the first template I mentioned, but that one crashes when I try to install Sanitys code-input plugin, which I need.
Thanks in advance!
I finally solved it by following this post: https://www.frontendstumbles.com/gatsby-and-sanity-cms-tutorial/
A nice step by step guide that creates a Gatsby and Sanity starter that works with watch mode and drafts mode.
The preview environment must be rebuilt when you create a new page.
That's a new static html file to be built. This is different from live preview updates, which amend the page data client-side.
UPDATE: Sanity + Gatsby Cloud Live Preview is a known bug at the moment. I guess we join the Slack channel to hear when they fix it?
first off apologies if I've forgotten to include anything, new here! I am having a pretty odd issue using react-native-windows version 0.63.0-0 with react-native version 0.63.2. The problem is that network calls made from my windows laptop appear as if they are not attempting to execute... period. They fail instantaneously and simply return a TypeError.
TypeError: Network request failed
This happens to me on a completely fresh init of RN/RNW, and I've tested with a couple http libraries and variations of calls, such as swapping in axios for fetch all using the same then and catch logic (excluded on some examples below for brevity's sake). I have tried and failed to reach several different domains. The API I'm attempting to reach is available (tested successfully with postman). Other standard React-Native projects work just fine from my laptop. I've cleared metro, run --reset-cache, removed tmp, reinstalled node-modules, everything standard you're supposed to try to troubleshoot like that.
fetch('https://subdomain.domain.com/<api-path>', { // my example then & catch
method: "GET",
headers: { "Content-Type": "application/json" }
})
.then(response => response.json())
.then(responseData => console.log(responseData))
.catch(error => console.log(error));
fetch('https://subdomain.domain.com/<api-path>'); // without headers this time, used same then & catch block
axios.get('https://subdomain.domain.com/<api-path>'); // again used same then & catch
// ... and so on, triggering the catch block instantly, as if it fails without trying
I do also see the following error in my debugger console, even though I can see the debuggerWorker from within my 'chrome dev tools -> sources -> page' panel which from what I understand, the error just has to do with chrome not handling source maps correctly, feel free to correct me there. However I'm unsure whether they are even related or if this one is just a fluke:
Error: Unable to resolve module `./debugger-ui/debuggerWorker.cff11639.js` from ``: ./debugger-ui/debuggerWorker.cff11639.js could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\Users\...\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
at C:\Users\...\node_modules\metro\src\lib\transformHelpers.js:267:42
at Server.<anonymous> (C:\Users\...\node_modules\metro\src\Server.js:841:41)
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\Users\...\node_modules\metro\src\Server.js:99:24)
at _next (C:\Users\...\node_modules\metro\src\Server.js:119:9)
Generally I'll run npx react-native run-windows (or npx react-native start --reset-cache separately first) to execute the project, but debugging from VS Code's debug pane, as well as running from Visual Studio produce the same errors.
Is there something I am missing with my react native windows setup? I have followed the windows setup step by step several times and even simply adding an http request to execute from their default app instantly fails... This has blocked me for a while and it really feels like an environment setup issue, but I'm not sure what else I would check in Visual Studio/my configs in order to resolve this.
After some more continuously banging my head against this issue, I continued to dig a little further into Visual Studio's side. I went file by file looking for anything remotely related to what might be blocking this functionality. As I expected, it was an unfortunately simple solution to something that caused me a significant headache since I wasn't aware of it and could not find it anywhere else, so let this be a lesson to those after me who have network problems with React-Native-Windows:
Whenever you are beginning - or picking up - a RNW project that uses the network to send or retrieve information, make sure that you have first gone into Visual Studio (not VScode) and enabled the "Private Networks (Client & Server)" option. You can find this if you open your project in Visual Studio, and it's under
Project Solution -> 'Package.appxmanifest' file -> 'Capabilities' section
This should hopefully cause your network requests to succeed as you would expect from now on.
Working with:
"react-native": "0.51"
When I console.log in Remote JS Debugger, the source of the log is always:
console.js:35
It ignores the actual line where the log was made from. This used to work as expected. Is there a way to make it work again?
I found that this was actually caused by having React Native Sentry installed.
To resolve this whilst in development mode I disabled Sentry, which arguably makes more sense as I only want to be tracking production errors there.
// Only run Sentry in production
if (!__DEV__) {
Sentry.config(_CONFIG_URL_HERE_).install();
}
If you don't want to disable Sentry, add this to your Sentry init:
Sentry.init({
dsn: '__YOUR_DSN__',
integrations: [new Sentry.Integrations.Breadcrumbs({
console: false
})]
})
I'm developing single page application on AngularJS for learning. My project is located on Apache HTTP Server on another computer, I use WinSCP synchronisation while developing so that it is always the last version of my work.
Halfway through (actually, when I has already finished the biggest part the application), I realized that I don't have any tests and I should learn how to test what I do not just manually. I decided to try writing E2E tests for my AngularJS application using Karma Test Runner.
I installed Karma via npm, initialized it (karma init test/karma.conf.js), but what happens now?
I tried karma start test/karma.conf.js it launches Chrome (as I stated in config) and says that
Karma - connected
Chrome 26.0 (Windows) is idle
even though in conf file there are specified my test file:
files = [
'test/first_test.js'
];
And that's what inside it:
describe('my app', function() {
browser().navigateTo('/');
it('should then be.', function() {
expect(browser().location().url()).toBe('/login');
});
});
Thanks in advance!
EDIT: I realized, it's not just 'Chrome is idle', there's also console log error:
Uncaught ReferenceError: browser is not defined
Any ideas? I'm so confused right now.
Browser is only defined inside of beforeEach. Try this:
describe('my app', function() {
beforeEach(function(){
browser().navigateTo('/');
});
it('should then be.', function() {
expect(browser().location().url()).toBe('/login');
});
});
Alright, looks like I solved it myself.
I should have added
ANGULAR_SCENARIO,
ANGULAR_SCENARIO_ADAPTER,
to the files property of karma config file. After that, I progressed a little bit, but still got a lot of troubles, but essentially the main was that I got error that resumeBootstrap was undefined. My app was using AngularJS 1.0.4, but it looks like Karma's Adapters are for 1.0.6+ only. Upgrading app to 1.0.6 helped with resumeBootstrap.
Regarding testing the app on external server:
proxies = {
'/': 'http://another.internal/app/'
};
and don't forget to change links to CSS and JS files in app's index.html from local (css/style.css) to web (//another.internal/app/css/style.css).