Dash as a PWA: Location of "_root document folder"?

Dash Python
1

I would like to turn my dash app into a PWA. I have started looking at this guide,

So far i have been able to complete step 1 by injecting the meta tag into the header using javascript. The next step is to add an icon. To do so, i need to place it in the root document folder of your PWA. Now my question is, what would that folder be in a Dash context?

2

I have come up with a working solution,

# Hack to serve icon on iOS
@app.server.route('/<resource>')
def serve_icon_static(resource):
    icons = ["apple-touch-icon.png"]  # available icons
    if resource in icons:
        flask.send_from_directory(STATIC_PATH, resource)  # serve from static directory

but there might very will be a more secure and/or elegant solution.

3

Make sure you have the latest the version of dash (0.28.5)

  • You can add meta tags with the dash constructor meta_tags argument.
  • You can serve the favicon from the assets folder, just name it favicon.ico
4

Nice project. I’m not so interested in mimicing an iOS app, but running as a PWA could be really useful! I think the aggregate depency blob is close to 2MB. Beyond the posted guide, are you also planning to implement service workers to preload/cache the dash components (whatever stylesheets and js are needed from unpkg, cdn.plot.ly, etc.)? Maybe I’ll take a look with Workbox.

5

#Philippe - The meta tag injection in the Dash constructor works great. I tried adding a favicon as suggested*, and while it does show as a favicon in my PC web browser, it does not seem to work on the iOS device.

#brad - The immediate project that i am working on is mainly for demonstration purposes, so the mimicking of an iOS app will probably suffice. However, for future projects and/or possible extensions of the current, i might look into a more complete Dash PWA solution. It the dependency blob of is not more than 2 MB, it should be doable.

  • I created a folder “assets” in the root directory, next to the static folder, and placed the “favicon.ico” file here.