PWA App

(BlaB! WS v20.11+)

A progressive web application (PWA) is an application delivered through the web and built using HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. PWA apps only work with SSL (https) websites.

We provide a pre-made PWA app for your BlaB! WS instance. Settings such as app name, icon and background color can be set in AdminCP ยป Settings ยป General Settings ยป PWA App. In order to install the app you have to point your users to the subfolder /app from your website. You can modify and use the code snippet below - do not forget to replace https://URL.COM/CHAT/app/ with the proper URL/path to your /app subfolder. Google Chrome and Chromium derivates on both desktop and mobile will display an INSTALL button, Firefox and older browsers instructions and screenshots how to install the app from the interface of the browser.

<div style="color:#222;background-color:#fff;display:inline-block;width:325px;text-align:left;line-height:120%;font-size:14px;cursor:pointer;margin:20px 5px 20px 5px;padding:20px;box-shadow:2px 2px 2px #666;border-radius:20px 0 0 0" 
onclick="top.location.href='https://URL.COM/CHAT/app/'">
<div style="float:left;font-size:40px;line-height:30px;transform:rotate(-20deg)">๐Ÿ’ป</div>
<div style="float:left;font-size:40px;line-height:30px;transform:rotate(10deg);position:relative;left:-10px">๐Ÿ“ฑ</div>
Our web app works on desktop and mobile devices. <b>Click here</b> to install.
<br style="clear:both" /></div>
๐Ÿ’ป
๐Ÿ“ฑ
Our web app works on desktop and mobile devices. Click here to install.
๐Ÿ’ป
๐Ÿ“ฑ
Our web app works on desktop and mobile devices. Click here to install.
๐Ÿ’ป
๐Ÿ“ฑ
Click here to install our web app!
๐Ÿ’ป
๐Ÿ“ฑ
Click here to install our web app!


You can also advertise your app using Machines: Time Machine and/or TheGodFather.


IMPORTANT!

The settings of the PWA app - app name, background color, fullscreen/standalone etc reside in a file named pwa.manifest in the main chat folder. The file can be edited from the AdminCP directly. App icon as 3 separate PNG images is available in the subfolder /app.

pwa.manifest and default icons are included in the initial install pack and in the update pack from November 2020 - 20.11. If you skip 20.11 update you have to provide an icon - 3 PNG images in the subfolder /app: 128.png, 256.png and 512.png and a writeable empty pwa.manifest file to edit from AdminCP ยป Settings ยป General Settings ยป PWA App.


PWA Builder

PWA Builder allows you to turn your PWA app into a MacOS, Windows10 or Android app that can be submitted to the corresponding app store e.g. Google Play. Presently PWA Builder does not have an option to create IOS apps.

We do NOT provide any support regarding PWA Builder.

 

Steps how to create an Android .APK file:

  1. Make sure that your PWA app is ready to use - name, short name, icons etc are set in pwa.manifest, you can install the app on your device and all works as expected. SSL (https) is a must!

  2. Go to: PWA Builder and submit the URL of your PWA app: https://URL.COM/CHAT/app/

    • You app will be evaluated - in order to continue the score must be 100:
      • MANIFEST 40
      • SERVICE WORKER 40
      • SECURITY 20
    • There is an error that has to be fixed before you continue - PWA Builder does not fully respect pwa.manifest on your server. Click on View manifest and replace in Start Url (left, bottom): app/network.html with network.html. The change should affect the right part of the screen as well and you should have there "start_url": "network.html" When ready save with Done.
    • Hit Build My PWA
  3. You'll be provided with download links - download the Android package.

    • Unzip the downloaded ZIP file (keep a copy of the ZIP file, it contains the keystore and the password your app has been signed with).
    • Create a new folder .well-known in your web root folder: https://URL.COM/.well-known and upload assetlinks.json from the ZIP package to https://URL.COM/.well-known/ - this ensure that you own the domain and the app can trust it's safe.
  4. Install the .apk file from the ZIP package on your Android device and test.

  5. Here you have instructions how to submit your new app to Google Play.


Proof of concept: Download here our BlaB! WS Pro Android app created with PWA Builder


Page updated: 2020-10-25