PWA (Progressive Web App)

Th0mC

Hi there 🙂
I really want (my users too 🙂 ) this working. Thanks for the extension.
As thedd
I added sw.js and site.webmanifest files to flarum root folder
-paste the code to sw.js
-and the code to site.webmanifest
and installed the extension composer require zerosonesfun/pwa
clear flarum cache, clear Safari iOS cache
And I have ssl activated 🙂
But when I add the website from safari to the homescreen, I just get a weblink to the site in safari.
I don't know where could be the issue 🙁
Just one thing, flarum is installed in a subdirectory on mywebsite https://lafabriq.org/forum and that's where I put the files.
Thanks for your help

010101

Th0mC It sounds like it could be working. Progressive Web Apps open in a web browser.

Th0mC

010101 Thanks.
I don’t think so, when I use other PWA :

I have an icon as an app and not a little screen capture of the website (as for just web link)
I don’t see any webadress in a navbar

But if you have any method to double check this is not the case, I could check to be sure.
Thomas

010101

Th0mC Try this:

Open the site.webmanifest file and change the start_url and scope like so:

    "start_url": "/forum/",
    "scope" : "/forum/",

I can see after visiting your site that your site.webmanifest file is not being detected properly. By default the code that goes with this extension is set up to work best when your Flarum installation is installed at your site's root. But, this change will hopefully fix it.

After you make this change clear all caches; flarum's and your browser.

Th0mC

010101 Thanks @010101.
Just tried it but I still have the same issue 🙁

010101

Th0mC It must be due to your set up. I see when you go to your main domain, it redirects to /forum. Maybe the manifest and sw.js needs to be moved to your main public root. Not in the /forum directory. And also revert the above changes. Put the start url and scope back to just “/.”

Another possibility is, I remember when troubleshooting this extension in the past, it takes a lot to clear all cached data. Just clearing the main browser cache might not be enough. I had to go into the Chrome dev console and actually delete things from the application tab. That’s if you are using Chrome. Long story short there are many things which could be causing this.

If you continue to not have success you may need to find a developer who is well versed in PWA. This extension works with a basic set up where the forum is served from the public root.

Th0mC

010101 Many thanks. It works 🙂 !
If I may: the icon I get for PWA is just a small screen capture of the website.
Normaly it should be the icon referenced in the site.webmanifest file right?
I add the /forum in the path but I still get this ugly screen capture. If you have any idea.

010101

Th0mC My first guess would be that your app icon cached. It’s different for every browser and device so you need to search the web for how to clear PWA cached icons. Sadly, some devices actually make it really hard to reset things like this.

Th0mC

SampaioLeal this extension + webpush notifications is so beautiful <3

I'm more than interested to get notification on my phone. Is it what you mean?
Can you give some details on how to get this ? Thx

[deleted]

010101 Hello, i just installed everything. Should it show something?

010101

[deleted] You’ll need to search the web for progressive web app to learn more. But, if all of the steps in the original post are followed, on certain browsers/devices, not all, you will see an install option after visiting the site.

For example, in Chrome Desktop browsers, you will see a little plus sign in the address bar to install.

After installing you’ll have an app icon on your desktop or home screen and the forum will open in its own dedicated window instead of in the regular browser window. It gives the effect of an app like experience.

But again, not all browser versions support PWA and with some devices, like the iPhone, you don’t need this. The iPhone will automatically do this without having PWA code as long as you add the site to your home screen via Safari.

It’s somewhat of a niche thing that to be honest, many normal users may not even notice it or want to “install” your site.

It’s an extra feature that you can offer for a select group of people with a select group of browsers. 😁

[deleted]

010101 Ah thanks for the explaining, so I have the files in the main folder before vendor, etc and installed it with composer but nothing appears with Google Chrome or Microsoft Edge Beta, I've cleared the cache at Cloudflare and in the admin panel.

tankerkiller125

010101 A note on Chrome mobile is that the install option will only appear after a certain number of visits, Chrome has an algorithm for figure out when to to display the install option. You can of course always force install it via the options menu.

010101

[deleted] Hard to say without seeing your set up but, the manifest and sw.js files need to be in your public folder.

010101

tankerkiller125 Interesting. That must be Chrome for most mobile devices except Apple. On my iPhone, Chrome iOS just doesn’t support PWA at all right now.

[deleted]

010101 They are. I dont see anything 🙁

010101

[deleted]

One thing to check is, can you access the manifest and sw.js file by going to https://yoursite.com/sw.js and https://yoursite.com/site.webmanifest? If you can't then the files are in the wrong spot.

Other than that. I have no idea. Since it's really hard to troubleshoot without seeing your file structure or website all I can suggest is that you keep reading up on PWAs. Find some basic "how to turn my website into a PWA" articles.

It also might be worth noting that you are not going to see anything in the main browser window. You would see an install option within the browser's settings or options. Chrome desktop will show "install" for a couple seconds in the address bar and then that turns into a plus sign.

[deleted]

010101 Hello, yes i can access the sw.js and site.webmanifest just fine. And yes i saw the install thing on a different forum where it actually works, but it does not appear for me. :/

010101

[deleted] I don't know about other browsers, but, if you have Chrome or install Chrome then you can try this. In Chrome, visit your site. Right click and click on Inspect. Go to the application tab. Is it detecting a manifest? If no, then you have the manifest in the wrong location. If it is detecting the manifest, next click on Service Workers (in the left-hand area of the developer console). Is it detecting the service worker? Do you see any errors or warnings anywhere in that Chrome developer console?

As a final offer of help, if you post your website address I can see if I see anything wrong.

danielunited

If someone owns a Flarum where this is installed, could you send a link here? I'd like to see how this works in practice.

010101

danielunited Here’s mine:

https://www.sitbreathe.be

It depends on the browser as far as what you will see. In Chrome (desktop), you will see a little plus sign in the address bar to install the PWA. It looks like Firefox for Android will also have a plus in the address bar. Or, you might find the install option in the browser’s options or settings menu.

On its own, once the app is “installed,” the code in this extension does not give push notifications and it does not make your Flarum work offline. It simply allows you to add a icon to your device which then opens the site in “standalone” mode (which is a frameless window with no address bar so it looks more like an app instead of opening in a standard browser window).

« Previous Page Next Page »