General

Polyfilling service

As of Flight 6.2.0 and 5.16.8, we no longer depend on the polyfill.io service to boot the shop client-side. If you wish to support older browsers, this feature can be reintroduced by adding usePolyfilling option to shop.config. Instead of polyfill.io, we now use the Cloudflare version. You can find more information on this change on the Cloudflare Blog.

Upgrading to 5.16.8 or 6.2.0

To temporarily address the polyfill.io outage, the project may include the following line in the index.html file: <script>window.polyFillsLoaded = true</script>. This line should be removed when upgrading to version 6.2.0 or 5.16.8.

Click here to test if the browser needs polyfilling.

No index

On each category and page in Norce admin, there's an option not to include a specific category or page to search engines. In recent (5.14.5 and above) Flight versions this is handled by default. The framework is adding a <meta name="robots" content="noindex" /> HTML tag to the server and client rendered DOM.

For you, or the Flight core code to uptake this value you need to add the allowWebIndex field to Page and Category fragments imported to the Route query. More on route query usage

We always recommend using the latest release but if not possible you can add this yourself using the Helmet already included in the framework dependencies. The data is presented in Storeapi on Category and Page type as a boolean on (category|page).allowWebIndexing, uptake this value in a Helmet component and render a meta tag inside it based on it's value.

Route Preloading

The Flight framework has the ability to preload routes when the user hovers (desktop) or starts to touch (mobile) a particular Product, Category or Page link. The appropriate components are then loaded along with the response from the StoreAPI. This can drastically improve the perceived performance.

To enable preloading, add your routeQuery along with the components you want to preload, to your shop.config.js. Example:

// src/shop.config.js
import routeQuery from "./components/RouteQuery.gql";
import CategoryPage from "./components/CategoryPage/CategoryPage.loadable";
import ContentPage from "./components/ContentPage/ContentPage.loadable";
import ProductPage from "./components/ProductPage/ProductPage.loadable";

export default {
  preload: {
    routeQuery,
    preloadComponents: {
      Product: [ProductPage],
      Category: [CategoryPage],
      Page: [ContentPage],
    },
  },
};