Top Left Text cha

Website Development Services

Intro

A Progressive Web App (will be called PWA from now on) is, in simple terms, a way that you can make your website feel and look like an app without having to actually build an app.  Currently it supports 'Add to Home' and notifications.  I'll start with Add to Home functionality.

Add to Home Button

The add to home functionality has some benefits such as:
  • Works offline or when the device isn't connected to the internet.
  • Works on every browser and every device.
  • Loads much faster since much of the design is stored locally.  Instantly in most cases.
  • Looks and feels like an app.
  • More secure, using https only to prevent snooping.

Implementing
You'll need to generate multiple images (favicons) in different sizes.  A great tool for that is realfavicongenerator.net.
Also, to simplify things, here's a javascript library that will need to be added to your site: UpUp.js library

realfavicongenerator.net will not only generate the icons needed, but also will create your manifest.json file.  All images and the manifest file are easier to implement, many sources say, by putting them in your home folder.

So there are a few parts that are needed for a PWA to function. You'll need the extra icons and a manifest file, mentioned previously. Then you'll need your service worker file, which you can get from using UpUp (it will generate the service worker file and another javascript file that registers and loads it).

[code & further instructions to come]
  • Karen submitted this comment via email... thanks for the info, Karen!

    While realfavicongenerator.net does a good job, it doesn’t let you download various sizes for different platforms at the same time.
    After some exploring I found this other tool and I wanted to suggest you show it along that one.
    https://www.websiteplanet.com/webtools/favicon-generator/
    this tool allows you to create favicons from pictures that are up to 5 MB from either JPG, PNG or GIF or even from a gallery. It also lets you generate favicons for different screen sizes and resolutions at the same time.

Leave your comments

Post comment as a guest

0
Your comments are subjected to administrator's moderation.
X