Convert your Python Webpage to a Progressive Web App on Phone - Plotly Dash

[@CharmingData]

I would like to thank Devin for teaching me all about PWA. Check out his website at: app.predict-heroes.com/footballstats/ Don't forget to download the guiding docs for this video: docs.google.com/document/d/1vZMaRx_EtyzFD7A9nwRxPcr9zeWTxcWv/edit Also, Progressive Web Apps are similar but not exactly the same as a traditional app. To read the difference, see here: www.simicart.com/blog/progressive-web-apps-vs-native/

[@alexterry1975]

I dont usually comment on the tutorials I watch but this has hands down got to be the best tutorial that I've seen in a long time. You're clear explanation and step by step guide made a complicated topic very easy to achieve. I even managed to get this working 1st time on my own app that uses DashProxy to run Dash inside my configured Flask server. As a side note, to anyone who is creating an app and setting the url_base_pathname to anything other than '/' you'll have to create a folder with the same name as your url_base_pathname, create an assets folder within this and then put the android images in this file path. The next thing I'm looking to do is enable Push Notifications to users of my PWA, if you happen to have tried this before a guide like this would be amazing! In the mean time I'll keep researching more about service workers and how to use them to enable these push notifications :)

[@Alexkiller95]

Did not know the existence of PWAs and adaptation with Dash apps. Thanks for sharing Adam :)

[@Smart-sv8jb]

Thanks, this was so exciting for me to create my phone app. You explain patiently with all details!

[@tuomasgu3766]

This is a great tutorial. And fun part is that if you do this once for a Dash app, you can use the same templates on your next projects just by changing the app and url names in the manifest file.

[@CharmingData]

Thank you Tuomas.

[@markserafin2130]

@@CharmingData What can we use instead of Heroku now for test deploying since the free tier is gone?

[@CharmingData]

@@markserafin2130 you can use render.com. I made a video about that a couple of months ago.

[@FedericoTartarini]

Great tutorial, thank you so much for sharing this tutorial on KZbin. Extreme helpful.

[@CharmingData]

Thanks for watching, Federico.

[@miguel-deep-soccer]

very useful, thanks!

[@hghlndr2]

while I'm not certain this is even possible, something i've rarely seen with plotly dash is incorporating live webcams into dashboards!

[@CharmingData]

Hi Highlander.. I've seen a dashboard like that but I have no idea how they did it 🤔 I wish there was a tutorial on that. I would love to learn it

[@hghlndr2]

@@CharmingData completely agree!

[@ZidRGR]

Thank you very much for this series of videos. All examples work great. I would like to know what service worker I could use to make the PWA work offline. Many thanks in advance for any advice.

[@CharmingData]

Hi Renzo. I haven't tried it, but the PWA website give an example of a service worker that will allow your app to provide an error message if there is no internet. I am not sure how the app can fully work if there is no connection.

[@alessandroannunziato669]

This video is fantastic and in few minutes I was able to include all what was described in my app. On Windows I saw and could install it but I have not undesrtood what to do to have the same on Android. If I open the web page on Chrome in Android, I do not see how to install the application. Did I miss something ?

[@alessandroannunziato669]

I found the way. I had to download Edge (I was using Crome) and however the installation did not appear automatically as in your case; I had to click the menu options and select 'Send to phone'. Maybe your versiobn of Android or Edge is different from mine. In any case again great video

[@CharmingData]

@@alessandroannunziato669 you're welcome.

[@timetoroll4441]

Great video thank you

[@ramidakitcharoenrot3543]

Thank you so much for a very insight video! However, I am experiencing 'Manifest: Line: 1, column: 1, Syntax error' and not sure how to solve it. I am wondering of you have experienced similar issue or not?

[@CharmingData]

I'm sorry, but I have not experienced that.

[@italo.buitron]

Hi! just a question: How i can add a custom script like this: app.index_string = ''' {%metas%} {%title%} {%favicon%} {%css%} {%app_entry%} {%config%} {%scripts%} {%renderer%} ''' is that correct?

[@chriskeo392]

Hey Adam, This is irrelevant to the video but question on dash app deployed on azure. The app connects to SQL server but it will not close the connection and just keeps adding more connections. I explicitly closed the connection in the code and it works locally but not when deployed on azure. Is there a config in gunicorn to add?

[@CharmingData]

Sorry Chris.. I'm not sure

[@adirosenhouse2903]

Hey, this is unrelated to the video- but is there a way I can download a path to/share a plotly figure without losing the interactivity of dash components? Like an html file/ other specific feature which allows me to share, download or reopen the same changeable graph. Would appreciate the guidance / where to further investigate :)

[@CharmingData]

I am not aware of a method to do that @Adi

[@StijnHommes]

Not again! This nonsense has been promoted at least three times a week for months now. Progressive web apps don't need any more promotion. Make some REAL apps. You know. Native apps instead of trying to pass off a website as an app. The website looks okay, but it's not an app. Either you take the time to make a real app or you don't. But misleading people and saying your website is an app is not okay. A website and an app are two different things. As a developer, you are supposed to know the difference.

[@CharmingData]

Hi @Stijn, thank you for your feedback. I was intentional about being very clear about the content of this tutorial. That is why my title says progressive web app and not traditional app. I also provide an article below the video that highlights the difference between the two. Sorry if that wasn't clear enough

[@StijnHommes]

@@CharmingData The problem is that the phrase "progressive web app" is a misnomer.

[@tipshistube]

@@StijnHommes Can you clarify?

[@FPLMundo]

I think Adam was pretty clear about what it was in the video. Also, your tone is extremely disrespectful. I would like to balance it by saying I am very grateful to Adam for all the videos and knowledge he has shared for free on this channel. Thank you Adam

[@CharmingData]

@@FPLMundo thank you @Pippo