Menu Sheet Overlay

Mobify Progressive Web SDK Docs

The UPWA Lifecycle #

The stages of the UPWA lifecycle are explained below in detail.

Server-side #

A GET request will be sent to the SSR server from a device. When the SSR server is running in remote mode, it will not receive the actual user-agent from the device. Instead, it's aware of the device class: one of mobile, tablet or desktop.

When that GET request is received by the SSR server, it's first passed to the requestHook method, which can handle simple responses for files like /robots.txt. This does not involve the UPWA code.

If the requestHook doesn't handle the request, and it matches one of the UPWA routes, then the SSR server will:

  1. Create a browser-like environment for the UPWA
  2. Set the window.location for that environment to match the request's URL
  3. Configure the environment so that the getBrowserSize function will return the correct value depending on the class of the device that made the request
  4. Load and run the UPWA code in that environment

The UPWA can then fetch any data and render whatever React components are necessary for the page. Once rendering is done, the UPWA must call the ssrRenderingComplete function (in the universal-utils module of the SDK), passing the contents of the Redux store. Code can optionally set the status code for the HTTP response, and set headers, by passing them to ssrRenderingComplete. 2. By dispatching the thunk ssrRenderingCompleteThunk (also in the universal-utils module of the SDK). HTTP response status code and headers can also be set by passing them to ssrRenderingCompleteThunk.

If rendering fails, then the UPWA may call ssrRenderingFailed instead of ssrRenderingComplete, passing an error object. The SSR server will generate an error page.

Assuming that rendering did not fail, the SSR server will create an HTML response that contains the following:

  1. HTML elements copied from the <head> of the rendered document. This allows UPWA code to use tools such as react-helmet to add elements such as <link> to the document, which will appear in the response. These elements will be present in the HTML response and will take effect when the browser loads that response.

  2. A <script> element to set up the window.Progressive object (which communicates information from the server to the SSR loading process) and the SDK code when it runs client-side.

  3. If the SSR server was configured with optimizeCSS: true, the minimal set of inline styles required to render the HTML. If optimizeCSS is not true, a <link> in the head of the document that will prioritize loading of the stylesheet.

  4. An embedded JSON string of the Redux store state that will be used to configure the UPWA when it starts running client-side (stored in window.__PRELOADED_STATE__).

  5. The React-rendered HTML.

  6. A <script> element that will kickstart the UPWA loading process when the page is received by the browser.

The response is then sent to the browser, and server-side rendering is complete.


Was this page helpful?