1. App Builder User's Guide
  2. Managing Application Globalization
  3. Translating Messages
  4. Translating Messages Used Internally by APEX
  5. Progressive Web App (PWA) Messages Requiring Translation

21.6.3.6 Progressive Web App (PWA) Messages Requiring Translation

Lists Progressive Web Application (PWA) messages that require translation.

Message Name English Text

APEX.PWA.DIALOG.TITLE

 
Add to Home Screen

APEX.PWA.INSTRUCTIONS

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">Your device or browser does not appear to support the installation of Progressive Web Apps right now.</p>
    <p class="a-pwaDialog-intro">If this application is already installed on your device, open it from your home screen.</p>
</div>

APEX.PWA.INSTRUCTIONS.ANDROID.FIREFOX

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality. Add it to your home screen to use it in fullscreen.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-android-firefox-1.svg" />
        <p class="a-pwaDialog-stepText">1. Tap the <strong>Menu</strong> icon in the bottom navigation</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-android-firefox-2.svg" />
        <p class="a-pwaDialog-stepText">2. Tap <strong>Install</strong></p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-check.svg" />
        <p class="a-pwaDialog-stepText">3. Tap <strong>Add</strong> to confirm</p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.ANDROID.WEBVIEW

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality that is best experienced in Chrome or Edge.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-android-webview-1.svg" />
        <p class="a-pwaDialog-stepText">1. Tap the <strong>Menu</strong> icon next to the address bar</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-check.svg" />
        <p class="a-pwaDialog-stepText">2. Tap <strong>Install</strong></p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.IOS.GSA

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality that is best experienced in Safari.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-gsa-1.svg" />
        <p class="a-pwaDialog-stepText">1. Tap the <strong>Share</strong> icon in the bottom navigation</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-gsa-2.svg" />
        <p class="a-pwaDialog-stepText">2. Tap <strong>Open in Safari</strong></p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.IOS.SAFARI.IPAD

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality. Add it to your home screen for the best experience.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-safari-1.svg" />
        <p class="a-pwaDialog-stepText">1. Tap the <strong>Share</strong> icon next to the address bar</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-safari-2.svg" />
        <p class="a-pwaDialog-stepText">2. Tap <strong>Add to Home Screen</strong></p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-check.svg" />
        <p class="a-pwaDialog-stepText">3. Tap <strong style="color:#007AE1;">Add</strong> to confirm</p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.IOS.SAFARI.IPHONE 

<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality. Add it to your home screen for the best experience.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-safari-1.svg" />
        <p class="a-pwaDialog-stepText">1. Tap the <strong>Share</strong> icon in the bottom navigation</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-safari-2.svg" />
        <p class="a-pwaDialog-stepText">2. Scroll down and tap <strong>Add to Home Screen</strong></p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-check.svg" />
        <p class="a-pwaDialog-stepText">3. Tap <strong style="color:#007AE1;">Add</strong> to confirm</p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.IOS.SAFARI.IPHONE.15

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality. Add it to your home screen for the best experience.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-safari-15.svg" />
        <p class="a-pwaDialog-stepText">1. Tap the <strong>More</strong> icon next to the address bar</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-safari-2.svg" />
        <p class="a-pwaDialog-stepText">2. Tap <strong>Add to Home Screen</strong></p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-check.svg" />
        <p class="a-pwaDialog-stepText">3. Tap <strong style="color:#007AE1;">Add</strong> to confirm</p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.IOS.WEBVIEW.IPAD

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality. Add it to your home screen for the best experience.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-webview-1.svg" />
        <p class="a-pwaDialog-stepText">Tap the <strong>Share</strong> icon next to the address bar</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-webview-2.svg" />
        <p class="a-pwaDialog-stepText">Tap <strong>Open in Safari</strong></p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.IOS.WEBVIEW.IPHONE

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality. Add it to your home screen for the best experience.</p>
</div>
<div class="a-pwaDialog-steps">
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-webview-1.svg" />
        <p class="a-pwaDialog-stepText">Tap the <strong>Share</strong> icon in the bottom navigation</p>
    </div>
    <div class="a-pwaDialog-step">
        <img class="a-pwaDialog-stepImage" src="#IMAGE_PREFIX#pwa/apex-pwa-instructions-ios-webview-2.svg" />
        <p class="a-pwaDialog-stepText">Tap <strong>Open in Safari</strong></p>
    </div>
