CodeCoupler Application Basics Service Worker Loader Vue 🔒

What is this?

This Vue component uses @codecoupler-pro/app-service-worker to display an icon indicating the status of the service worker. Four different icons are displayed depending on the status: Loading, OK, Error, and Update Available.

If an update is available, a pop-up will appear below the button to alert the user to install it.

Clicking the icon displays a dropdown menu that offers the user the following options depending on the status: Check for updates, Install update, Reload page (in case of an error).

In addition, the current version number of the service worker is displayed, as well as an error message if an error occurs.

The component uses bootstrap in combination with @popperjs/core to display the dropdown and the popup.

Setup

Install Bundle:

npm i vue bootstrap @popperjs/core @codecoupler-pro/ui-bundle

Define Aliases, Externals and Assets:

{
  module: "vue",
  global: "Vue",
  entries: ["dist/vue.runtime.global.prod.js"]
},
{
  module: "@popperjs/core",
  global: "Popper",
  entries: ["dist/umd/popper.min.js"]
},
{
  module: "bootstrap",
  global: "bootstrap",
  entries: ["dist/css/bootstrap.min.css", "dist/js/bootstrap.min.js"]
},
{
  module: "@codecoupler-pro/app-service-worker-vue",
  global: ["codecoupler", "app", "serviceWorkerVue"]
},
{
  module: "@codecoupler-pro/ui-bundle",
  global: ["codecoupler", "ui", "bundle"],
  entries: ["dist/codecoupler-pro-ui-bundle.js"]
}

Basic Usage

Use it with JavaScript:

import { ServiceWorkerVue } from "@codecoupler-pro/app-service-worker-vue";
import { ServiceWorkerLoader } from "@codecoupler-pro/app-service-worker";
import { createApp } from "vue";

let vueApp = createApp(ServiceWorkerVue, {
  swLoader: new ServiceWorkerLoader(),
  /* optional additional props */
});
vueApp.mount(element);

Use it as a CodeCoupler Costa Component:

import { ServiceWorkerVue } from "@codecoupler-pro/app-service-worker-vue";
import { ServiceWorkerLoader } from "@codecoupler-pro/app-service-worker";

await this.getStage("stage-id").load({
  component: Vue,
  options: {
    vue: ServiceWorkerVue,
    props: {
      swLoader: new ServiceWorkerLoader(),
      /* optional additional props */
    }
  }
});

Use it as Vue component:

<template>
  <ServiceWorkerVue :swLoader="swLoader"></ServiceWorkerVue>
</template>
<script>
import { ServiceWorkerVue } from "@codecoupler-pro/app-service-worker-vue";
import { ServiceWorkerLoader } from "@codecoupler-pro/app-service-worker";

export default {
  components: { ServiceWorkerVue },
  data: function() {
    return {
      swLoader: new ServiceWorkerLoader();
    }
  },
}
</script>

Icons

All standard icons are defined as SVG. They have no background, width and height are set to 1em and all shapes use the current text color (fill or stroke attributes are set to "currentColor"). For custom SVG icons, it is recommended that you follow this principle as well.

You can override the default icons using the property iconsComponent. Create a Vue file with multiple svg icons and tag them with v-if like shown below. Place them all in one span element. Define then one prop icon:

<template>
  <span>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
  </span>
</template>
<script setup>
defineProps({ icon: { type: String, default: "" } });
</script>

Import this file and use this as prop:

import iconsComponentCustom from "icons-component-custom.vue"
import { ServiceWorkerVue } from "@codecoupler-pro/app-service-worker-vue";
import { ServiceWorkerLoader } from "@codecoupler-pro/app-service-worker";
import { createApp } from "vue";

let vueApp = createApp(ServiceWorkerVue, {
  swLoader: new ServiceWorkerLoader(),
  iconsComponent: iconsComponentCustom
});
vueApp.mount(element);

The following icon identifiers can be used:

• error
• loading
• ok
• update
• reload
• lookup
• update-now

Styling

CSS Classes

The internal HTML structure can be accessed as follows:

& span.icon {
  & svg {}
}

