pwa-helpers

PWA utility library. This library provides some function to help you get started in pwa creation. Visit demo page here. No external dependencies

Installation

npm i @donskelle/pwa-helpers

Manifest

Lookup manifest properties here or use this generator. Be aware that manifest specification is not stable. So you should look it up here and subscribe to changes, when you wanna use it in production.

Some examples of manifest:

• Tinder manifest.json
• Starbucks manifest.json
• About You manifest.json
• Spotify https://open.spotify.com/ Manifest is hashed so lookup by inspecting network tab

iOS still doens't support all fields of it manifest. You need set additional meta tags in head. Look them up here: https://firt.dev/notes/pwa-ios/#apple-non-standard-pwa-related-abilities

Service Worker

Your service worker should be generated, if you want offline support or generally cache things. To generate a service worker goto workbox or lookup a library based solution (e.g. create-react-app, vue-cli). They will use workbox under the hood as well but hide some configuration.

Example

import { idleFramePromise } from '@donskelle/pwa-helpers';

const initNotBlockingMaintreadTask = async () => {
  heavyWork1();
  await idleFramePromise();
  heavyWork2();
  await idleFramePromise();
  heavyWork3();
};

React Hoooooks

import { useEffect } from 'react';
import { preventLeavingPWAScope } from '@donskelle/pwa-helpers';

function preventLeavingPWAScope(ref) {
  useEffect(() => {
    if (!ref.current) return;

    return preventLeavingPWAScope(ref.current, 'tinder.com/app');
  }, [ref]);
}

Vue

import { ref, watch } from 'vue';
import { preventLeavingPWAScope } from '@donskelle/pwa-helpers';

function preventLeavingPWAScope(target: ref<HtmlElement | undefined>) {
  let unSubscribeFunction = ref<() => void>();

  onMounted(() => {
    unSubscribeFunction.value = preventLeavingPWAScope(target.value);
  });

  onUnmounted(() => unSubscribeFunction.value?.());
}