3 Web App Technologies to Impress Clients — with minimum setting examples

PWA

Did you know you can install a web app with a native app feeling? Yes.

It can be simply implemented with a few lines of code. As an example have a look at bmw.com.

PWA can be downloaded from a browser download icon directly

Implementation:

1. Create an offline.html .
2. In your index.html add this line at the bottom before the closing tag of body .

...
<script>
      if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register('/sw.js').then(function (reg) {
          console.log('Service worker has been registered for scope: ' + reg.scope)
        })
      }
    </script>
</body>

3. This simple sw.js file will not cache if the file or path is not added to cache.addAll([...]) function.

self.addEventListener('install', (evt) => {
  self.skipWaiting()
  evt.waitUntil(
    caches
      .open('cache-v1')
      .then((cache) => cache.addAll(['/', '/manifest.json', '/offline.html']))
      .catch((err) => console.error(err)),
  )
})

self.addEventListener('activate', (evt) => self.clients.claim())

self.addEventListener('fetch', (evt) => {
  return evt.respondWith(fetch(evt.request).catch(() => caches.match(evt.request)))
})

4. The minimum setting for manifest.json is as follows.

{
  "name": "AppName",
  "short_name": "App name",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#932041",
  "background_color":"#ffffff",
  "icons": [
    {
      "src": "logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }]
}

5. Tag your manifest in index.html

<link rel="manifest" href="/manifest.webmanifest">

Use dev tools to watch and manage your service worker and cache.

Note: Besides localhost, you will need https for PWA to work.

Push notification

There is a package that will help to understand the minimum and most effective setup for push notifications:

GitHub - Nagibaba/push-notification-test: push-notification-test is the simplest and most effective…

1. npm i
2. serve to start the frontend server
3. Push notifications can be triggered as soon as we subscribe, take the JSON value and add it to pushSubscription variable inside webpush.js We then use this value to push the notification to the user exclusively. Run node webpush.js

Copy this text after clicking `subscribe`

Paste it here

Skeleton Loader

Ugly loading screens are forced no more.

There are so many packages for that. I prefer https://skeletonreact.com/ which uses SVGs and my setup is as follows

1. Create a component that suits you best using skeletonreact.com and set props.

import React from 'react'
import ContentLoader from 'react-content-loader'
import { colors, SPEED } from 'app/common/constants'

export const SimpleRect = ({ width = 100, height = 100, ...rest }) => (
  <ContentLoader
    speed={SPEED}
    width={width}
    height={height}
    viewBox={`0 0 ${width} ${height}`}
    backgroundColor={colors.background}
    foregroundColor={colors.foreground}
    {...rest}
  >
    <rect x='0' y='0' rx='0' ry='0' width={width} height={height} />
  </ContentLoader>
)

2. Create a bridge between your SVGs and components.

export const Skeleton = ({ is = 'rect', ...rest }) => {
  switch (is) {
    case 'rect':
      return <SimpleRect {...rest} />
    case 'circle':
      return <SimpleCircle {...rest} />
    case 'image':
      return <ImageLoader width={24} {...rest} />
      // You can use skeletonreact.com to create those components
}

export const SkeletonWrap = ({
  loading,
  children,
  marginTop = 0,
  marginRight = 0,
  marginBottom = 0,
  marginLeft = 0,
  ...rest
}) => {
  if (loading)
    return (
      <div style={{ marginTop, marginRight, marginBottom, marginLeft }}>
        <Skeleton {...rest} />
      </div>
    )
  return children
}

You can either use Skeleton as isLoading ? <Skeleton is="image"> : <img />or wrap your current component with :

<SkeletonWrap loading={isLoading} is="image" width={200} height={28} className='myClass'>
  <img src="" />
</SkeletonWrap>