</div>

APEX.PWA.INSTRUCTIONS.LINUX.FIREFOX

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality that is best experienced in Chrome.</p>
    <p class="a-pwaDialog-intro">Firefox does not currently support web apps installation.</p>
</div>

APEX.PWA.INSTRUCTIONS.MAC_OS.FIREFOX

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality that is best experienced in Chrome or Edge.</p>
    <p class="a-pwaDialog-intro">Firefox does not currently support web apps installation on macOS.</p>
</div>

APEX.PWA.INSTRUCTIONS.MAC_OS.SAFARI 

<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality that is best experienced in Chrome or Edge.</p>
    <p class="a-pwaDialog-intro">Safari does not currently support web apps installation on macOS.</p>
</div>

APEX.PWA.INSTRUCTIONS.WINDOWS.FIREFOX

 
<div class="a-pwaDialog-introWrapper">
    <p class="a-pwaDialog-intro">This website has app functionality that is best experienced in Chrome or Edge.</p>
    <p class="a-pwaDialog-intro">Firefox does not currently support web apps installation on Windows.</p>
</div>

APEX.PWA.OFFLINE.BODY

 
<main>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280" role="presentation">
      <g fill="none">
        <path d="M316.846 213.183c39.532 0 63.154-30.455 63.154-62.764 0-30.943-22.158-56.615-51.441-62.179v-1.17c0-48.123-38.947-87.07-87.07-87.07-39.044 0-72.036 25.672-83.066 61.007-8.492-3.612-17.863-5.564-27.722-5.564-34.261 0-62.764 24.11-69.694 56.322a51.007 51.007 0 0 0-9.468-.879C23.036 110.79 0 133.825 0 162.327c0 28.405 23.036 51.441 51.441 51.441l265.405-.585z" fill="currentColor" opacity=".2"/>
        <circle fill="#D63B25" cx="336" cy="216" r="64"/>
        <path d="M367.357 198.439c-.395-.395-.947-.632-1.657-.632-.71 0-1.184.237-1.657.632L351.97 210.51l-10.494-10.493 12.072-12.072c.395-.395.71-.947.71-1.657A2.29 2.29 0 0 0 351.97 184c-.631 0-1.183.237-1.657.631l-12.071 12.072-7.496-7.496c-.394-.394-.947-.71-1.657-.71a2.29 2.29 0 0 0-2.288 2.288c0 .632.237 1.184.71 1.657l2.604 2.604-13.176 13.176a13.781 13.781 0 0 0-4.024 9.705c0 3.787 1.499 7.18 4.024 9.705l2.13 2.13-14.36 14.36c-.394.394-.71.947-.71 1.657a2.29 2.29 0 0 0 2.288 2.288c.631 0 1.184-.237 1.657-.71l14.36-14.36 1.736 1.736a13.781 13.781 0 0 0 9.704 4.024c3.787 0 7.18-1.5 9.705-4.024l13.176-13.177 2.92 2.92c.394.394.946.71 1.656.71a2.29 2.29 0 0 0 2.289-2.288c0-.632-.237-1.184-.71-1.657l-7.575-7.496 12.072-12.071c.394-.395.71-.947.71-1.657.079-.632-.237-1.184-.631-1.578zm-27.142 33.059a9.398 9.398 0 0 1-6.47 2.603c-2.525 0-4.813-.946-6.47-2.603l-7.1-7.101a9.124 9.124 0 0 1-2.683-6.47 9.124 9.124 0 0 1 2.682-6.47l13.177-13.176 3.156 3.156c.079.079.079.158.158.158l.157.157 13.413 13.413c.08.08.08.158.158.158l.158.158 2.761 2.762-13.097 13.255z" fill="#FFF"/>
      </g>
    </svg>
    <h1>Can't connect</h1>
    <p>You need an internet connection to use this app.</p>
    <button type="button">Retry</button>
</main>

<script>
    document.querySelector("button").addEventListener("click", () => {
        window.location.reload();
    });
</script>

APEX.PWA.OFFLINE.TITLE

 
Can't connect

Parent topic: Translating Messages Used Internally by APEX