Dialogic Blog

Progressive Web Apps – Go Full Screen on iOS!

by Louis Subirana

Nov 29, 2017 2:58:36 PM

pwa-blog.png

In my first blog post, I talked about how Progressive Web Apps are a perfect fit for Visual IVR. In my mind, any web application being built now must take full advantage of what Progressive Web Apps (PWA) offer:

  • Service worker (background JavaScript code that can enable a PWA to run without an internet connection, amongst other things) helps you build PWAs that are less expensive and faster to build and are immediately accessible and updateable through your browser.

 

There are already many PWAs out there and some of them can be viewed on the website pwa.rocks. Our PowerVille VIVR demo is powered with a PWA for the visual component and some tricks were required to make the app launch full screen in iOS.

 Going Full Screen on iOS! 

When building a PWA, one essential ingredient is the Web App Manifest. This is a JSON file that contains specific information about your app. A link in the head of your web application's start page (index.html) is required.

<link rel="manifest" href="/manifest.json">

The manifest file needs to have the display attribute set to "standalone".

{ 
"name": "Dialogic VIVR - Tourism",
"short_name": "VIVR - Tourism",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/images/logo-pwa.png",
"sizes": "192x192",
"type": "image/png"
}]
}

This is all that's required for your PWA to launch full screen on Android, but for iOS, we need to add an additional bit of code to the head section of the index.html to make it work:

<meta name="apple-mobile-web-app-capable" content="yes">

Now, when your PWA is added as a home screen icon (1, 2), the app will launch separately from Safari, into its own application tab without an address bar or status bar (3)!

 

  1. 1. In Safari, adding PWA to home screen:
    IMG_3016.jpg
  2. 2. Icon now on a home screen:
    IMG_3018.jpg
  3. 3. Newly launched app is now full screen on iOS:
    IMG_3019.jpg

To see the Dialogic PowerVille Visual IVR capabilities in action, schedule a demo with one of our representatives.

Please leave me a comment or question below!

 

Liked this post? Get more content like this right to your inbox. Subscribe to  the blog.

Topics: Contact Center and Customer Care, Internet and Web