PWA to Reflex

[ppspps824]

Hello community!

I have been working feverishly on creating a web app in Reflex for the past few days.

I am aware that the use of web services on mobile devices is accelerating these days, and I was wondering if it would be possible to make this happen in Reflex in the form of a PWA.

We will describe how we have done it successfully, but we understand that it is a hacky way to do it. Can you tell us if there is a better way or native support?

*It seems to have been mentioned a bit in this Issue, but it looked like the tag that links manifest.json was not actually written in the head. (Please let me know if my understanding is wrong!)

Thanks.

---

Directory Structures

\assets
        icon-192x192.png
        icon-512x512.png
       ...
        manifest.json

manifest.json

{
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "description": "My awesome Progressive Web App!",
    "icons": [
        {
            "src": "icon-192x192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "icon-512x512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ]
}

Python Script

app = rx.App(
    head_components=[
        rx.script(
            """
    document.addEventListener('DOMContentLoaded', function () {
        var head = document.head;

        // Create link to manifest
        var linkManifest = document.createElement('link');
        linkManifest.rel = 'manifest';
        linkManifest.href = '/manifest.json';
        head.appendChild(linkManifest);
    });
"""

[masenf]

have you tried adding the rx.el.link tag directly?

app = rx.App(
    head_components=[rx.el.link(rel="manifest", href="/manifest.json")]
)

[ppspps824]

Wow!!!
Thanks for the smart answer.
It worked fine.

[dentro-innovation]

@ppspps824 you're the man!

Thanks this is really awesome!