Android/ IOS Application

After this article read about:

Push notification

Introduction:

The website can be exported to the home screen of your smartphone – the exported page will behave like a regular application. This is more convenient than remembering links to websites in bookmarks in the browser.

Applications created in this way are called Progressive Web App (PWA)

Emerging links (eg scanned by a QR code, it is best to open in a Chrome browser on a smartphone (preferably supports PWA notifications and applications))

The icons to be exported are located in the bar of the website.

 

after clicking, we will receive a screen with a QR code and a link that should be opened in the browser on the smarhphonie (necessarily in chrome for android and safari for IOS). The installation instructions are located above the QR code

If the page has never been exported, a button will appear asking you to create the necessary files

Links for Android and IOS are the same and the delimitation of IOS and android only serves to display the appropriate installation steps.

If the android does not show a message for the installation – Wait for a while and reload the page (one of Google requirements is that the user should already be in the domain of a minimum of 30s)

What happens during installation.

The following files will be added to the files of the website:

  • manifest.json – where are the application settings more here
  • icon512.png icon and icon192.png which can be replaced with your files – only icon192 icon is used for IOS
  • sw.js – this is an android requirement, that the service workers will be added with a minimal configuration more here

File installApp.html

This is a copy of index.html differences:

  • added<link rel="manifest" href="/wp/~394979_7Q0vzpRhHI55/6/manifest.json"> under<head> that’s why the head is required to be on the site
  • added<link rel="manifest" href="/wp/~394979_7Q0vzpRhHI55/6/manifest.json"> under manifest – information for IOS about the icon
  • <script>
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
    }
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
    // Stash the event so it can be triggered later.
    deferredPrompt = e;
    });
    </script> It shows information about the possibility of installing applications and loads serviceWorkers

Information

Of course all changes made in files will be visible in application (after reload)

Article about sending push notifications to your application

Read more:

Push notification