Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer app-route: intercept refresh page

I am struggling with getting out of the current situation: we have a polymer SPA (A) deployed on a certain server and bound to a certain url: http://example.com/A, we do need to show legacy pages of the old application for the time being, in order to do so, a new application (B) has been developed and bound to a different url (http://example.com/B).

What B does is to frame the pages of the legacy app and exposing a button whose aim is to go back to the previous location by accessing the document.referrer value and reloading the page, problem is that being A an SPA, the URL does not exist on the server.

More in detail:

  1. The user logs in the application A (http://example.com/A/overview)
  2. The user uses the SPA and ends up on a certain url managed by the routing (http://example/A/stuff/we/sell/jackets)
  3. In the page http://example.com/A/stuff/we/sell/jackets there is a link to the application B, framing the legacy application's page showing the jackets
  4. The user clicks the link and goes to http://example.com/B/legacy/jackets, at this moment the document.referrer equals http://example.com/A/stuff/we/sell/jackets
  5. The user clicks on the button to close the view, application B sets the location of the window to the document.referrer attempting to land the user from where he/she came from.
  6. Being the application A an SPA the url http://example.com/A/stuff/we/sell/jackets does not exist on the server and the user gets (correctly) a 404.

So the question is: is there any way to intercept the change of the window.location variable in the app routing to avoid the full refresh of the page and land the user in the page where the link was?

like image 846
AMC Avatar asked Feb 16 '18 14:02

AMC


2 Answers

If I understand this correctly then this seems to be a problem with your server configuration.

If you do have an SPA you want all URL to go to your app-shell (usually your index.html).

Example:

http-root
├─ some-folder
│  └─ index.html
└─ index.html

If you have for example an apache running you can go to:

  • http://example.com/index.html
  • http://example.com/some-folder/index.html

If you go to http://example.com/stuff/we/sell you will get an error as stuff is not a valid directory.

In your SPA you will probably have some routing system that will move you around and does changes to the Url without ever doing a reload. So if you use your SPA and then do a real reload you should still end up at the place you were before.

How that will work depends on your server. For apache, for example, you can provide rewrites via .htaccess.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html[L]
</IfModule>

Using this no matter what your url is you will always end up at the http-root index.html. Then your SPA can take over; read the url and show the appropriate data.

imho solving this on the server is the appropriate solution to your problem.

like image 76
daKmoR Avatar answered Nov 01 '22 00:11

daKmoR


I do agree with @daKmoR actually you should never recive 404 form the server - you could get that from polymer app.

Get a file and if it doesn't exist then try index. It looks different in each server. What server you are using ? I can help with IIS and nginx.

like image 1
bunny1985 Avatar answered Oct 31 '22 23:10

bunny1985