Skip to Main Content

Overview

Service workers is a foundational technology for PWAs. Service workers react to incoming requests from web apps, allowing a web app to be designed for offline, receiving push notification and much more. Service workers can execute JavaScript code even when the app is not in use.

Default

When PWA is enabled for an APEX application, the a default service worker is generated with the following strategy:

  • Install and activate the service worker
  • Serve resources from cache if cache exists
  • Otherwise serve from network, then put resource in cache
  • Serve an offline page if network fails

Hooks

The service worker can be modified through hooks or by replacing events completely. By tapping into service worker hooks, developers are able to extend their APEX application to support advanced PWA features such as offline or push notifications, that are not yet offered declaratively in APEX.

Developers can hook into service worker events to add their own JavaScript code.

  • Function and Variable Declaration
  • Event: install
  • Event: activate
  • Event: fetch
  • Event: sync
  • Event: push
  • Event: notificationclick
  • Event: notificationclose
  • Event: canmakepayment
  • Event: paymentrequest

Go to the PWA attributes page in the APEX Builder to read more about how to leverage service worker hooks.

File URL

Alternatively, service worker hooks can be shared across multiple applications by providing a URL reference to a file that contains the service worker hooks interface. If using the file reference, make sure to follow the interface architecture appropriately or else the service worker will fail at runtime.

Service Worker Interface

const swHooks = { FUNCTION_VARIABLE_DECLARATION: ({ apex }) => { console.log(1, { apex }); }, EVENT_INSTALL: ({ apex, event }) => { console.log(2, { apex, event }); }, EVENT_INSTALL_BEFORE: ({ apex, event }) => { console.log(3, { apex, event }); }, EVENT_INSTALL_AFTER: ({ apex, event }) => { console.log(4, { apex, event }); }, EVENT_ACTIVATE: ({ apex, event }) => { console.log(5, { apex, event }); }, EVENT_ACTIVATE_BEFORE: ({ apex, event }) => { console.log(6, { apex, event }); }, EVENT_ACTIVATE_AFTER: ({ apex, event }) => { console.log(7, { apex, event }); }, EVENT_FETCH: ({ apex, event }) => { console.log(8, { apex, event }); }, EVENT_FETCH_BEFORE: ({ apex, event }) => { console.log(9, { apex, event }); }, EVENT_FETCH_CACHE_DEFINITION: ({ apex, event, cacheName }) => { console.log(10, { apex, event, cacheName }); }, EVENT_FETCH_CACHE_RESPONSE: ({ apex, event, cache, response }) => { console.log(11, { apex, event, cache, response }); }, EVENT_FETCH_NETWORK_RESP_SUC: ({ apex, event, response }) => { console.log(12, { apex, event, response }); }, EVENT_FETCH_NETWORK_RESP_ERR: ({ apex, event, error }) => { console.log(13, { apex, event, error }); }, EVENT_FETCH_OFFLINE_PAGE: ({ apex, event, offlinePage }) => { console.log(14, { apex, event, offlinePage }); }, EVENT_FETCH_NETWORK_FALLBACK: ({ apex, event }) => { console.log(15, { apex, event }); }, EVENT_SYNC: ({ apex, event }) => { console.log(16, { apex, event }); }, EVENT_PUSH: ({ apex, event }) => { console.log(17, { apex, event }); }, EVENT_NOTIFICATIONCLICK: ({ apex, event }) => { console.log(18, { apex, event }); }, EVENT_NOTIFICATIONCLOSE: ({ apex, event }) => { console.log(19, { apex, event }); }, EVENT_CANMAKEPAYMENT: ({ apex, event }) => { console.log(20, { apex, event }); }, EVENT_PAYMENTREQUEST: ({ apex, event }) => { console.log(21, { apex, event }); }, };