Learn R Programming

shinyMobile

Develop outstanding {shiny} apps for iOS and Android, 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")

Demo

A running demo is available here.

Sponsors

{shinyMobile} is supported/funded by AthlyticZ.

AthlyticZ offers top notch Shiny courses developed by Veerle van Leemput:

  • Productionizing Shiny Applications course.
  • Outstanding InterfaceZ with Shiny course.
  • Build outstanding mobile applications with shiny course.

Progressive Web App (PWA)

Configuration

{shinyMobile} is PWA capable, meaning that you can make sure your app uses the correct assets to be used as a PWA. This feature is automatically handled by f7Page() if allowPWA is TRUE.

When set to TRUE, your app is set up to use both a service-worker.js script and a manifest.webmanifest file that you will provide.

To create these necessary assets for your PWA, you can use {charpente}:

remotes::install_github("RinteRface/charpente")
library(charpente)
set_pwa(APP_PATH, ...)

Where APP_PATH is the app location. Currently, it only works if the app is inside a package like with {golem}. If your app is not in a package, you may copy the www folder of the gallery app, which provides:

  • A valid service-worker.js.
  • A valid web manifest (manifest-webmanifest). Don't forget to change the start_url property to the path of your app.
  • As a bonus a valid offline.html fallback, which is displayed when the app is offline.
  • A valid set of icons. There are tools such as appsco and app-manifest, to create

those custom icons and splash screens, if you need to.

It is really easier with {charpente}, the reason why we strongly recommend to develop your app inside a package.

But that's not all that's needed! When you set allowPWA = TRUE in f7Page(), the app will also attach the Google PWA compatibility script, called PWACompat, which will help with PWA compatibility. More specifically, PWACompat brings the Web App Manifest to non-compliant browsers for better PWAs. This mostly means creating splash screens and icons for Mobile Safari, as well as supporting IE/Edge's Pinned Sites feature. It basically assures that the manifest.webmanifest file has a wider support.

Using your PWA

The first step is to deploy your app somewhere. It doesn't matter where (shinyapps.io, Posit Connect, your own server, etc.), but you will need a URL to access it.

Then, you can follow these steps to install your app on your mobile device.

  • Select the share button located in the bottom bar of your iPhone/iPad For Android, you may do something similar. Importantly, Chrome for iOS does not support this feature, that's why we recommend using Safari.
  • Click on "Add to Home Screen"
  • Choose a relevant name and click on OK.
  • The app will be added to your iOS/Android Apps. In case you want custom icons, replace the content of the www folder with your own.

Limitations

It is actually quite complex to guarantee that all mobile platforms are supported. The PWA compatibility script will work in most cases. If not, please open an issue here, to help improving it!

Acknowledgement

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

Code of Conduct

Please note that the shinyMobile project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

Copy Link

Version

Install

install.packages('shinyMobile')

Monthly Downloads

671

Version

2.0.1

License

GPL-2

Issues

Pull Requests

Stars

Forks

Maintainer

David Granjon

Last Published

October 4th, 2024

Functions in shinyMobile (2.0.1)

createInputLayout

Create common input layout
f7Align

Framework7 align utility
create_manifest

Create a manifest for your shiny app
f7Badge

Framework7 badge
f7Chip

Framework7 chips
f7Back

Framework7 back button
f7Gallery

Launch the shinyMobile Gallery
f7DatePicker

Framework7 date picker
f7File

File Upload Control
f7Icon

Framework7 icons
f7Float

Framework7 float utility
f7Flex

Framework7 flex container
f7FabClose

Framework7 FAB close
f7DownloadButton

Create a download button
f7Checkbox

Framework7 checkbox
f7Items

Framework7 item container
createOptions

Generates a list of option
f7ColorPicker

Create a Framework7 color picker input
create_app_ui

Create the app UI
create_app_link

Create shinylive iframe
f7Link

Framework7 link
f7Item

Framework7 body item
f7DefaultOptions

shinyMobile app default options
f7Col

Framework7 column container
createSelectOptions

Create option html tag based on choice input
f7Margin

Framework7 margin utility
f7MultiLayout

Framework7 multi pages layout
f7Row

Framework7 row container
f7Padding

Framework7 padding utility
f7ListGroup

