Skip to Content
Menu

pwa()

Handles event listeners related to installing the service worker as a Progressive Web App to the user’s device.

JavaScript February 8, 2021

Usage

JavaScript
nebula.pwa()

Parameters

This function does not accept any parameters. Is this incorrect?

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /assets/js/modules/optimization.js on line 302.

    No Hooks

    This function does not have any filters or actions available. Request one?
    JavaScript
    nebula.pwa = function(){
        let installPromptEvent; //Scope it to this level
    
        //Listen for ability to show SW install prompt
        window.addEventListener('beforeinstallprompt', function(event){
            event.preventDefault(); //Prevent Chrome <= 67 from automatically showing the prompt
            installPromptEvent = event; //Stash the event so it can be triggered later.
            jQuery('.nebula-sw-install-button').removeClass('inactive').addClass('ready'); //Show the Nebula install button if it is present.
        });
    
        //Trigger the SW install prompt and handle user choice
        nebula.dom.document.on('click', '.nebula-sw-install-button', function(){
            if ( typeof installPromptEvent !== 'undefined' ){ //If the install event has been stashed for manual trigger
                jQuery('.nebula-sw-install-button').removeClass('ready').addClass('prompted');
    
                installPromptEvent.prompt(); //Show the modal add to home screen dialog
    
                let thisEvent = {
                    event_name: 'pwa_install',
                    event_category: 'Progressive Web App',
                    event_action: 'Install Prompt Shown',
                    event_label: 'The PWA install prompt was shown to the user',
                };
    
                nebula.dom.document.trigger('nebula_event', thisEvent);
                gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
    
                //Wait for the user to respond to the prompt
                installPromptEvent.userChoice.then(function(result){
                    jQuery('.nebula-sw-install-button').removeClass('prompted').addClass('ready');
    
                    let thisEvent = {
                        event_name: 'pwa_install',
                        event_category: 'Progressive Web App',
                        event_action: 'Install Prompt User Choice',
                        result: result,
                        outcome: result.outcome,
                    };
    
                    nebula.dom.document.trigger('nebula_event', thisEvent);
                    gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
                    nebula.crm('event', 'Install Prompt ' + thisEvent.outcome);
                });
            } else {
                jQuery('.nebula-sw-install-button').removeClass('ready').addClass('inactive');
            }
    
            return false;
        });
    
        //PWA installed to the device
        window.addEventListener('appinstalled', function(){
            jQuery('.nebula-sw-install-button').removeClass('ready').addClass('success');
    
            let thisEvent = {
                event_name: 'pwa_install',
                event_category: 'Progressive Web App',
                event_action: 'App Installed',
                event_label: 'The PWA has been installed',
            };
    
            nebula.dom.document.trigger('nebula_event', thisEvent);
            gtag('event', thisEvent.event_name, nebula.gaEventObject(thisEvent));
        });
    };
    

    Override

    To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).

    JavaScript

    For non-module import functions:

    nebula.pwa = function(){
        //Write your own code here, leave it blank, or return false.
    }


    For dynamically imported module function overrides:

    jQuery(window).on('load', function(){
        nebula.pwa = function(){
            //Write your own code here, leave it blank, or return false.
        }
    });


    Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:

    jQuery(document).on('nebula_module_loaded', function(module){
        //Note that the module variable is also available to know which module specifically was imported
        if ( typeof nebula.pwa === 'function' ){
            nebula.pwa = function(){
                //Write your own code here, leave it blank, or return false.
            }
    	}
    });