You can select a specific icon by adding the identifier: "& span.icon.identifier {}". Possible identifiers can be found in the above section.

& span.icon.identifier {
  & svg {}
}

Dropdown Menu and Items

The dropdown menu will be rendered into the body of the document. For this reason, in addition to the dropdown-menu class, you can assign an additional class to the dropdown using the dropdownClasses prop to target it more precisely.

Use this class in conjunction with the dropdown-menu class to access the inner HTML elements. Otherwise, Bootstrap's predefined styles may override yours if the Bootstrap stylesheet is loaded after your own:

.your-class.dropdown-menu {
  /* For more styling options, see below */
}

Each entry in the dropdown menu has the class dropdown-item. In addition, an extra class specifies the type of content, which contains specific inner elements.

Dropdown item with an icon and text:

& a.dropdown-item {
  & span.icon {
    & svg {}
  }
  & span.text {}
}

You can select a specific dropdown menu item with an icon and text by adding the identifier: & a.dropdown-item.identifier {}. Possible identifiers:

• loading
• lookup
• update-now
• reload

Dropdown item with error message:

& div.dropdown-item.error {
  & p {}
  & code {}
}

Dropdown item with version information:

& div.dropdown-item.version {}

Popover

The popovers will be rendered into the body of the document. For this reason, in addition to the popover class, you can assign an additional class to the popovers using the popoverClasses prop to target it more precisely.

Use this class in conjunction with the popover class to access the inner HTML elements. Otherwise, Bootstrap's predefined styles may override yours if the Bootstrap stylesheet is loaded after your own:

.your-class.popover {
  /* For more styling options, see below */
}

Popovers contains specific inner elements.

Header:

& .popover-header {}

Body:

& .popover-body {}

Customizing using Bootstrap variables (example):

& {
  --bs-popover-arrow-border: var(--bs-green);
  --bs-popover-bg: var(--bs-green);
  --bs-popover-body-color: var(--bs-white);
}

Colorizing arrow depending on placement using plain CSS:

&[data-popper-placement^="bottom"] > .popover-arrow::after,
&[data-popper-placement^="bottom"] > .popover-arrow::before {
  border-bottom-color: #your-color-here;
}

&[data-popper-placement^="left"] > .popover-arrow::after,
&[data-popper-placement^="left"] > .popover-arrow::before {
  border-left-color: #your-color-here;
}

&[data-popper-placement^="top"] > .popover-arrow::after,
&[data-popper-placement^="top"] > .popover-arrow::before {
  border-top-color: #your-color-here;
}

&[data-popper-placement^="right"] > .popover-arrow::after,
&[data-popper-placement^="right"] > .popover-arrow::before {
  border-right-color: #your-color-here;
}

Reference

The following props can be passed:

swLoader: Object

ServiceWorkerLoader instance.

dropdownClasses: String

Additional class names for dropdown menu element. The specified classes will be set via the setClass function from the @codecoupler/dom-bundle package. You can provide one or more class names as a string of space-separated values or as an array of strings. See above.

popoverClasses: String

Additional class names for dropdown menu element. The popup will be rendered into the body of the document. For this reason, in addition to the popup class, you can assign an additional class to the popup using the popoverClasses prop to target it more precisely.

iconsComponent: Vue

Overrides the default icons. See above.

texts: Object

Redefine all texts here:

{
  lookupSearch: "Look for Updates",
  lookupUpdateFound: "Update Found",
  lookupNoUpdateFound: "No Update Found",
  lookupError: "An Error Occured",
  updateNow: "Update to new version",
  updateAvailable: "Update Available!",
  error: "Cannot Load Service Worker. Cause:",
  reload: "Reload Page",
  loading: "Loading"
}

showIcons: Object

To show the icons regardless of the current status you can pass the identifier as properties and the value true to this object. Example: { identifier1: true }.

swUpdateLocation: String and swUpdateLocationForced: String

History replacement in case of an service loader update or a forced service loader update. The default values are /#sw-update and /#sw-update-forced.

swDebugUpdateAvailable: Boolean

If true an available update is simulated. The update can be started, and the browser is forced to reload the ServiceWorker.