Marfeel Docs

# PWA

If Marfeel PWA is not active yet, the PWA page is a wizard to guide activation.

If Marfeel PWA is already active, you can configure your PWA look & feel on that page.

# PWA Wizard

The PWA Wizard has the following steps:

graph TD
CDN{Has MarfeelCDN?} -->|Yes| A(Automatically get PWA)
CDN{Has MarfeelCDN?} -->|No| Wizard(Start Wizard)
Wizard --> HTTP(Verifiy Protocol: HTTP or HTTPS)
HTTP -->SW(Add marfeel_sw.js and marfeel_sw.html <br/> to your root directory)
SW --> Garda(Replace Marfeel Garda JS code)

PWA Wizard without CDN

# MarfeelCDN

If you use MarfeelCDN, all PWA activation steps are automatically done by Marfeel. You can start configuring your PWA as soon as MarfeelCDN is active.

PWA Wizard with CDN

Go to PWA Configuration.

# HTTP/S

This step is entirely automated. It checks under which protocol your website is available.

# Install service worker files

A PWA requires a working service worker (opens new window) at the root of a domain.

Marfeel provides two files, javascript and HTML, that must be added to the root directory of your website:

Keep the same file names; the Wizard step goes green once the files are available like:

  • example.com/marfeel_sw.js
  • example.com/marfeel_sw.html

TIP

The marfeel_sw.js file requires a very low HTTP cache header. Marfeel strongly recommends a max-age of 3600 seconds (1 hour).

You can use defaults for the HTML file.

# Replace Garda script

As you don't have MarfeelCDN, your website is marfeelized with a Garda script: this script needs an adjustment to activate PWA.

Garda script adjusted for PWA:

<script data-mrf-script="garda" data-mrf-host="live.mrf.io" src="https://live.mrf.io/statics/marfeel/gardac-sync.js" data-cfasync="false"></script>

Garda script adjusted for PWA (smartphone activation only)

<script data-mrf-script="garda" data-mrf-dt="1" data-mrf-host="live.mrf.io" src="https://live.mrf.io/statics/marfeel/gardac-sync.js" data-cfasync="false"></script>

Marfeel PWA is active! You can already start configuring it.

# PWA Configuration

The PWA Configuration panel has two sections:

  • One dedicated to the Push notifications provider of your site.
  • One dedicated to the appearance of your PWA if users install it on their phones.

PWA Configuration

# Push Notifications configuration

Marfeel Push Notifications provider is active by default for all new sites. You can replace MarfeelPush with your preferred provider:

  1. Remove Marfeel Push by clicking on the bin button on the right-hand side of the screen.
  2. Click "Add new provider".
  3. Select "OneSignal" as push notifications provider:

PWA Providers list

  1. Fill in your app Id.
  2. Click "Save" to validate your changes:

PWA Add

# Configure Add to Homescreen

Users can install a PWA on their phone as if it was a native app.

3 distinct aspects of your PWA on a user's home screen can be configured:

  • The app name: 45 characters maximum, visible in the installation dialog.
  • The app short name: 12 characters maximum, visible in the app launcher.
  • The app icon: a square image of type PNG, of 512px wide minimum.

Read more on the difference between "name" and "short name" (opens new window).

The "Save" button becomes active as soon as you make a change in this section.

TIP

Changes are discarded when you navigate to another window if you haven't clicked the Save button.

← CDN →