I have a PWA (specifically concerned about iOS Safari at the moment), where when I add the PWA to my homescreen, the page I was on when I added it shows up like a native app. However, when I navigate within the PWA (same domain just new pages) the URL bar shows up.
This post was similar, but mentions it's for chrome/android.
PWA: Address bar showing up when redirectioning to subdomains -- and, as I understand it, iOS doesn't use all of the manifest file. I tried setting the scope, but no luck.
I have the necessary head elements in for showing a standalone (like I said, the initial page when I saved the PWA to the homescreen works fine).
Any ideas how to fix this?
I was able to resolve this by undoing the router mode history and reverted back to # hash-based routing.
I'm using Vue, so basically I just undo what I did here
https://router.vuejs.org/guide/essentials/history-mode.html
Related
We have a vue2 app.
It has quite a few pages.
On prod release, all the output is hashed chunks as expected.
The client for reasons out of our control does not want to use a PWA.
There is an issue:
Send out a new release to the site, each user loading the url will get the new code. All good.
Now send out another new release and all the file hashes change, for someone already on the site if they now click a link on the app but without loading the fresh index... the vue router silently fails and to the user nothing happens.
To be precise...
User loads index which loads the SPA which lazy loads chunks on demand... eg dashboard.xyzsd.js
We release the code base, and the user still has the previous app in memory, so clicking a link to the dashboard it tries to load dashboard.xyzsd.js which no longer exists.
What we would like to happen here is the app catches the error and instead does a full page reload to the human friendly link of "/dashboard"
Reading the docs, https://v3.router.vuejs.org/guide/advanced/navigation-failures.html#navigationfailuretype
I cannot see a simple fallback catch all for the vue-router. There are 100's of links all over the site, and we simply cannot be going to each link and wrapping them in a try catch.
We were expecting to find a catch all for the vue router... has anyone seen this?
I'm experiencing a strange problem with Nuxt and Netlify with static generation on a JAMstack e-commerce.
I pushed my website on Netlify and everything went good, no error on console in the generation phase.
When i visit the generated site on desktop everything is fine and loaded correctly.
On mobile instead the content disappears! The dynamic content fetched from Prismic during generation won't load if navigate from the homepage (need to reload the page in order to view them).
I'll leave a netlify preview link of the build so you can experiencing the same problem.
Load the homepage (on mobile) and click the button "Shop Now", you'll see a page with no content; try reloading the page and everything will come back to normal.
I noticed that if you refresh or land in a page that it's not the homepage and start navigating the site everything works fine, so the problem only occurs when the start of navigation is from the homepage on mobile! Furthermore, if you land on the homepage, go to Shop Now, and then go back without reloading, even the content on the homepage disappear!
https://60352eb4c2e7180007325b89--leconturbanti.netlify.app/en
I can't understand why since there is no console error anywhere. While on desktop everything is fine. There's no css hide rule, no v-if for mobile, nothing. It seems like there's a bug on Nuxt hydration?
Anyone having the same problem?
So, I've built an SPA with Vue. We hire a designer to create a landing page. The landing page looks great. It shows some info about the app and there is a "Sign in" button that does nothing at the moment.
The landing page does include CSS and Javascript (jQuery etc) that I don't, and don't want to, use in the Vue app.
So the question is: Is it possible to include the landing page code in my Vue project without loading landing page JS/CSS if user is already signed in?
Plan B for me is to host the landing page on mydomain.com and the app on app.mydomain.com. This will work I guess, I see others do this. But it would be nice to know my possibilities
Did some search and didn't find exact solution to your issue, however it seems that this is doable. I have some concerns regarding the head part of the page, but this is a way to start:
Create new Vue component that will include all the HTML code (body only) that you need + install (with npm) and import all needed js files, including jQuery, in that component.
Make sure, that you configure this component as lazy loaded in vue-router - so all your html and scripts will be separated from the app.
From there Vue should do the job - you will get your page where needed and other routes will be inside the app.
I'm trying to figure out a basic thing about Nuxt "Universal" mode with the help of my dev tools, but I am just not sure if I understand it correctly.
Every time I request a new route in the Universal Nuxt app it seems to send a 200 (OK) request to the Node server. Did I understand correctly that on every page request a new document gets requested and served up by the Node server?
Some people are claiming that even while running the Universal mode the Node server sends only one package and after that the navigation and subsequent pages are loaded on the client side, thus not hitting the Node server anymore, but this is not the case right, how could the search engine crawler index that?
Essentially on every new route instead, the page gets re-requested from the Node server in its pre-rendered form right? This is how the "Universal" mode is actually SEO friendly as the crawler can look through all the pages and index it correctly to Google or Bing?
I'm sorry as I'm just a beginner with Nuxt and I fully understand (I think) how SPA as well as the Nuxt Generate modes work but this Universal mode is still a mystery for me at this point.
I would be very thankful for any clarifications on this!!! It would be super valuable in my learning journey! Thanks!
It's important to understand different "kinds" of navigation.
If you are navigating to a route by typing it into browser's URL bar, browser is hitting server (and this has nothing to do with Nuxt specifically) and what you get back is HTML with HTML content of your route pre-rendered by Nuxt + js bundle. Same thing happens if you use F5 (reload).
If on the other hand you use <nuxt-link> inside of some Nuxt page pointing to a different route/page and you click it, underlying Vue router will be used to switch to a different page (Vue component), server is not requested (for HTML) and new component (page) will handle rendering client side only
There can be an Ajax request when navigating that way but request is not for server-side rendered HTML. It's for additional JS content. Its because Nuxt is using automatic code-splitting (so when you hit the server 1st time, only JS needed for that route to work is loaded). Once the JS bundle for a specific route is loaded, it will not load again on subsequent navigation and unless your page/components inside are loading data from some API, you will not see any requests to a server during navigation....
I've deployed a React Redux site on hostgator.com. While it works to visit the page and navigate as usual. (React routing works), it shows 404 not found whenever I reload the page.
I talked to their support which, before leaving 20 sec into the conversation, came with the suggestion that it may have to do with the site trying to run on https, while no SSL is implemented.
I'm curious, why does it work locally and not on the world wide web? Any thoughts?
Thanks.
You need to look into a Server Side Rendering solution. A good framework for doing so with React is Next.js.
Basically as long as you don't refresh the page React-Router has control over the address bar as well as history via the History API. But when you hit refresh you send a request to the server for whatever is in the address bar. But the server is not handling your routing, React-Router is on the client side. You also won't be able to type a child route directly into the address bar without server side rendering.