How to Create a PWA (Progressive Web App) with the Apptekz App Builder

Apptekz PWA Creator

The Apptekz Mobile App Builder enables resellers to build both Native Apps and Progressive Web Apps (PWAs).

Our PWA Creator feature allows Mobile App Owners and Resellers to create and publish Progressive Web Apps (PWAs) from the dashboard of the Apptekz Mobile App Builder.

Activating a PWA

The PWA Activation Process can be done as soon as the Mobile App has been created. It is not necessary to complete the app to activate and publish the PWA. This enables a PWA to be used to demonstrate features and get feedback from stakeholders during the development process. All changes and app updates will be reflected in the PWA in real-time.

It is recommended that PWAs are mapped to custom domains to provide business branding and easier sharing of the PWA. Custom domains require a CNAME record mapped to a subdomain of the desired customer domain. Once completed, let us know and we’ll configure that on our side to enable access through that URL and we’ll create an updated QR code.

For example: If the PWA has been created for a business called mybiz and has the domain of mybiz.com, you would create a sub-domain and CNAME record for mybiz.com as something like m.mybiz.com or pwa.mybiz.com, then App users would access and share the PWA using that custom URL.

Before you begin to create your PWA, you must first start by creating a Mobile App from your App builder Dashboard. Your app should already have a name, an icon, and a color picked for the splash screen. You can always change these things later in the development process as needed.

To configure custom domain mapping, please open a support ticket with your custom PWA mapping request. You must include the custom URL that you have already mapped or a subdomain request for our PWADirectory and the APP ID. We will typically be able to perform our part of the configuration steps to enable the custom PWA mapping within one business day.

Configure a Custom PWA domain mapping:

The custom PWA domain mapping requires the basic App/PWA configuration steps to be completed before mapping a custom domain to the PWA. (Once you’ve named the app and added at least one feature to the app you can begin the PWA configuration)

1. At the hosting company for the intended customer domain, create a subdomain
2. Using the DNS management tools for the domain, create a CNAME record for the subdomain mapped to cms.apptekz.com
3. After completion of steps 1&2, open a support ticket to request your custom domain and matching QR code to be enabled for your app.
   • Your support ticket should include the following:
     • App Name
     • WebApp link from the Editor > Application tab
     • Custom Domain URL / Request for subdomain for PWADirectory.com (2 or 3 options in order of preference)
       • See note below for PWADirectory requests

For PWAs that cannot be mapped to a customer’s business domain, just skip steps 1&2 and go straight to step 3. We will be happy to map to our white label PWADirectory domain upon request. This option is available at no charge and we’ll also create a custom QR code for the mapped custom PWA domain. Please suggest 2 additional subdomain options for your subdomain if requesting an entry on pwadirectory.com and check the availability of your preferred subdomain before making your request. We suggest keeping the subdomain as short and meaningful as possible. (using the example above, if your business is called MyBiz, if available, you might use mybiz.pwadirectory.com)

How to Create a PWA with the PWA Creator Editor Module

Go to: App Builder > Left Side Menu > Modules > PWA Creator

By Default, the PWA Creator page will show a screen like below if a PWA has not been activated for that particular app.

If you have used PWA Activator using User-Email then user will see a screen like below.

PWAs must be activated PWA using PWA BackOffice Module. After PWA activation users will see the screen shown below.

Here in the PWA Details page, fill out the app details like app short name, app name, meta title/description/keywords, color scheme, offline message etc. These additional details are used to create the PWA Manifest.

PWA Manifest

A web manifest file provides meta data to the browser, such as theme colors and the add to home screen experience.

name: Your PWA Full Name (e.g. My PWA Demo App)

short_name: Your PWA Short Name (e.g. Demo App). This will be used when there is insufficient space to display the full name, such as the home screen.

theme_color: Color used in the android browser’s address bar UI.

background_color: Splash Screen Background Color (e.g. #FFFFFF)

You don’t need to change other manifest properties like icons, scope, start_url, display etc.

Manifest files are supported in Chrome, Edge, Brave, Vivaldi, Firefox, UC Browser, Opera, and the Samsung browser. Safari has partial support, however the meta tags will help bridge that gap. * Beginning in 2023, iOS has updated their PWA support to enable Web Push bringing iOS and Android feature parity. Our platform updates to support the latest iOS advancement and iOS Push are scheduled on the roadmap for May 2023.

If the PWA Push module is enabled for all apps on the platform, users will see “Enable Push Notification” option to enable PWA Push Notification for individual apps.

On click of a next button, user will see a screen like below to configure iPhone Install Pop-up.

Here default text will be pre-filled. iPhone share icon will be auto added between text line-1 & 2.

Here user can manage text color, background color and border color. User can customize popup like display popup in center position, black overlay, display app short name & icon etc.

On click of a next button, user will see a screen like below to configure Facebook PWA Pop-up.

User can enable or disable Facebook PWA Popup by clicking on a checkbox.

Here default text will be pre-filled. User can manage text color, background color and border color.

User can customize popup like display app short name & icon, display black overlay etc.

User can see a demo preview of popup configuration on left side panel.
Finally user has to click on a save button to save all details and page will be refreshed.

Now a screen like below will be shown.

PWA Icon upload should be sized at (512px × 512px) in PNG or JPG format.

Then after a screen like below will be shown.

Now user has to click on a “Publish your PWA” button, page will be refreshed and default PWA Link will be shown.

Note: After creating a new PWA, additional changes or updates can be made in the Editor/Creator. Just make updates to PWA Details or any other items such as text in a popup, then re-publish PWA. All changes will be updated and reflected on all PWAs dynamically.

Have questions or need additional information?

Open a ticket at https://apptekz.com/support