PWA Versions (Progressive Web App) and How They Are Published
A Progressive Web App (PWA) is a combination of a Website and a Mobile App.
PWA´s use modern web capabilities to deliver an app like experience to the end-user.
They work like web apps but users can install them (add the app to their home screen) directly from a browser.
PWA's provide users with the following advantages:
- PWA installation doesn't require to go through stores like play store, app store etc.
- PWA displays an offline page while user is offline. You can display your contact info, full web page etc.
- PWA supports web push notification, splash screen and web share functionality.
- PWA is discoverable in search engine and sharable using URL.
So the best thing about PWA's is that you can now launch your own in just a few minutes, directly from your Scoreapps dashboard, without having to depend on the approval of Google and Apple as it happens with native apps.
How to publish an App in PWA version?
From the main dashboard of the App builder, go to the left hand side menu and click on > PWA > Activate PWA.
After the PWA self-activation, the PWA Details settings form will be displayed.
Here you should add the app details: app short name, app name, meta title/description/keywords, color scheme, offline message, etc.
It's also important to check the "Enable Push Notification" box in order to enable push messages in the PWA.
By clicking on the "Next" button, the iphone install pop up settings screen will be displayed.
The instructions message to add the App to the home screen of an iPhone, can be edited in text lines 1 and 2.
You can also change the color off the text, background, borders, and even customize the pop-up window to display it in the center of the screen, overlay it in black, display the short name of the app and icon, etc.
Clicking the "Next" button will display the Facebook PWA pop-up settings screen.
From here you can enable or disable the PWA Installation Message in the Facebook browser.
A default text will also be added, but you can change or edit this text at any time if you need too.
You can also manage the color of the text, of the background, the border or even customize the pop up by displaying the short name of the app and the icon or simply by darkening the background.
On the left hand side you will see a preview of how the pop up will be displayed.
Click on the "Save" button to secure any changes.
If you have enabled PWA push notifications, the option "PWA Push Subscribe Details" will appear during this step.
If so, just click on the "Edit Push Subscribe Details" button to configure the push subscription message and success message.
On the other hand, if you have NOT previously enabled Push Messages (as in this case), only the “Upload PWA Icon” section will be displayed.
Note: If you did check the Push Notification box during the PWA Details step, the option to "Enable Push Sender Page" will appear as below.
When you upload your PWA icon (512*512px) in PNG format, the following screen will be displayed.
Just click on the “Publish your PWA“ button and your App would finally be published as a Progressive Web App.
- By clicking on the button “Edit PWA Details” you can edit the PWA details.
- By clicking on the button “View PWA Icon” your 512px PWA Icon will be displayed in another browser tab.
- By clicking on the button “Regenerate PWA” you can regenerate & Republish the PWA.
Here you will also find the url link to access the PWA, along with the QR code to be able to download the PWA.
On the other hand, if you have added a custom domain for the PWA, it will also be displayed here.
And finally, if you click on the "Click here to add custom CSS" button, a new browser window will open.
Within the displayed box, you can customize the appearance of the desktop PWA by adding CSS code.
Once you have added the CSS code, just click "Save" and the changes will immediately apply to the PWA.