Create a framework 7 group of contacts
f7Skeleton

Framework 7 skeleton effect
f7List

Create a framework 7 list view
f7SingleLayout

Framework7 single layout
f7Grid

Framework7 grid container
f7TabLink

Special button/link to insert in the tabbar
f7Dialog

Framework7 dialog window
f7Next

Framework7 next button
f7Notif

Framework7 notification
f7GroupInput

Framework7 group input
f7TabLayout

Framework7 tab layout
f7ListIndex

Create a Framework 7 list index
f7ListItem

Create a Framework 7 contact item
f7Shadow

Framework7 shadow effect
f7Table

Framework7 table
f7Page

Framework7 page container
f7TapHold

Framework7 tapHold module
f7PhotoBrowser

Framework7 photo browser
f7Gauge

Framework7 gauge
getF7Colors

Function to get all colors available in shinyMobile
f7Fab

Framework7 floating action button (FAB)
f7TreeviewItem

Create a Framework 7 Treeview item
f7Fabs

Framework7 container for floating action button (FAB)
f7Form

Creates an input form
f7SplitLayout

Framework7 split layout
f7SocialCard

Framework7 social card
listify

Listify a tag
f7TreeviewGroup

Create a Framework 7 group for treeview items
f7Treeview

Create a Framework 7 Treeview layout
f7Menu

Framework7 menu container
removeF7Tab

Framework7 tab deletion
f7Messages

Framework7 messages container
insertF7Tab

Framework7 tab insertion
f7Searchbar

Framework 7 searchbar
addF7Popover

Add Framework7 popover
is_wrapped

Check if f7List is in call stack
%>%

Pipe operator
f7MessageBar

Framework7 message bar.
f7Toast

Framework7 toast
f7PanelMenu

Framework7 sidebar menu
f7Popup

Framework7 popup
f7SubNavbar

Framework7 sub navbar
f7Tab

Create a Framework7 tab item
preview_mobile

Allow to preview a given app on different devices.
inputLayoutDefaults

Input layout default options
groupInputDefaults

Group input default options
showF7Preloader

Framework7 preloader
f7Progress

Framework7 progress bar
f7Radio

Framework7 radio input
f7Toolbar

Framework7 Toolbar
swiperTag

Needed for swipeable tabs
f7Tabs

Create a Framework7 tabs
f7Navbar

Framework7 Navbar
f7Select

Framework7 select input
f7Panel

Framework7 panel
f7Slider

Framework7 range slider
shinyMobile-package

shinyMobile: Mobile Ready 'shiny' Apps with Standalone Capabilities
f7SmartSelect

Framework7 smart select
f7Stepper

Framework7 stepper input
f7Swipeout

Framework7 swipeout element
f7Swiper

Framework7 swiper
f7Sheet

Framework7 sheet
updateF7VirtualList

Update an f7VirtualList on the server side
updateF7Routes

Update routes on the server
updateF7Tabs

Update a Framework 7 tabsetPanel
f7Picker

Framework7 picker input
f7Timeline

Framework7 timeline
f7Text

Framework7 text input
f7Toggle

Framework7 toggle input
f7Tooltip

Framework7 tooltip
updateF7App

Update Framework7 configuration
updateF7Entity

Update Framework7 entity
validateF7Input

Framework7 input validation
f7VirtualList

Framework7 virtual list
validate_tabName

Validate a tab name
add_pwa_deps

PWA dependencies utils
f7AutoComplete

Framework7 autocomplete input
f7Accordion

Framework7 accordion container
f7Login

Framework7 login screen
add_shinyMobile_deps

shinyMobile dependencies utils
f7ActionSheet

Framework7 action sheet
f7Block

Framework7 block
f7Card

Framework7 card
f7Button

Framework7 action button
f7CheckboxGroup

Framework7 checkbox group
app_container

Create an iframe container for app demo
createInputTag

Create an input tag
add_dependencies

Attach all created dependencies in the ./R directory to the provided tag
buildPickerInput

Build input tag for picker elements
add_f7icons_deps

Framework7 icon dependencies
buildConfig

Build config tag for JavaScript
add_pwacompat_deps

pwacompat dependencies utils
class2f7

Get CSS class based on cell class