@donskelle/pwa-helpers v0.6.1

pwa-helpers

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

Installation

npm i @donskelle/pwa-helpers

Requirements

• Only support es module
• Your Web App need to meet the pwa critera.
  • Create Manifest
  • Create and init service worker
  • Lookup minimal requirements in demo folder

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
• Alibaba https://www.alibaba.com/ Manifest is a/b tested. Lookup in network tab

Ios doens't support that file. You need set additional meta tags in head.

Service Worker

Your service worker should be generated.

This is because during build a hash of a all installed files get created and used to detect file changes. The service worker gets updated on every page visit but if the service worker wouldn't contain hashes, changes to other installed files wouldn't be detected. To generate a service worker goto workbox or lookup a libary 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 initFunctionBlockingMaintread = async () => {
  heavyWork1();
  await idleFramePromise();
  heavyWork2();
  await idleFramePromise();
  heavyWork3();
};

React Hoooooks

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

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

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

Vue

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

function usePreventAnchorLeavingScopeClick(target) {
  let unSubscribeFunction = ref();

  onMounted(() => {
    unSubscribeFunction = target.value.addEventListener(type, listener, options);
  });

  onUnmounted(() => {
    if (unSubscribeFunction.value) unSubscribeFunction();
  });
}