Research: How to create a Progressive Web App (PWA) using `Flutter`

[nelsonic]

At present I am using the MVP in Safari Desktop and Mobile on my Mac and iPhone respectively.

It's an "OK" experience during MVP ... but we can do much better even in the short-term.

As we recently saw with Hoppscotch: /dwyl/mvp/hoppscotch.md#hoppscotch-setup The recommended approach to running their App is to "Install" it as a "Chrome" App:

Which is exactly how I run it on my localhost:

It means that it runs full-screen and you can command | alt+tab and immediately find it:

6 Second Demo: https://user-images.githubusercontent.com/194400/219318400-e5a14779-ccb3-479f-a8fc-73700323016a.mov

Todo

• [x] Research how to package a Flutter App as a PWA 🔍 e.g: https://blog.codemagic.io/pwa-in-flutter/
• [ ] Create new file: pwa.md in this repo and capture all the knowledge + steps required. 📝
• [ ] Add PWA capability to one of our existing Flutter demo apps 📱 e.g: https://github.com/dwyl/flutter-phoenix-channels-demo

[nelsonic]

@LuchoTurtle do you want to take a look at this today?

[LuchoTurtle]

Sure 👍

[nelsonic]

@LuchoTurtle to answer your question regarding which of our Flutter Demo Apps should be enhanced with PWA capability, it would be cool to add it to one that demos something useful like https://github.com/dwyl/flutter-todo-list-tutorial but that appears to not be deployed anywhere so that's why I was suggesting the https://github.com/dwyl/flutter-phoenix-channels-demo which is on Fly.io: https://flutter-phoenix-channels-frontend.fly.dev/#/

Which I just checked: has a PWA option

"Installed" the same as Hoppscotch:

When I "install" it I get a full-screen:

Demo screen recording: https://user-images.githubusercontent.com/194400/219611430-5363cd72-1516-484f-8f60-08b2fdab9a2e.mov

But the App Logo is just the Flutter one:

So it appears as though just the act of deploying the Flutter App to Fly.io ("Web") automagically added some basic PWA support!! 🎉

So "all" we need to do is document how to update the icon and we can already start adding PWA support to our App !! 🚀

[nelsonic]

So ... some of the work for getting PWA support for our App is already done for us! 🙌 We now need to figure out if there is extra work to enable it for a subdomain e.g: app.dwyl.com And what format the icon/logo has to be to appear on macOS and iOS when the Flutter app is "installed".

Do you mind picking this up and documenting it in a pwa.md here in learn-flutter? 🙏

[nelsonic]

Given that the "Channels Demo" has been deployed Fly.io, it's the one that has the most progress. Please enhance the Channels Demo with a Logo and document it in pwa.md and shift the contents of https://github.com/dwyl/flutter-phoenix-channels-demo/tree/main/app#deploying to a new file called deployment.md in learn-flutter so that it's easier to find. Thanks. 👌

[LuchoTurtle]

This issue is addressed by these two PRs:

https://github.com/dwyl/learn-flutter/pull/81 https://github.com/dwyl/flutter-phoenix-channels-demo/pull/3

[nelsonic]

Remove the old version:

New version has updated logo:

PWA working: