PWA (Progressive Web App)

chrisonline

010101
Just wanted to try it out but on install I get this message:
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for zerosonesfun/pwa ^1.0 -> satisfiable by zerosonesfun/pwa[1.0].
- zerosonesfun/pwa 1.0 requires flarum/core ^0.1.0-beta.8 -> satisfiable by flarum/core[0.1.x-dev, v0.1.0-beta.10, v0.1.0-beta.8, v0.1.0-beta.8.1, v0.1.0-beta.8.2, v0.1.0-beta.9] but these conflict with your requirements or minimum-stability.

jordanjay29

chrisonline Did you ensure you're running the composer command in the Flarum root folder?

chrisonline

jordanjay29
Haha, I am an idiot 🤣
Thanks. Now it is of course working ;-)

matteocontrini

010101 The only way I could make this step automatic, is if a Flarum dev knows of a way, upon activating an extension, to have this sw.js automatically added to the public root. If you know how to do this, let me know!

You can register any route through an extension, it's all in the docs:

https://flarum.org/docs/extend/routes.html

luceos

010101 The only way I could make this step automatic, is if a Flarum dev knows of a way, upon activating an extension, to have this sw.js automatically added to the public root. If you know how to do this, let me know!

You can use life cycle hooks. I recently used it with much pleasure at a wip extension horizon ; https://github.com/Bokt/flarum-horizon/blob/master/src/Extend/PublishAssets.php

010101

luceos Oh man, if I get this working that’d be pretty sweet. Thanks for pointing me in the right direction!

If I get the asset auto deployed, and one day add the ability from the admin to upload a custom icon, then 🤯.

I’m also going to look more into the caching PWAs can do. A side effect of this extension could eventually be a faster loading forum.

chrisonline

@010101
Just installed and it works perfect.
Thanks again for this extension!!

Is it possible to have the icon filled inside the homescreen icon?
Now I see a white circle and inside the icon. On the bottom right I see a small chrome icon.

With the discourse forum I see my icon full without the chrome icon at the bottom right.

Top Right and middle first row is Discourse.
Last icon (second row) is Flarum.

010101

chrisonline I’ll look into it. It could be a simple change to the manifest file that’s needed. 🐿

010101

chrisonline The browser icon in the corner of the main icon on Android devices will not be super easy to fix. I do not know yet how accurate this article is but I found this:

In 2017, Chrome rolled out a new feature for Android users: WebAPK. Now, when your users install your PWA (if it meets the requirements), a Google Play server will create an APK (Android Package, a native app container) on the fly and install it in the device as if it's coming from the Play Store. Your user doesn't need to enable insecure sources or touch any other settings.

When the PWA is installed, it will appear in the home screen, in the app launcher, in Settings and as any other first-class citizen app in the OS, including information on battery and space used in the system.

If your PWA doesn't meet all the requirements, the Play service is down, there is a connection issue, or another Android browser such as Firefox or Samsung Internet is being used, a standard shortcut to the home screen will be created. That icon will be browser-branded from Android 8+.

“So, this extension isn’t a valid PWA is that what you’re saying?” No.

Using a PWA validator this gets a score of 95 out of 100. The minus 5 points is because it doesn’t have push notifications. Although, as we know, Flarum has that ability within the app for push. I don’t plan on any time soon adding the “PushManager" stuff. Mainly because I don't know how and so it would take many days, weeks or months for me to figure out and implement. Plus a score of 95 out of 100 is still an A! 😬

On top of that, I don’t know if this is even the problem. I’m assuming that maybe, since it doesn’t have the Push stuff, Android is like, “Nope, not an app, adding the ugly browser icon, take that pawn!” But, it could be that the issue is something else I haven’t discovered yet. But, I don’t know what since again in a valdator, it has everything a PWA needs; minus push.

There is is one potential solution. I might be able to convert this PWA into a regular Android app and submit it to the Google Play Store. Then it would have a normal icon. But, you’d be stuck with the default icon. The black speech bubble (I couldn’t use the Flarum logo which might be a little better because it is copyrighted).

Plus, then you have a regular app... not a PWA. And browsers would not alert the user automatically to install the Android app. However, code could be added to alert the user that, “Hey, this site has an Android app; download from the Play store.”

