Plans & Prices My Applications Cloud Resources Profile Support Login Sign Up

Progressive Web App Tutorial    
This topic is assigned to Vick

Dec 13, 2017 07:55 PM
We are glad to announce you that the Progressive Web App option is released.

As you may know lately there were many news, about using and improving simple web apps according to the latest web technologies, so these will have the most of the functions a simple native application could have. A Progressive Web App (PWA) is the web application which can be installed and used as a simple native mobile application, with the possibility to be accessed offline and to be published without any store review. 

Currently we would like to announce that the WebApp platform is updated and now each of the users can try to create a Progressive Web Application with many interactive features.

The list of features and options available for the PWA will be in continuous growing, as our team plans more future updates for the PWA.

To start creating a Progressive Web Application, consider to follow one of the mentioned methods below.

Method 1. Create using a PWA Template.

1. Go to Templates section.
2. Choose the Progressive Web App Category
3. Select the PWA template.

See the screenshot for more details:


4. Edit & Configure step.
Here you will have to set the main configuration for the application.

4.1 General info
Here you will need to specify the General information related to your application.

4.1.1 Enter your domain. 
Here you will need to input your PWA domain or subdomain.
Make sure to set a CNAME record for your PWA domain pointing to webapps.seattleclouds.com

Note that it is has to be an empty domain or subdomain. Do not use domains which are active websites (domains which are already in use). If you have an active domain you can create a subdomain for your PWA using the CNAME record pointing to webapps.seattleclouds.com. 

After you have specified your domain, you will need to check its availability then proceed further.

4.1.2 Enter your application Short name
4.1.3 Enter your application Full name
4.1.4 Enter your application Description

See the screenshot for more details:

4.2 Media
Here you will need to upload the application icons

See screenshot for more details:


4.3 Styles
Here you can choose the Background color and the Theme color for your application.

See screenshot for more details:


4.4 Settings
Here you will need to specify the main settings.

4.4.1 Orientation:
Any
Natural
Landscape
Landscape-primary
Landscape-secondary
Portrait
Portrait-primary
Portrait-secondary

4.4.2 Display mode:
Fullscreen - All of the available display area is used and no user agent chrome is shown.

Standalone - The application will look and feel like a standalone application.

Minimal-UI - The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation.

Browser - The application opens in a conventional browser tab or new window, depending on the browser and platform.

4.4.3 Language

See screenshot for more details:

After all information and settings are specified you need to press continue. Next you will be redirected to the The PWA Editor Dashboard.

Method 2. Create a PWA using the templates from other categories.

1. Choose a template 
Make sure to disable Navigation tabs. WebApps do not support Navigation tabs. Your first page should be the index.html
2. Create the application using the WebApp platform. Set or Skip the Configurator step. After you have done this, make sure all the added features from the template are supported by PWA.
3. Enabling the Progressive Web App.
In this step to activate your PWA you will need to go to App Settings.
Then in General tab you will need to enable the "Generate Progressive Web Application (PWA)" option and Save settings. After you have enabled the PWA you can proceed with the editing of your application. 
4. General tab.
In General tab after enabling the PWA you can set the:
4.1 Short name
4.2 Full name
4.3 Description
4.4 Background Color
4.5 Theme Color
4.6 Orientation 
4.7 Display Mode 
4.8 Language
4.9 Open links in the same window

See screenshot for more details:

5. PWA Editor Dashboard

In this dashboard you will have access to:
5.1 Edit this PWA section.
This sections allows you to edit and add new features.

5.2 Design Properties section
In this section you will be able to change the style of your application.

5.3 PWA Settings
This section offers you all PWA options and settings.

5.4 Media Section
In this section you will be able to upload all your required icons.

See screenshot for more details:

You will have also additional sections for:

5.5 Advanced options.

5.5.1 Backup this app
5.5.2 Restore from backup
5.5.3 Synchronize apps
5.5.4 Duplicate this app



5.6 Support options.


5.7 Application embed code.



Additional features for the WebApps can be found in the Market Place. Make sure to search by the WebApps platform.

See screenshot for more details:



6. PWA Publishing
After you have done all the modifications and added the required content, you can proceed with publishing.

6.1 Add this application to an active plan. 

6.2 Press the Ready to Publish button in your Dashboard.



6.3 The Publish page

Here proceed with the submission.



6.4 The Media page

Here you will be able to upload all the required application icons and press NEXT to proceed with the submission process. 



6.5 The Generate your Progressive Web App(PWA) page. 

Here consider to check your Domain name, Short title, Long title. 



Pressing Publish in this section will start the generating process of your PWA. When the process finishes a QR code and a link to your PWA will be provided. 



In case you will not be able to configure and specify your own domain, you can generate the Alternative Progressive Web App.

See the screenshot for more details:



6.6 Accessing your PWA Application.

To test your application, you will need just to access this link using a Mobile browser. Some of the mobile browsers (Chrome and Firefox) may offer you to instal this PWA on your Android devices, this option should appear at the bottom of the screen while scrolling. See screenshot for more details:



You can also add manually the link to your Home Screen using the basic (Add to Home screen) Chrome option provided in the top right menu. 

Currently these options are supported only on Android. On iOS you will be able to access the PWA using browsers, but you will not be able to install it. Due to this the process of adding to home screen may differ depending on what browser you are using on iOS. Not all PWA options are supported by iOS, these are app installation, and offline mode, still the PWA can be used in any platform. PWA will not be supported in Android and iOS previewers. Consider to use the web simulator to preview your application.

NOTE that the PWA platform will have more updates in the future and we will revise all your feedbacks on this case.

Consider to Open a Support Ticket if you will have any related issues or questions.

THANK YOU FOR USING SEATTLECLOUD!


Dec 19, 2017 07:15 AM
Hi Vick, 
Thanks for this tutorial...I have a question, how to add Admob on this PWA?

Regards


Dec 19, 2017 07:55 AM
Hello,

Currently there is no option to add AdMob to the PWA.

Note that the application will work as a website, so you may try to add such banners.

If you will have any related questions or issues consider to open a support ticket on this case.

Regards,
Vick
SC Support Team


Dec 19, 2017 10:14 AM
Hi Rick,

Thank you for the communication and the reassurance that things are moving forward.

It would be most helpful if you could provide a explanation of what we need to do regarding  the CNAME record as many of us are not familiar with this.

Kind regards,

John



Dec 19, 2017 10:32 AM
Hello John,

CNAME is a DNS record used to specify that one domain is an alias to another.

You will need to make your domain or subdomain to be an alias to webapps.seattleclouds.com

In this tutorial we have specified how you can use it in 4.1.1 step.

For more details regarding the CNAME and other types of records, consider to read more documentations on this case offered by the Domain Providers.

Best regards,
Vick
SC Support Team

    1   
You must login to post messages. Click here to log in.