How to make your site installable as an app (PWA)

In TeleportHQ, you can let visitors install your site like an app: it gets an icon on their home screen, opens in its own window, and reopens the pages they've already viewed even without a connection. Open Publish, click the Installable app option to open it, tick Make this site installable (PWA), adjust the app with Customize app, then publish. This kind of app is often called a PWA (progressive web app).

Before you start#

• Plan. Installable apps work on Trial, Pro and Premium. If your workspace's trial or subscription has ended, the Installable app option shows "Installable apps are available on paid plans."
• Role. You need a role that can publish: Owner, Admin or Designer.
• Connect your own domain first, if you plan to use one. An installed app stays with the address it was installed from. See How to connect your own domain.
• A square favicon helps. The app icon is made from your favicon unless you upload one. Use a square image of at least 512 × 512 px. See How to change your project's name and favicon.

Steps#

1. Open your project in the editor.
2. At the top right, click Publish. The Publish window opens on the Publish tab, with Publish selected in its left menu.
3. Scroll down past Custom domain to the Installable app option, with Off on its right. Click it to open it. It says "Let visitors add your site to their home screen and open it like an app."

4. Tick Make this site installable (PWA). The setting is saved at once, and the option now reads On. While the app is on, the option opens by itself each time you open the Publish window.
5. A card appears with your app's icon and name, and "Opens in its own window, like an app. Pages visitors have viewed also open offline." Under it, TeleportHQ may suggest improvements, for example a sharper icon. Click a suggestion to go to its setting.

6. Click Customize app. The Installable app settings open over the Publish window, with a preview of the app on the right.
7. Go through the sections on the left (they're described below). Every change is saved as you make it.
8. Click Done to go back to the Publish window.
9. Click Publish to Production. The app goes live with this publish.

The settings, section by section#

Name & icons ("How the app is named and pictured on home screens, and in browser tabs.")

• App name: shown when visitors install the app and while it opens. Leave it empty to use your site title.
• Name under the icon: appears when the app name is longer than 12 characters, the most that fits under an icon on a phone.
• Favicon: your site's favicon, shown in browser tabs and bookmarks. Click Upload favicon or Replace favicon.
• App icon: made from your favicon, or from your initials when there's none. To use another picture, click Use another image and choose a square PNG or SVG of at least 512 × 512 px. Keep your logo clear of the edges: some phones crop icons to a circle.

Colors ("The app's title bar, and the screen it shows while it opens.")

• Title bar: the installed app's title bar on computers, and the status bar on Android. Automatic uses your design system's main color.
• Launch screen: fills the screen behind the icon while the app opens. Automatic uses your page background.

Install dialog ("What Chrome shows visitors who install the app on Android and computers.")

• Description: shown under the app's name when visitors install it. Leave it empty to use your site description.
• Screenshots: pictures of your site for Chrome's larger install dialog, in two rows, Phone and Computer. Without them, visitors get a smaller prompt. See the next section.

Banner & offline ("How the app is offered to visitors, and what it does without a connection.")

• Show visitors an install banner: on by default. The banner shows from a visitor's second page, never at checkout or on account and admin pages. Once dismissed, it stays hidden for 30 days. On iPhone and iPad it shows how to add the site from the Share menu.
• Offline and updates: pages visitors have viewed also open offline; checkout, account and admin pages always load live; after each publish, visitors who have your site open are asked to refresh.

Where the install dialog's screenshots come from#

The install dialog's screenshots come from your live site, unless you add your own. TeleportHQ handles them this way:

• Automatically. Until you add your own, each publish to Production photographs your live home page on a phone and on a computer, and retakes the photos once they're a week old. The photos are taken at the start of the publish, so they show your site as it was live before that publish. Pictures taken this way carry a Live site label.
• Before your first publish there's nothing live to photograph, so your first publish ships without screenshots. The next publish adds them.
• Your own pictures. Under Install dialog, click + Add in the Phone or Computer row and choose PNG, JPG or WebP images: up to 4 per row, at least 320 px on each side. A phone screenshot must be taller than it is wide, a computer screenshot wider than it is tall. Each image is cut from the top to fit the screen. Once you add your own, publishing takes no more photos. Remove yours to go back to photos of your live site.
• Right now. Click Capture from your live site to take a phone and a computer photo of your published home page at once.
• Password-protected sites can't be photographed: add your own screenshots. On the TeleportHQ trial, every publish puts your site behind a password, so the automatic photos work once the workspace subscribes and you remove the password.

Check that it worked#

After the publish, open your live site in Chrome on an Android phone or a computer. From the second page you open, the install banner appears (if you kept it on), and Chrome offers to install the app. On an iPhone or iPad, the banner shows how to add the site from the Share menu. Once installed, the app opens from its icon in its own window.

Turn the app off#

Untick Make this site installable (PWA), then publish. The Installable app option reads Off again and says: "Publishing turns the app off. Visitors who installed it keep its icon, which opens your live site."

Troubleshooting#

"Your custom code sets up its own service worker (OneSignal, for example)." A site can have only one service worker (the background script that makes the app work offline), so your code and the app would replace each other. Remove that code from your custom code, or leave the app off. See How to add code to every page (head and body).

"Your custom files replace files the app needs: …" Remove the custom files it names, or the app may not install or update.

"Your live site could not be reached, or it asks for a password." TeleportHQ couldn't photograph your site. Check that it's published and has no password, or add your own screenshots. On the trial, your site always has a password, so add your own screenshots.

"Your site was captured a moment ago. Try again in a minute." Wait a minute, then click Capture from your live site again.

"Screenshots need at least 320 px on each side." or "A phone screenshot is taller than it is wide." Choose a bigger picture, or one with the right shape for its row.

Good to know#

• One setting for both addresses. The option is saved on the project, so it also applies when you publish to Staging.
• Password-protected sites can be installed, but keep no pages for offline use: the app needs a connection. See How to password-protect your site.
• Developer project type. The option isn't available for projects of the Developer type: "Not available for the Developer project type. Choose Designer above to make your site installable."