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.
Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
How to Create a Course App
When you´re building an Infoproducts App, that requires a membership area, it´s very important to include a "Starter" section. This way, if the Membership is already available, the Login can be linked directly. In the following video we show you the ...How to Publish an App on the App Store
Introduction In this article we will guide you step by step in the process of publishing in the Appstore. Scoreapps simplifies the development of Apps through a platform without programming, but we are not responsible for the approval or rejection of ...APPS: Publish an App on Google Play
Updates: If you have already published your app on Google Play and need to release an update, follow the steps for Updating an App on Google Play. Create a Developer account on Google Play Firstly, you need to create a Google Play Developer Account ...PWA - Desktop Version
PWAs are Advanced Web Versions of a mobile App and are therefore designed and designed for use on mobile devices. However, you can customize the desktop view by adding CSS code in the step"PWA Custom CSS"which you will find within the sectionPWA > ...App Publishing (Step by Step)
Crear Apps utilizando el constructor de Scoreapps es realmente rápido y sencillo, una vez finalizado el proceso de diseño y construcción de tu App podrás escoger entre las distintas opciones de Publicación: 1- Opciones de Publicación 1- PWA ...