search

instantpage / instant.page

Make your site’s pages instant in 1 minute and improve your conversion rate by 1%
https://instant.page
MIT License
6.04k stars 205 forks source link

Whitelist user-defined pathnames #26

Open gauravkg15 opened 5 years ago

gauravkg15 commented 5 years ago

Goal: Only allow prefetching links with certain (origin + pathname) defined by the user

Why: Adding the 'data-no-instant' attribute is hard to scale. Some endpoints can trigger actions without query params so its much easier just to define a static list of whitelisted pathnames.

Lozula commented 5 years ago

Would like to see this too - a predefined list of url's that prefetch would be user than adding attributes to specific links would be easier to implement

atilacamurca commented 5 years ago

@gauravkg15 is this the same as issue #18?

Here's an example of the PR #29 will look like:

<html>
  <body data-instant-whitelist-mode>
    <a href="#1" data-instant>Instant link</a>
    <a href="#2">Not an Instant link</a>
  </body>
</html>
Lozula commented 5 years ago

My interpretation (or preference anyway!) is that you could whitelist some domains, rather than having to add an attribute to every link you want prefetched. For example, I have two websites, and I would like links on either of them to be prefetchable by the other, by just adding their domains to a whitelist instead of having to add an attribute to every link.

PikachuEXE commented 5 years ago

But then how to you expect to define a set of destination URLs within the HTML document? Let me throw an ugly example of expectation (Not saying it should be implemented like this, throw your own one)

<html>
  <body data-instant-whitelisted-url-regex="^(https://domain-1.com|https://domain-2.com/pokemons)">
    <a href="https://domain-1.com/" data-instant>Instant link</a>
    <a href="https://domain-2.com/pokemons/pikachu">Instant link</a>
    <a href="https://domain-2.com/regions">Not an Instant link</a>
    <a href="https://domain-3.com/pikapika">Not an Instant link</a>
  </body>
</html>

Or do you expect to use it in JS way?

gauravkg15 commented 5 years ago

@atilacamurca This isn't the same as that issue #18. The crux of the problem is that adding attributes to every anchor is hard to scale, especially on dynamically generated ones from templating engines. It would be very helpful to just whitelist certain pathnames that you know are for fetching data, and not for triggering some action on your backend.

A solid way of accomplishing this is to encapsulate the module in a class, and provide a constructor you can pass an array into. Would work the same, except you would just need to add one line to 'activate' the functionality. Kind of like footable, $('.table').footable(); but instead, InstantPage.init(args) with one arg being an array of whitelisted pathnames, with which the module checks against in isPreloadable

dieulot commented 5 years ago

You can currently define a list of links to preload in a variable, then iterate over each link in your page and add a data-instant attribute to those that points to a destination in that list.

There’s not much of a need to make it a real option, so that’s not planned.

dieulot commented 1 year ago

I plan on adding something along the line of instantpage.init(args) in v6; this use case might be a good fit there.