Giter Club home page Giter Club logo

shiny.pwa's Introduction

shiny.pwa

R-CMD-check cranlogs cranlogs total

Bring the power of Progressive web apps into your shiny dashboards! Allow users to install your dashboards allowing them to behave like a standalone application, both in desktop and mobile.

Try it out here: https://sparktuga.shinyapps.io/shinypwa/. If on mobile, or using chrome on desktop, you should be able to install and try out the PWA installation. Check the readme section Using PWAs for more information.

Usage

WARNING: Its important to note that PWAs are only available under the https protocol.

1 - Install the package:

from CRAN:

install.packages('shiny.pwa')

from github:

devtools::install_github('pedrocoutinhosilva/shiny.pwa')

2 - Include the library into your project:

# global.R
library(shiny.pwa)

3 - Call the pwa function in your UI definition, in any place you could add UI elements (for example mainPanel in a fluidPage):

# ui.R
ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    sidebarPanel(...),
    mainPanel(
      pwa("https://myapp.com", output = "www"),
      ...
    )
  )
)

The following options are available:

  • domain The URL where the app is hosted
  • title The title of your Shiny app
  • output The base folder used by shiny to serve static files. This is usually the www folder in your project.
  • icon Icon Path to be used for the app. Relative to the project root folder. Recommended size is 512x512px. If left NULL a default icon is provided.
  • color Color of the app. Used to color the browser elements when the pwa is installed.
  • offline_template Path to the offline template you want to use. Relative to the project root folder. If left NULL the default template is used.
  • offline_message When using the default offline page template, message to be displayed.

4 - If you prefer to not generate the service worker every time your app starts, you can omit the output attribute from the pwa() function and instead run createServiceWorker(output_folder) to generate a pwa.service-worker.js file. This file does not need to be added as a dependency to your UI but must be available under https://yourapp.com/pwa.service-worker.js. The easiest way to achieve this with shiny is to add it to your www folder.

4 - That's it!

Using PWAs

User experience depends on the OS and browser.

Desktop

On desktop (Unix, MAC or Windows) you can use chrome to install the PWA as a standalone application. This can be done via the install button on the address bar:

Screenshot

It will then be available in standalone mode and show as a normal installed application: Screenshot Screenshot

Mobile

On mobile you can use chrome, firefox or safari to install the PWA. On the first visit you will see a prompt for installation, on the following visits each browser has its own standards, for example chrome has the option available under "Add to home" in the right top corner options menu, firefox displays a + button on the address bar.

Screenshot Screenshot

After installing the app will show and behave on your home screen as a normal mobile application. Screenshot

shiny.pwa's People

Contributors

pedrocoutinhosilva avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.