top of page

Empyrean - Wix Design Studio

Create a PWA (Progressive Web App) for your Wix Website

What is PWA?

What is a progressive web app?

You can think of PWA as sudo mobile app.

A mobile app which opens a website without the elements of a web browser and with some added features of mobile app.


Which means if you already have a website, you can create a PWA by adding some additional files and features to your website.

But adding that additional files can be hard, especially if you dont know the drill. Fortunately, there is a website which will generate PWA for you.



PWABuilder is a tool by Microsoft which helps you generate your own PWA Builder for various platforms like Android, iOS, Windows, etc.


In this blog we will see how we can generate PWA using PWABuilder for our Wix Site.


Why use PWA?

  1. Let's say you already have a functional website, and you don't want to spend your budget on developing a native app for different platforms like Android and iOS. PWA will be the next best choice. As it provides you with app presence in app store and play store. (You can always give an update to the user if in future you decide to develop a native app).

  2. It's small in size and doesn't use any storage of user's device. (It uses a little, but so little that it doesn't matter).

  3. It can work as a placeholder app while you develop an actual native web app.

It's a little better than user opening website directly in web browser. How?

  1. The PWA can be accessed directly from the app drawer. So, no remembering and typing url.

  2. Users keep seeing icon of your PWA while browsing for other apps in the app drawer, increasing chances of user opening your PWA.

  3. It supports Offline Access, Push Notifications, Hardware Access, etc...

So, you see, there are many benefits of offering users with PWA, especially if you don't have a native app but have a functional website. For more info on PWAs, visit https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/


Now to the main Point...


How to make a PWA for your Wix Site?


Main requirement for PWA is to have access to root directory of your website, but Wix does not provide this access. Fortunately, we have developed a workaround for this. Follow along with this guide.


We will show you steps on our own website https://www.mandvi.online/ and you can follow along on your own Wix site. At end of this Blog, we will link apk for android of PWA we made for our own website, so you can test it if you didn't generate your own PWA just now.


Step 1: Open PWABuilder.com


and enter your Wix website URL. make sure to use correct subdomain including www. (Otherwise, there will be a URL Bar shown in resulting app, if this step is done incorrectly)


PWA Homepage Screenshot
In our case we entered www.mandvi.online

Click Start.

Result will be many errors:

Thats fine, now we will solve these errors one by one.


Step 2: Edit Manifest


Click Edit Your Manifest button, shown in above screenshot.

A popup will open, fill all the required details according to your app requirements.

And click Download Manifest, once done.

It will download a manifest.json file.


Open the file in any text editor. It will look something like this:

Keep this open and head to your Wix Editor.


Step 3: Configuring Wix Website


Open your Wix Website and enable Dev Mode.



