Mobile Ready shiny Apps with Standalone Capabilities • shinyMobile

Develop outstanding {shiny} apps for iOS, Android, desktop as well as beautiful {shiny} gadgets. {shinyMobile} is built on top of the latest Framework7 template.

Installation

# from CRAN
install.packages("shinyMobile")
# for the latest version
devtools::install_github("RinteRface/shinyMobile")

Cheatsheet

Demo

A running demo is on shinyapps.io. Left side: android demo, right side: iOS demo

Progressive Web App (PWA)

Configuration

shinyMobile is PWA capable, meaning that it can be displayed full screen on many mobile devices. This feature is automatically handled by f7Page():

shiny::tags$meta(name = "apple-mobile-web-app-capable", content = "yes"),
shiny::tags$meta(name = "theme-color", content = "#2196f3"),
shiny::tags$meta(name = "apple-mobile-web-app-status-bar-style", content="black-translucent"),
shiny::tags$link(rel = "apple-touch-icon", href = "icons/apple-touch-icon.png"),
shiny::tags$link(rel = "icon", href = "icons/favicon.png"),
shiny::tags$link(rel = "manifest", href = "manifest.json"),

However to access launch icons and splatch screens, you must create a manifest.json file and an icon asset folder in the www folder of your app: more here.

The manifest.json file could be like:

{
  "name": "My App",
  "short_name": "My App",
  "description": "My App",
  "lang": "en-US",
  "start_url": "https://dgranjon.shinyapps.io/miniUI2Demo/",
  "display": "standalone",
  "icons": [
    {
      "src": "icons/128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Be sure to replace the start_url with your own url. Add also a custom name, even though this can be modified later when adding the PWA to your IOS apps. shinyMobile has an helper to create the manifest, that is create_manifest. However, it does not generate any icon nor splashscreens. Fortunately, there are tools such as appsco and app-manifest, to create those files.

Add the PWA to your desktop Apps

Go to the url of your app. In this example this is: https://dgranjon.shinyapps.io/miniUI2Demo/. It opens like a classic web app.

Select the share button located in the bottom bar of your Iphone/Ipad.
Click on “Add to Home Screen”
Choose a relevant name and click on OK.
The app will be added to your IOS Apps. In case you want custom icons, replace the content of the www folder with your own.