I added a “known issues” section in the first post below the video. This will be the first “known issue.” A solution may come one day.

010101

jordanjay29 Ok, this is done (version constraint). I don’t agree with it but I like you guys so I’ll obey. 😝 I don’t agree because if I die tomorrow, my extension could stop being compatible just because of a little version number even if everything else still works. But, I guess if I die, you all would eventually be like, I don’t think this guy is coming back and someone could fork it. I know, morbid thinking, but it’s a real concern. 🤪

jordanjay29

010101 It's just insurance if Flarum's API happens to break for extensions after Beta 12, but I expect you'll be around and happy to update it if that happens. Thanks!

chrisonline

010101
OK thanks. Not such big problem for me.
I use the OneSignal Push extension so the problem with the icon isn't push it seems.

Anyway I think it is fine for now.
Maybe in the future you find why we don't get the full icon.
Thanks again for your work.

010101

chrisonline Still could be the push issue I mentioned. Yes, your Flarum has push notifications, but there isn’t official mobile app push notifications in this PWA code. I think it’s a little different and so it could still potentially be the problem. But, yeah, I’ll keep researching here and there.

What makes this harder is, I don’t have an android device to test this on. It works with the full normal icon on a Chromebook. So, it’s definitely just an Android specific decision.

010101

Version 1.0.4

I've released a new version with a couple small changes. I also discovered/confirmed something about caching. Here's what I changed and what I discovered:

Changed the web manifest file path to point to public root. This means you must now also move the site.manifest file to your public root along with the sw.js file. Before, I said to only put the sw.js file there. This change was made because a warning was showing in my browser dev console basically saying that the manifest should be at the root too. See first post of this thread for full install instructions.
I also discovered something about caching and thought I'd share some of the files this extension automatically caches immediately for the app version: main forum.css and forum.js, fonts, favicon, logo, any avatars showing on the main page, any additional css or js files in the head of your site, the web manifest file, and any page you visit. This last note there, any page you visit, is a big one. This means that if you lose connection and are using the actual app, you will at least be able to view any post you've visited recently. (Edit: As you will now see in the first post caching has been disabled due to logging in and out issues.)

If you have never installed this, to install, see the first post in this thread.

To update to this version:

You should already have the sw.js file in your public root, and so all you need to do is get the site.webmanifest file there as well. You now need both the sw.js file AND the site.webmanifest file within your main public directory.
composer update zerosonesfun/pwa
You might have caching issues such as, your app still using the old manifest file or something else. This can be frustrating and there isn't a great way for me to help you. Because all operating systems, browsers, phones, devices could be a little different I cannot provide instructions. But as an example, I updated plus decided to change my app's icons. It took me an hour to get the icons to change. I had to clear all caches, plus site data, plus app data, and I uninstalled the app and reinstalled it. Now finally, I have updated app icons.

I still hope to one day make it so that the sw.js and site.webmanifest auto install into your public root upon extension activation. Which will get rid of most manual steps. But, I do not have time today for that. Thanks, and I hope you find this useful.

finndev

@010101 Great work, I appreciate it my friend, really applauding for you 😄

youngseebi

We need an easy way to make this iOS app using Cordova! Great work though.

OrdinaryJellyfish

@010101 any reason you're not using the forum's favicon as the default icon for the PWA?

010101

OrdinaryJellyfish I thought about it but, the app icons need to be a certain size. So, I thought: What if someone uploaded an odd size favicon? Also to be honest I didn’t bother refreshing my memory around the exact size Flarum converts the favicon to... or does it not do any size changes? I’m not sure. Since I wasn’t sure, I went with separate icons to ensure that they are the correct sizes. Also, there’s only one favicon. The PWA needs two sizes. I worried about whether or not the favicon would scale well and whether or not it would validate (be what the PWA gods consider proper).

Thanks for bringing this up though. It’s something I’ll think about more. That certainly would be better - reduces install steps.

tolgaaaltas

PWA is most important part of Microsoft's next generation operating system called Windows Core OS (Evlaks called Windows 10X). They will announce tomorrow and i can't wait to see. Thank you for this extension. Our Flarum's will be ready now the big next think.

OrdinaryJellyfish

010101 Perhaps use the favicon by default if possible and add the option to upload custom icons?