https://github.com/fifciu/vsf-browser-update
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.
https://github.com/fifciu/vsf-browser-update
module pwa vsf vuestorefront
Last synced: 11 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/fifciu/vsf-browser-update
- Owner: Fifciu
- License: mit
- Created: 2020-09-05T09:20:51.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-06T10:06:32.000Z (almost 6 years ago)
- Last Synced: 2025-03-17T03:14:04.611Z (about 1 year ago)
- Topics: module, pwa, vsf, vuestorefront
- Language: TypeScript
- Homepage:
- Size: 7.81 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Storefront Browser Update
PWA Module
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:
```sh
# 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;
```
2. Import & register module in `src/modules/client.ts`:
```ts
import { BrowserUpdateModule } from './vsf-browser-update';
// ...
export function registerClientModules () {
// ...
registerModule(BrowserUpdateModule)
// ...
}
```
3. In your `config/local.json` add:
```js
"browserUpdate": {
"enabled": true
}
```
4. 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:
```js
"browserUpdate": {
"enabled": true,
"configuration": {
// Your config
}
}
```
[List of attributes can be found there](http://browser-update.org/customize.html)
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:
```ts
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`.
```ts
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.