Mobile development

Classic web apps are not optimized for mobile platforms.

• Rarely consider the small display.
• Harder to access (no launch icon).
• Harder to focus if not fullscreen.
• Don't work offline.

Mobile development

😈 Let's go native!

Well ... it's quite complex:

• Know multiple languages: Java, Swift, ...
• Maintain multiple code bases.

Progressive web apps (PWA)

Take some advantages of both worlds:

• Can be installed on the device ...
• ... But run via a web browser.
• Provide offline features (don't expect too much).
• One code base (web languages).

Mobile app development and {shiny}?

Let's be honest, there is almost nothing 😭.

Mobile app development and {shiny}?

{miniUI} exists but not really for mobile development.

Welcome {shinyMobile}?

Built on top of the Framework7 web framework.

Initialize the project: {truelle}

We'll be using {golem} ...

... {truelle} is a {golem} GUI generator 🧙‍♂️!

1. Open the RStudio Server.
2. Run truelle::run_app().
3. Follow the steps.

{truelle}: project type

Select Package and choose the {golem} engine.

{truelle}: Package options

Provide a valid package path and review project options.

{truelle}: UI template

Select {shinyMobile} tabs layout.

{truelle}: Run the output and enjoy 😎!

Click on the ⏯ button or copy/paste 📸 the code to your terminal...

Congrats 🎈! We now have a production ready {shinyMobile} project.

{shinyMobile}: App preview

Your turn 🧪

shinyMobile::preview_mobile(
  url = "https://connect.thinkr.fr/shinyMobile1/", 
  device = "iphone8"
)Copy Code

processx::process$new(
  "Rscript",
  c("-e",
    sprintf(
      "thematic::thematic_shiny();
      shiny::runApp('%s', port = %s)",
      "./inst/app", 3434
    )
  )
)
shinyMobile::preview_mobile(
  url = "http://localhost:3434", 
  device = "iphone8"
)Copy Code

{shiny} VS {shinyMobile}: Main UI wrapper

library(shiny)
ui <- fluidPage(
  # ui logic
)
server <- function(input, output, session) {
  # server logic
}
shinyApp(ui, server)Copy Code

library(shiny)
library(shinyMobile)
ui <- f7Page(
  # shinyMobile layout functions
)
server <- function(input, output, session) {
  # server logic
}
shinyApp(ui, server)Copy Code

{shinyMobile}: app options

{shinyMobile}: the tab layout

f7TabLayout(..., navbar, messagebar = NULL, panels = NULL, appbar = NULL)Copy Code

{shinyMobile}: the navbar

f7SubNavbar(
  f7Button(label = "My button"),
  f7Button(label = "My button"),
  f7Button(label = "My button")
)Copy Code

{shinyMobile}: components

observeEvent(input$openCard, {
  updateF7Card(id = <CARD_ID>)
})Copy Code

Progressive web apps

Progressive web apps or (PWA) improve classic web apps capabilities by obeying these three rules:

1. Being capable: media control, file system access, …
2. Being reliable: fast and usable offline. Transparent failures.
3. Being installable: Standalone use, launch from user’s home screen.

In the following we'll treat 2 and 3.

How can my app be installable?

• The app must be served over HTTPS (shinyapp.io, ...).
• Include a manifest, that is a JSON file specifying app metadata (name, icons, ...).
• Have a registered service worker, which can cache the app content and provide offline support.

What is a web manifest?

A JSON file which can be interpreted by the web browser (Chrome, Safari, Firefox, Brave, ...).

{
  "name": "My Progressive Web App",
  "short_name": "My App",
  "description": "What it does!",
  "lang": "en-US",
  "start_url": "https://dgranjon.shinyapps.io/shinyMobileGolemTest/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "icons/icon-144.png",
      "sizes": "144x144"
    }
  ],
  ...
}Copy Code

In a Shiny app context, the manifest goes in www.

The service worker

Script run in the background by the web browser.

self.addEventListener("install", (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open(CACHE_NAME);
      // Setting {cache: 'reload'} in the new request will ensure that the
      // response isn't fulfilled from the HTTP cache; i.e., it will be from
      // the network.
      await cache.add( new Request(OFFLINE_URL, { cache: "reload" }) );
      await cache.add( new Request("framework7-5.7.14/css/framework7.bundle.min.css", { cache: "reload" }) );
      // add other resources to cache below
    })()
  );
  // Force the waiting service worker to become the active service worker.
  self.skipWaiting();
});Copy Code

Road to PWA : enable PWA

Good new 😃!

{shinyMobile} is PWA ready 😎.

Just turn on the allowPWA to TRUE in f7Page(). Under the hood, it adds all the required machinery 🧙.

Road to PWA : Modify {golem} package

golem_add_external_resources <- function(){
  #add_resource_path(
  #  'www', app_sys('app/www')
  #)
  tags$head(
    #favicon(),
    #bundle_resources(
    #  path = app_sys('app/www'),
    #  app_title = 'shinyexample'
    #)
    # Add here other external resources
    # for example, you can add shinyalert::useShinyalert() 
  )
}Copy Code

Road to PWA : add PWA files (1/2)

Time consuming, need automated approach... The below script:

# Important to target the app folder.
# Only work if app is in a package.
# register_service_worker is FALSE, shinyMobile already does it.
# We also don't need to create web dependencies. 
charpente::set_pwa(
  "inst/app", 
  register_service_worker = FALSE,
  create_dependencies = FALSE
)Copy Code

Road to PWA: add PWA files (2/2)

Road to PWA: Check your app (1/3)

Road to PWA: Check your app (2/3)

We aim to see the installable property in green.

Road to PWA: Check your app (3/3)

Road to PWA : handle the installation

Road to PWA: play around

Installed apps can be accessed under chrome://apps/

Road to PWA: What's next?

• Improve the offline HTML page.
• Take this course.
• PWA shortcuts (Windows, Android support).