Movatterモバイル変換

shinyMobile

Develop outstanding {shiny} apps for iOS and Android, as well asbeautiful {shiny} gadgets. {shinyMobile} is built on top of the latestFramework7 template.

Installation

# from CRANinstall.packages("shinyMobile")# for the latest versiondevtools::install_github("RinteRface/shinyMobile")

Demo

A running demo is availablehere.

Sponsors

{shinyMobile} is supported/funded byAthlyticZ.

AthlyticZ offers top notch Shiny courses developed byVeerle van Leemput:

• Productionizing Shiny Applicationscourse.
• Outstanding InterfaceZ with Shinycourse.
• Build outstanding mobile applications with shinycourse.

Progressive Web App (PWA)

Configuration

{shinyMobile} is PWA capable, meaning that you can makesure your app uses the correct assets to be used as a PWA. This featureis automatically handled byf7Page() ifallowPWA isTRUE.

When set toTRUE, your app is set up to use both aservice-worker.js script and amanifest.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, ...)

WhereAPP_PATH is the app location. Currently, it onlyworks if the app isinside a package like with{golem}. Ifyour app is not in a package, you may copy thewww folderof thegalleryapp, which provides:

• A validservice-worker.js.
• A valid web manifest (manifest-webmanifest). Don’tforget to change thestart_url property to the path of yourapp.
• As a bonus a validoffline.html fallback, which isdisplayed when the app is offline.
• A valid set of icons. There are tools such asappsco andapp-manifest, to createthose custom icons and splash screens, if you need to.

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

But that’s not all that’s needed! When you setallowPWA = TRUE inf7Page(), the app will alsoattach theGoogle PWAcompatibility script, called PWACompat, which will help with PWAcompatibility. More specifically, PWACompat brings the Web App Manifestto non-compliant browsers for better PWAs. This mostly means creatingsplash screens and icons for Mobile Safari, as well as supportingIE/Edge’s Pinned Sites feature. It basically assures that themanifest.webmanifest file has a wider support.

Using your PWA

The first step is to deploy your app somewhere. It doesn’t matterwhere (shinyapps.io, Posit Connect, your own server, etc.), but you willneed a URL to access it.

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

Copy the URL of your app in your mobile web browser (iOS: Safariand Andoid: Chrome). It opens like a classic web app, with top andbottom ugly navigation bars that are part of the browser UI.

• Select the share button located in the bottom bar of youriPhone/iPad For Android, you may do something similar. Importantly,Chrome for iOS does not support this feature, that’s why we recommendusing 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 wantcustom icons, replace the content of the www folder with your own.

Limitations

It is actually quite complex to guarantee that all mobile platformsare supported. The PWA compatibility script will work in most cases. Ifnot, please open an issuehere, tohelp improving it!

Acknowledgement

A special thanks toVladimir Kharlampidi forcreating this amazing framework7 HTML template.

Code of Conduct

Please note that the shinyMobile project is released with aContributorCode of Conduct. By contributing to this project, you agree to abideby its terms.