Overview

App users when accessing your website on the Android or iOS devices can get automatically redirected to your native app (through Apple App Store and Google Play Store) or the PWA version. This article outlines the process of enabling your website to redirect the users to your Web App by the use of a script or a QR code and then - if possible - to the native app.

This will be useful since the app users - when using their mobile devices - will be able to access either the PWA or the Native App version of your app so they can view the content of your site in a specially designed and optimal manner.

Back to top 

Prerequisites

• published PWA (Progressive Web App type)
• (applicable to Website Redirect) Access to edit your website's code.
• (applicable to QR Code) QR Scanner app installed on your mobile device.

Back to top 

Solution

Redirect to Web App

Enabling Your Website Redirect

You can use the redirect script to allow the site to recognize when someone is visiting from their phone and automatically send them to the Web App for optimal viewing.

1. Download or view the redirect attachment from the Web App Publishing information in the email received after you published your PWA. Here's a sample of the Redirect Script
2. Copy the redirect script and paste it into the header of the front-end site's home page. This is only possible if you have access to edit your website's code. 
   
   Note:
   • Don't add this script to each page of the front-end site, because that will result in an endless loop that prevents users from visiting specific pages of your front-end site on their phone. The home page header is enough.
   • If you have already set up a custom domain for your PWA, you'll want to replace the entire URL in the redirect script with the custom URL you created.
   • You can see below the corresponding excerpt from the script

 3. Access your site's URL on your mobile device's browser.

Using Your QR Code

QR codes are basically bar codes that contain a URL. The process is as follows:

1. You can download your Web App QR code from the email with Web App Publishing information you received after you published your PWA.

2. Use your QR scanner app and scan the code.

Back to top 

Redirect from Web App to Native Apps

To redirect iOS and Android users to the native apps when they view your Web App, you have two options. 

• Automatic App Store Redirect: This will take them straight to the App Store or Play Store URL (depending on the device they use) when they visit the Web App.  Leave this toggle disabled if you'd like to allow iOS and Android users to view your Web App.

• Smart Banner: This will provide web app visitors the option to download or open the native app in the iOS App Store or Google Play Store.  Leave this toggle disabled if you'd like to allow iOS and Android users to view your Web App.
  
  

Back to top 

Testing

If you have enabled the Website redirect or if you use the QR code, the first time a user visits the website from a smartphone, they'll be redirected to the Web App.

• Then, if you have enabled either of the Native App Redirects and if a native app exists, the user will be either redirected to the corresponding App Store or get a banner prompting them to install the native app respectively.
• If neither of the Native App Redirects has been enabled, the user will be directed to the Web App automatically. A banner will appear at the top, giving them the option to return to the Desktop version.
  • If users hide the banner: It will never appear again (unless they clear their device's cache), and they'll be automatically redirected to the Web App whenever they revisit the full site.
  • If users click the banner: The Desktop option will be selected, and they'll be redirected to the full site. If they revisit the full site, they won't be redirected to the Web App again (unless they clear their device's cache). They will, however, have the option to click the mobile link to visit the Web App. 

Back to top