Installing PWAs on mobile devices
Carlos Solis avatar
Written by Carlos Solis
Updated over a week ago

In this lesson we're going to test a PWA (Progressive Web App) that I've properly configured. In order to do this test, it's recommended that you use your own device and enter the address of the site that you want to test.

To show you how it works, I'm going to use the iOS simulator here. However, keep in mind that this test can also be done on a computer.

Click on Channels.

Click on Channels.

Click on Sites.

Click on Sites.

Click your Site. For our example, we used Test PWA.

Click your Site. For our example, we used Test PWA.

Click on Templates.

Click on Templates.

Click on Snippets.

Click on Snippets.

Click on head.

Click on  head.

Copy the following code:

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-title" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="yes">
Copy the following code:

Click on Save.

Click on Save.

Click on Publish.

Click on Publish.

Click on Publish.

Click on Publish.

Click on Publish.

Click on Publish.

With your mobile device, open Safari, and navigate to your Site.

With your mobile device, open Safari, and navigate to your Site.

Open Settings, and click add to Home Screen.

Open Settings, and click add to Home Screen.

Click Add.

Click Add.

Your PWA will be added to your Home Screen.

Your PWA will be added to your Home Screen.


🏠 Go to Learning path: Cross-platform development with PWAs

Did this answer your question?