Progressive Web Apps

Post any questions you have about using the Verj.io Studio, including client and server-side programming with Javascript or FPL, and integration with databases, web services etc.

Moderators: Jon, Steve, Ian, Dave

Segi
Ebase User
Posts: 649
Joined: Mon Dec 09, 2013 6:37 pm

Progressive Web Apps

#1

Postby Segi » Fri Oct 12, 2018 6:21 pm

PWA support was added in 5.4. Im trying to created a sample PWA.

I created a new PWA and gave it the folliowing settings:

Short Name: PWATEST
NAME: PWA Test
Service Worker: (left it at default)
Start Form: PWATESTFORM

The form only contains 1 text label. It has no other controls on it.

After doing this, I loaded the form by visiting the URL https://mydomain.com/ufs/PWATESTFORM.eb in google chrome on Android.

I expected to see it look like a native app I.E no URL but it shows up like a regular site.

After turning on Airplane Mode and refreshing, the page does load offline but still has the URL bar.

Do I need to create a mainfest.json or does Verj do that with the info that you enter on the PWA screen for you ?

What am I doing wrong ?

Should I be referencing the PWA short name that I specified above somehow ?
0 x

sam
Ebase User
Posts: 4
Joined: Thu Apr 12, 2018 8:44 am

Re: Progressive Web Apps

#2

Postby sam » Tue Oct 16, 2018 9:28 am

Before a PWA can run full screen, like a native app, it needs to be installed (added to the home screen).

On Android devices you should be prompted to install the PWA by a banner, if you don't see the banner or have dismissed the banner you can tap options (three dots) and "Add to Home screen".

Reasons you might not have seen the banner in Chrome on Android:
[*]The page was not served using https
[*]No icons were added in the PWA screen
[*]No theme or splash colour were given

(On iOS devices you’ll need to tap the share icon in Safari and find "Add to Home Screen" in the bottom row.)
0 x

Segi
Ebase User
Posts: 649
Joined: Mon Dec 09, 2013 6:37 pm

Re: Progressive Web Apps

#3

Postby Segi » Tue Oct 16, 2018 3:28 pm

sam,

I don't see the banner prompting me to add the app to the home screen but if I manually add it to the home screen and launch the pwa, it does load in Chrome without a URL bar
0 x

geadon
Ebase User
Posts: 67
Joined: Wed Aug 15, 2012 1:22 pm

Re: Progressive Web Apps

#4

Postby geadon » Fri Nov 23, 2018 11:47 am

Segi,

I managed to get my test PWA to run as an app without the bar on my desktop, not tried it on a mobile device yet. I used Chrome to navigate to the URL of the app, in the same way I would if I was accessing the normal form and Chrome should give you the option to install the app (under the menu at the top right). This added the icon to my desktop and when run was in a standalone app window without the navigation bar.

You can check to see if the browser has found the manifest by using the developer tools and looking under the 'Application' tab (in chrome). I believe Edge also supports PWA's but not IE.
0 x


Who is online

Users browsing this forum: Google [Bot] and 8 guests