And then follow following 3 steps:



  1. Click on the Public & Backend icon.

  2. Create http-functions.js file in Backend section. (For more info on http-functions.js file use, visit: https://support.wix.com/en/article/velo-exposing-a-site-api-with-http-functions)

  3. Head to code editor ide at bottom part of wix editor.

We will expose an api which will host manifest.json file.


Step 4: Host manifest.json file


Import required velo libraries:

import { ok, notFound, serverError } from 'wix-http-functions';

Paste manifest.json content from text editor and assign it to a variable:

let manifest = `{
  "background_color": "#ffffff",
  "description": "Dabeli Store, Bandhani Store and Model Ship Store exclusively from Mandvi Kutch",
  "dir": "ltr",
  "display": "standalone",
  "name": "Mandvi.online",
  "orientation": "any",
  "scope": "/",
  "short_name": "Mandvi.online",
  "start_url": "/"
  .
  .
  .
  shortened
  .
  .
  .
  +tokrQ3AHAABYxAjX5giVegAAAAAApkdwBwAAAAxAcAcAAAAMQHAHAAAADEBwBwAAAAxAcAcAAAAMQHAHAAAADEBwBwAAAAxAcAcAAAAMQHAHAAAADEBwBwAAAAxAcAcAAAAMQHAHAAAADEBwBwAAAAxAcAcAAAAMQHAHAAAADEBwBwAAAAxAcAcAAAAMQHAHAAAADEBwBwAAAAxAcAcAAAAMQHAHAAAADPD/A5HqmMcJJQ0EAAAAAElFTkSuQmCC",
      "sizes": "750x1334",
      "type": "image/png"
    }
  ],
  "icons": [
    {
      "src": "https://static.wixstatic.com/media/c0c19a_323c8f1685814f5d9408b381aacb098f~mv2.png",
      "type": "image/png",
      "sizes": "1330x1330",
      "purpose": "any"
    }
  ],
  "shortcuts": []
}`;

Note: Do not copy above code, use your own manifest.json data and assign it to some variable like shown above


Result:

The manifest contains an image in base64 format, so resulting manifest.json will be very large.


Next, we will expose this variable as a file:


Add following code below manifest.json file variable:

export function get_manifest(request) {
    let options = {
        "headers": {
            "Content-Type": "application/json"
        },

        "body": manifest // Variable with your manifest.json data
    };
    return ok(options);
}

It will look like this:



Publish the site.

Now open a new tab and visit this URL:

<your-wix-website-domain>/_functions/manifest

For e.g., in our case it will be: https://www.mandvi.online/_functions/manifest


Result should be this:

You will see your manifest.json file.


Step 5: Add redirect for manifest.json

Head over to your Wix site dashboard, and open "Marketing & SEO > SEO > URL Redirect Manager"

Click New Redirect and add a redirect like this:

In Old URL enter: 

/manifest.json

In New URL enter:

/_functions/manifest

Click save and it visit this url now:

<your-wix-website-domain>/manifest.json

It should redirect you to original manifest url.


Step 6: Add custom code to your wix site, to include your manifest file in html code


Go to Settings > Custom Code

Click Add Custom Code and add like shown below:

Paste this in code snippet

<link rel="manifest" href="https://<your-domain-name>/manifest.json" />

In our case its:

<link rel="manifest" href="https://www.mandvi.online/manifest.json" />

Click Apply.


Now head back to PWA Builder and hit refresh:

You will notice all errors in Action Items are gone. (It still shows some warnings, which are some optional but recommended things missing from your manifest.json file)


Step 7: Generate APP


Click Package for Stores button. This will generate app package for your required app store:

Let's generate for Android. Click "generate package" next to Android.


You can provide Package ID, name and set various parameters. After that click "Download Package"


It will take some time (around 2 minutes) to generate your package.

Once downloaded, open the ZIP file.


It will have following contents:



Copy the .apk file and move it to your android phone.

Install it and open.


You will see app opens your website but with a URL Bar on top.



Now we will remove the URL Bar, so the user feels like they are using an app.


Step 8: Remove URL Bar by adding assetlinks.json


Open assetlinks.json file which was included in Zip file which PWA Builder created for us.

It will look something link this:

Copy all content and head back to http-functions.js file in wix editor

Paste assetlinks.json content and store it in a variable:

let assetlinks = `[{
        "relation": ["delegate_permission/common.handle_all_urls"],
        "target" : { "namespace": "android_app", "package_name": "online.mandvi.www.twa",
                     "sha256_cert_fingerprints": ["69:49:80:BF:0E:FC:0C:F6:CE:1B:90:D6:8D:E7:0B:7D:B0:7E:25:D0:86:D4:28:A1:65:A2:19:4D:A7:57:63:38"] }
      }
]`

And expose its API:

export function get_assetlinks(request) {
    let options = {
        "headers": {
            "Content-Type": "text/plain"
        },

        "body": assetlinks
    };
    return ok(options);
}

Result:


Now visit following URL and verify data is returned by API

<your-wix-website-domain>/_functions/assetlinks

In our case its: https://www.mandvi.online/_functions/assetlinks

Last step is to add following redirect:


This will enable assetlinks.json url for our website.

Click save and publish the site.


Now open your app and you should see url bar is removed now.



And just like that your PWA is ready to be published on Play Store.


Once you Publish your PWA to playstore, you will need to do additional changes to assetlink variable in your http-functions.js file. Refer PWA builder's documentation for steps to follow for publishing in Play Store: PWABuilder - Packaging for the Google Play Store


You can follow a similar process to generate PWA for Windows and iOS also.

Refer official documentation for additional help: PWABuilder Suite Documentation


Feel free to contact us if you want any help.


Try the resulting apk (for Android) we made in this demo: https://drive.google.com/file/d/1pbfizsJO3fBS-4mf3fandXoh6XeahvLQ/view?usp=share_link


706 views2 comments
bottom of page