[JoyFreak] Custom PWA

[JoyFreak]

JoyFreak submitted a new resource:

Custom PWA - Make your PWA feel like a real app.

Find:

<link rel="manifest" href="{{ base_url('webmanifest.php') }}">

Replace:

<link rel="manifest" href="{{ base_url('webmanifest.json') }}">

Open file webmanifest.json with notepad:
Edit all areas that say "EDIT". It's pretty self explanatory and you can use the default webmanifest.php as guidance if you've set it all up in the Admin CP > Setup > PWA Setup. Just head over to your website and add /webmanifest.php at the end to get all the information to fill out...

Read more about this resource...

 

[punisher1]

What is the difference of this thing? Can you provide some screenshots? If I do it can iOS users also use it too?

 

[JoyFreak]

What is the difference of this thing? Can you provide some screenshots? If I do it can iOS users also use it too?

From the resource description:

The only thing changed between the two files is the "display". Having it as "standalone" will make the app feel like a real app, even on iOS and other devices.

It's actually effective on iOS so yes, iOS users can use it also. It will make the PWA feel like an app without the web browser action links.

 

[punisher1]

From the resource description:


It's actually effective on iOS so yes, iOS users can use it also. It will make the PWA feel like an app without the web browser action links.

Nice! So without making it .json, if I just add display: standalone thing to my current PWA file will make it work or I need to use .json file?

 

[JoyFreak]

Nice! So without making it .json, if I just add display: standalone thing to my current PWA file will make it work or I need to use .json file?

It's best to keep both files separate as it may get overwritten when you upgrade your forum.

 

[Abizaga]

That worked perfectly! Thanks so much for the fix! Now it'll always feel like its own application.

 

[JoyFreak]

That worked perfectly! Thanks so much for the fix! Now it'll always feel like its own application.

You’re very welcome. Glad it help.

 

[rdn]

From the resource description:

It's actually effective on iOS so yes, iOS users can use it also. It will make the PWA feel like an app without the web browser action links.

But my default install XF 2.2.1 already has this config.
Looking at your .json file it's identical to my /webmanifest.php also.

Not sure what is the difference.

 

[rdn]

Oh here at xf.com, it's using
"display": "minimal-ui"
But mine already using standalone.

 

[JoyFreak]

But my default install XF 2.2.1 already has this config.
Looking at your .json file it's identical to my /webmanifest.php also.

Not sure what is the difference.

It’s a minor difference.

The only thing changed between the two files is the "display". Having it as "standalone" will make the app feel like a real app, even on iOS and other devices.

 

[JoyFreak]

Oh here at xf.com, it's using
"display": "minimal-ui"
But mine already using standalone.

So then you don’t need it. By default it’s on minimal-ui. You or someone else must have changed it.

But having a separate file to make your changes is recommended. You can do a lot more like track how many users have downloaded your PWA. I might do a tutorial on that later.

 

[Abizaga]

So then you don’t need it. By default it’s on minimal-ui. You or someone else must have changed it.

But having a separate file to make your changes is recommended. You can do a lot more like track how many users have downloaded your PWA. I might do a tutorial on that later.

Actually that would be really cool.

 

[punisher1]

@JoyFreak, Application icon looks like that. It shows the logo at Android but iOS devices showing the page screenshot in icon.

 

[JoyFreak]

@JoyFreak, Application icon looks like that. It shows the logo at Android but iOS devices showing the page screenshot in icon.

View attachment 239309

It should show the icon you’ve set in the webmanifest file. Have you deleted the pwa and tried reinstalling again?

 

[punisher1]

It should show the icon you’ve set in the webmanifest file. Have you deleted the pwa and tried reinstalling again?

No I just changed it to .json and used everything I used in Android. Plus it's normal at Android. Only iPhone shows it like that. Maybe that's some bug on iOS end?

 

[JoyFreak]

No I just changed it to .json and used everything I used in Android. Plus it's normal at Android. Only iPhone shows it like that. Maybe that's some bug on iOS end?

Can you send me the link to you webmanifest so I can take a look. Either here or pm me.

 

[Betclever]

Any capture please? @JoyFreak

 

[Abizaga]

Also worth noting: My site didn't have that line of code in the PAGE_CONTAINER template by default so if that's the case just throw rhem near the top in <head> tags.

 

[Cupara]

So then you don’t need it. By default it’s on minimal-ui. You or someone else must have changed it.

But having a separate file to make your changes is recommended. You can do a lot more like track how many users have downloaded your PWA. I might do a tutorial on that later.

That would be great.

 

[Wildcat Media]

Is the json file respecting a user's choice for style? We have eight styles (four color variations of two different themes, XF default theme and a third party theme). In XF's implementation, the app's title bar and other attributes change when a visitor changes themes. These two lines:

    "background_color": "EDIT",
    "theme_color": "EDIT"

...make me think the theme might not be changed?

And, what values go in there? Hex or RGB?