shinyMobile

shiny API for Framework7 (IOS/android)

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

<iframe width="100%" src="https://dgranjon.shinyapps.io/miniUI2DemoMd" allowfullscreen="" frameborder="0" scrolling="no" height="822px"></iframe>

<iframe width="100%" src="https://dgranjon.shinyapps.io/miniUI2Demo" allowfullscreen="" frameborder="0" scrolling="no" height="710px"></iframe>

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.

Acknowledgement

A special thanks to Vladimir Kharlampidi for creating this amazing framework7 HTML template.