How to publish your Progressive Web App (PWA)

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:

1. PWA installation doesn't require to go through stores like play store, app store etc.
2. PWA displays an offline page while user is offline. You can display your contact info, full web page etc.
3. PWA supports web push notification, splash screen and web share functionality.
4. 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.

1. By clicking on the button “Edit PWA Details” you can edit the PWA details.
2. By clicking on the button “View PWA Icon” your 512px PWA Icon will be displayed in another browser tab.
3. 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 build an App for a Restaurant

  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: 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, ...

• Audio & Music

  To add this feature to your app go to the step "Features" and click on the icon "Audio": Then give a name to this new app section. Then click on the + icon to add a new Playlist Then place a title and image on the Playlist and click OK to save your ...

• APPS: Contact

  This feature allows you to create a contact page for your business. Add important data such as Address, Phone Number and Email. To add this function to your application go to the "FEATURES" step and click on the "Contact" icon: Settings. Within ...

• APPS: Custom page

  This functionality gives you several options for creating an information page. You can write an article with an image, you can publish a photo gallery, you can post a video directly on this page and you can add call buttons or a link to any external ...

• Related Articles

• How to Publish an App on App Store

  Introduction In this article, we will guide you step by step through the process of publishing your application on the App Store. Scoreapps simplifies app development through a no-coding platform, but we are not responsible for the approval or ...

• APPS: Progressive Loyalty Card

  This feature allows you to launch a loyalty program to reward your customers as they increase their purchases. On the same loyalty card, you can set up multiple rewards and the customer can redeem them as they accumulate enough points. In addition, ...

• Create an App for Courses

  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 ...

• APPS: How to 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 ...

• How to build a Directory App

  Would like to see your own directory app published in the Appstore and Google Play? With Scoreapps you can build your App without any technical or programming knowledge and also save thousands of euros in development and infrastructure. Create all ...