View on GitHub

plugin_sf_pwa

Salesforce Demandware cartridge to enable PWA support on your storefront

What is all the buzz about

What is PWA? Why PWA?…. Before answering that let’s have a look at how a user interacts with the digital world. As per study users usually spend 13% of their time on the web and 87% of that on Native apps due to their capabilities like push notification that brings the user back. So does that mean to abandon the web completely? Well… not exactly whereas the user spends most of the time on native apps but when it comes to reachability web surpasses native apps. On an average user installs ZERO apps per month where visits hundreds of websites at the same time. So if your app is not in users’ top choice you can forget about it. This gap between native apps’ capability and the web’s reachability is covered by PWA.

PWA collects the goodness of web reachability as once user visits your website he will be shown app install banner hence instead of dedicating an entire page for letting user know where to install your app, you can go on with your business and let browser handle app installs, on the other hand, PWA gets the goodness of native apps from its capabilities like push notification, offline experience and interact with device capabilities like camera, etc. More at https://developers.google.com/web/progressive-web-apps

How e-Commerce is benefited

As per a case study: Lancome rebuilt their website as PWA after seeing an increase in abandoned carts and loss in user traffic. After PWA result was:

The full case study at Lancôme rebuilds their mobile website as a PWA

Prerequisite

Cartridge Download

  1. Get the latest version from Releases

  2. :star: Star the repo :stuck_out_tongue_winking_eye:

Steps to add PWA support

  1. add “plugin_sf_pwa “ cartridge to the site path

    Administration > Manage Sites > [Your Site ] > Settings > Cartridges

  2. Change yourSiteId folder name in meta folder to your site id name and import metadata

  3. Include pwa/register template in head tag of your site e.g: htmlHead.isml 
     <isinclude template="pwa/register"/>
  4. [Optional] Add new property file named pwa.properties to your site cartridge to update manifest.json file with your site name, theme, icons and To updated offline fallback page for your site.

Generating and adding PWA icons

  1. We will be generating our PWA icons using tool “pwa-asset-generator” so let’s install it first 
     npm install --global pwa-asset-generator
  2. Now let’s generate icons in the “icons” folder: for better experience make sure your logo file is png or svg. 
      pwa-asset-generator [Your logo file] icons --opaque false
  3. Now copy generated icons folder to “[Your site Cartridge]/static/default/images/”

Features

  1. Extend Manifest

    Feeling adventurous? Want to add more cool functionalities to your PWA?

    • To add more configurations to your manifest.json:
      1. In your site cartridge’s pwa.properties file add the line 
         pwa.app.manifest.extended=true
      2. Create file manifest_extended.isml under pwa folder in templates of your site cartridge

  2. Handling default app install behaviour

    From version v1.3 you can prevent default mini-infobar from appearing by using

     pwa.app.preventadd2hs=true

    If you decide to use above property, be sure to provide some indication to the user that your Progressive Web App is installable.

  3. window.add2hs to rescue

    From version v1.3 window object will have event add2hs which can be used to prompt user to install PWA using window.add2hs.prompt(). You can setup some button or banner to indicate user that your PWA is installable on click of which you can trigger window.add2hs.prompt() to prompt user to install PWA.

For support and feedback:

Contact at Linkedin:

Vishal Sanserwal