Skip to content

Vue Storefront 1.11+ PWA Module that wraps Browser Update npm's package. It allows us to use all configuration options from the original package.

License

Notifications You must be signed in to change notification settings

Fifciu/vsf-browser-update

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Storefront Browser Update

PWA Module Preview

It is wrapper for: https://github.com/browser-update/browser-update

Requirements

  • Vue Storefront 1.11+

How to install

  1. Clone repository to src/modules of your PWA with SSH or HTTPS:
# With SSH
git clone git@github.com:Fifciu/vsf-browser-update.git src/modules/vsf-browser-update;
# With HTTPS
git clone https://github.com/Fifciu/vsf-browser-update.git src/modules/vsf-browser-update;
  1. Import & register module in src/modules/client.ts:
import { BrowserUpdateModule } from './vsf-browser-update';

// ...
export function registerClientModules () {
  // ...
  registerModule(BrowserUpdateModule)
  // ...
}
  1. In your config/local.json add:
"browserUpdate": {
    "enabled": true
}
  1. That's all. To test if everything went well - run app with yarn dev and append to the end of url #test-bu phrase. It will force popup to show.

How to customize

In your config/local.json you can use configuration option:

"browserUpdate": {
    "enabled": true,
    "configuration": {
        // Your config
    }
}

List of attributes can be found there

As configuration is inside JSON, it does not support these attributes:

  • container
  • onshow
  • onclick
  • onclose

To modify them you have to use module's config inside src/modules/client.ts, e.g:

registerModule(BrowserUpdateModule, {
    onshow (infos) {
        console.log('Just shown', infos)
    },
    onclick (infos) {
        console.log('Just clicked "Update browser"', infos)
    },
    onclose (infos) {
        console.log('Just clicked "Ignore"', infos)
    }
})

For container, you should use function which returns DOMElement. I make sure it will be executed only client-side, so you can easily use window.

registerModule(BrowserUpdateModule, {
    container () {
        return window.document.body;
    }
})

Caution: configuration inside client.ts has bigger power than one inside local.json so it is possible to overwrite options. However, keep in mind it is only about Browser Update config, you cannot disable module by option in client.ts.

If you want to customize CSS - just use #buorg identifier. It is easier to use it because when you use .buorg class it will have same power as default ones and default ones will overwrite it. It is also important to do not use scoped stylings for that purpose.

About

Vue Storefront 1.11+ PWA Module that wraps Browser Update npm's package. It allows us to use all configuration options from the original package.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published