How to configure Progressive Web App

PWA – Progressive Web Apps is a term, which is appearing more often since 2015, especially during Google Events. According to Google Web Talks – users are more likely to use the websites, instead of native apps. But what’s interesting, they spent twice more time in native apps than on the websites. As you may now, we've implemented Progressive Web Apps out of the box in GrandNode 4.50 and you are able to enable them easily even if you are not a developer.

Minimal PWA Checklist

• Store with SSL installed
• Icons of app in few dimensions
• Manifest file
• Service worker

First of all, we have to install SSL certificate in your store. You can purchase the SSL certificate and install it on your own or use our implement mechanism to install and configure Let’s Encrypt free ssl certificate. We’ve provided guide which covers this topic, you can read it here: https://grandnode.com/how-to-install-free-ssl-certificate Next step is to create icons of your app. It should be a square image with your logo. It will be used to replace the ugly, default icons from your device. You can use one of the ready to use websites, which gives possibility to generate many different favicons. For example https://realfavicongenerator.net/

Now let’s focus on the manifest.json file. It’s the core of your Progressive Web App. It will contain the most important information about your store. Below you can find the simplest manifest.json file and it’s available out of the box in the GrandNode:

{
    "name": "Grandnode Application",
    "short_name": "GrandNode",
    "description": "Open Source Cross Platform E-Commerce Solution based on .NET Core and MondoDB",
    "icons":
        [{
           "src": "content/images/icons/144x144.png",
           "sizes": "144x144",
           "type": "image/png"
        },
        {
           "src": "content/images/icons/512x512.png",
           "sizes": "512x512",
           "type": "image/png"
        },
        {
           "src": "content/images/icons/192x192.png",
           "sizes": "192x192",
           "type": "image/png"
        }],
    "display": "standalone",
    "start_url": "/",
    "background_color": "#fff",
    "theme_color": "#fff"
}

If you want to improve your manifest.json file, you should check the article coming from MDN. It perfectly describes each possible parameter - https://developer.mozilla.org/pl/docs/Mozilla/Add-ons/WebExtensions/manifest.json Ready to use manifest.json file should be placed in the wwwroot directory. 

The most important thing, when we are talking about PWA is a fact that it allows to use your store offline. To provide that functionality, we need to choose the proper caching strategy. In GrandNode Progressive Web App we have five possibilities. According to the official documentation of the library, we can use following strategies:

CacheFirst

This strategy will add all requested resources to the service worker cache and serve it from the cache every time. If the cache doesn't have the requested resource it will fall back to the network and if that succeeds it will put the response in the cache. In e-commerce it may results in many problems.

CacheFirstSafe

This strategy, like CacheFirst, will add all requested resources to the service worker cache. Unlike CacheFirst, it has special handling for HTML files and fingerprinted resources (resources with a v querystring parameter such as site.css?v=8udsfsaufd09sud0809sd_ds).

It will always attempt the network for HTML files (content type text/html) and fall back to the cache when the user is offline. That way the user always gets the latest from the live Internet when online. For fingerprinted resources (the ones with a v querystring parameter) it will always try the cache first and fall back to the network.

CacheFingerprinted

This strategy only adds fingerprinted resources (resources with a v querystring parameter such as `site.css?v=8udsfsaufd09sud0809sd_ds) to the cache. It will always try the cache for fingerprinted resources, then fall back to the network. For all other resources, it will use the network. This strategy is useful for scenarios in which you don't wish to cache certain resources -- large video or audio files, for example -- but still wish to cache the app core assets (HTML, CSS, JS).

Minimal (in GrandNode default)

The minimal strategy does nothing and is good for when you only want a service worker in order for browsers to suggest installing your Progressive Web App. For this to work, you need to add a web manifest file.

NetworkFirst

This strategy will always try the network first for all resources and then fall back to the cache when offline. When the network call succeeds, it will put the response in the cache. This strategy is completely safe to use and is primarily useful for offline-only scenarios since it isn't giving any performance benefits. For me it's the most safe strategy in e-commerce progressive web apps scenarios.

How to enable Progressive Web App in GrandNode

First of all, prepare the icons and upload them to wwwroot/content/images/icons directory. This directory is used in manifest.json file.

The whole process is very simple. Now it's time to enable PWA in appsettings.json file. You need to change the false value to true and choose the caching strategy. By default we recommend to use the Minimal caching.