PWA (Progressive Web App)

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!

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.

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.

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?

brian85

010101 Good initiative I had to made it myself a few days ago and Flarum works well as PWA !

brian85

hello, I just have a problem reported by ios users on safari with scrolltop on reply screen they cannot see what thez are typing.
see : https://discuss.flarum.org/d/6595-scrolltop-in-ios

010101

brian85 That doesn't have to do with this extension. I have that problem too with or without this extension in iOS browsers.

I haven't reported it to the Flarum devs. But, it's definitely not this extension. It's Flarum core.

Edit: It is known. Here is the issue: flarum/core895

brian85

010101 Sorry you're absolutly right I'm confused !

mskian

010101 Thanks a lot for this Extension 🌻

Check out the issue on Github - zerosonesfun/pwa1

010101

mskian Hello! Thank you for your suggestions and your pull request. I'm adding the orientation "any" to the manifest. That's a good idea. I'm not adding the additional icon sizes. Here's why:

https://developers.google.com/web/tools/lighthouse/audits/manifest-contains-192px-icon

The above page states that the other sizes aren't necessary. Plus, if someone wants to add them they can easily update the manifest file and do so.

I see you escaped the slashes in the start url and scope. I read a few posts online saying that's not necessary in a manifest and since it's working well for me as-is with no warnings or errors, at this time I'm not going to adopt the escaped slashes or the updated start url with the traffic monitoring codes.

One way to think about this extension is that it can be used as-is, or one can think of it as a good starting point. It can be edited, added to, and tweaked by each individual webmaster / developer to fit their needs.

Again, thank you so much for taking the time to make the suggestions.

010101

Version 1.2

After visiting my forum which has this extension installed I noticed something that I did not notice before. After logging in I had to manually refresh the page to see that I did in fact log in. Then after logging out, I still appeared logged in. I again had to refresh the page to see that I was logged out. This was happening due to all of the extra caching this extension was doing. I thought the extra caching only affected the actual app version, but I was wrong. The caching also affected the regular browser version of the site. In an effort to fix this quickly without having to spend days, weeks, or months troubleshooting, I switched to a different Service Worker.

The new Service Worker does not do any caching. I take that back, it caches a new offline.html page. But, other than caching the new offline page, no caching is done by this extension now. This guarantees that there will be no more log in / log out hang ups or other similar issues.

Changelog:

Updated sw.js (Service Worker) so that no caching (besides any caching Flarum already does) takes place. Except for a quick cache of the new offline page.
offline.html added. Since the PWA will not work offline, this page is used to alert users that they must have lost internet connection. It states, "This app requires a network connection; it cannot be used offline. Please check your connection."
Added "orientation": "any" to the manifest. (Thanks, @mskian.)

Install / Update
If you've never installed this before go up to the first post in this thread and follow the instructions. If you are updating, run the composer update zerosonesfun/pwa command. Be sure to deactivate and reactivate the extension in your admin panel; this refreshes important files in your public assets folder. Tweak your manifest file to your liking. Delete the existing manifest and sw.js file at your public root, and then copy the new manifest and sw.js file to your public root. Emptying any cache you can think of usually doesn't hurt either.

🕉 Namaste.

chrisonline

010101
Thanks for the update.

And I don't know why but now the icon on Android is also without the chrome icon and a full round icon:

« Previous Page Next Page »