PWA support with ShinyProxy

hcstubbe commented 2 years ago

I am trying to host a shinyMobile app with progressive web app support on the most recent version of ShinyProxy (2.6.0). However, PWA seems to be not supported. Is it possible to host this app using PWA? If not, will there be PWA support in future versions?

Thank you!

LEDfan commented 2 years ago

Hi

I did some tests with shinyMobile and the PWA support in ShinyProxy. I used this app https://github.com/RinteRface/shinyMobile/tree/master/inst/examples/gallery . What I observed:

when opening the app through the standard ShinyProxy method (i.e. using the /app) endpoint, the app is loaded in an iframe, therefore a browser is unable to find the PWA manifest. (you can still add it as a PWA, but it won't use the properties inside the manifest).
you can open the app using the /app_direct/<my_app_id> endpoint, in this case a browser is able to find the manfiest and you can add it as a proper PWA app.
the problem is however, that once your session is expired and you try to re-login, you (could) end up on the main page of ShinyProxy and not on the app itself.
another problem is that you don't see a loading screen, but just a white screen until the app loads.

In order to solve this, the manifest should be exposed by ShinyProxy, rather than inside the app. Currently we don't have an official way to do this. However, using the template mechanism you can achieve this (https://github.com/openanalytics/shinyproxy-config-examples/tree/master/04-custom-html-template)

First create a new app.html template. Next in the <head> section add the following code:

    <th:block th:if="${appName == 'pwa-demo'}">
        <link rel="manifest" th:href="@{/assets/manifest.webmanifest}">
    </th:block>

The if statement is needed to prevent the manifest being exposed for other apps. You can add this block multiple times (one for each app).

Next create a directory assets in your templates folder and add the pwa manifest of the app in the folder. For the example app, I'm using (based on https://github.com/RinteRface/shinyMobile/blob/master/inst/examples/gallery/www/manifest.webmanifest):

{
  "name": "My Progressive Web App",
  "short_name": "My App 2",
  "description": "What it does!",
  "lang": "en-US",
  "start_url": "/app/pwa-demo",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/assets/icons/icon-144.png",
      "sizes": "144x144"
    }
  ]
}

Notice that I changed the start_url to /app/-pwa-demo and also the path to the icon. You can create a directory icons in the assets folder an place your icon there.

Although this requires a bit more work from your end, this is working fine for me. All ShinyProxy features are supported (i.e. navbar/iframe), login is properly working etc.

We might improve the support for PWAs in the future, so that you have less manual steps to do. We are still thinking about the proper solution here, because we want the support to be flexible. For example, it might make sense to allow for some additional properties to be set (like regular app icons etc). If someone is interested in this feature, please upvote this issue, this way we can estimate the interest. In addition, any feedback on how this should be implemented (mainly how you want to use it) is welcome.

hcstubbe commented 2 years ago

Thank you so much for your reply!

I have been trying to get this to work all weekend, but failed. I configured the ShinyProxy as you described above and used the same app. Running the app on the conventional shiny server using docker works with PWA support. But on ShinyProxy (v. 2.6.0 on Docker), or with ShinyProxy as stand-alone, I could not make it work. Do you have any idea, how to solve this? Could you make your example code available?

I uploaded my example code this github repository. See chrome output below.

Thank you so much for your help! Hans

Using the path /app/test_app: grafik

Using the path /app_direct/test_app: grafik

LEDfan commented 2 years ago

Hi

You have to make sure you either add the template files to your Dockerfile or that you mount the templates into the Docker container. Can you check whether this is the case?

hcstubbe commented 2 years ago

Thank you for the reply! Yes, I am mounting the templates. I see that this works when I inspect the webpage in the browser (i.e. I see the link pointing to the web manifest; I can even download the webmanifest).

I realized, if I change the manifest in the header to <link rel="manifest" href="/assets/manifest.webmanifest">, the manifest is found. Unfortunately, the service worker is registered to /app_direct/testapp rather than to /app/testapp. Do you have any idea, how to change this?

edit: After having read more about service-workers: is it possible to place a service worker at /app/testapp instead of /app_direct/testapp?

hcstubbe commented 2 years ago

I discovered today, that the above solution works for Safari, but not for Chrome or Firefox. Any idea, why this could be the case and how to solve this?

openanalytics / shinyproxy

PWA support with ShinyProxy #347