Add PWA Support to Your Site

Comments (0)

Views (300)

In order to apply PWA, you must have an SSL certificate, so your site must be https. Software language etc. No matter, you can bring PWA support by following the simple steps below.

Step 1 - manifest.json

First, create a file named manifest.json and write the following in it.

{
  "name": "phpexample.net",
  "short_name": "phpexample",
  "icons": [
    {
      "src": "/pwa/img/36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/pwa/img/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#1f1f1f",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}

Step 2 -<head> Codes

Let's call the manifest.json file we created in the <head> and add a few more tags for ipad, iphone support.

<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="prototurk.com">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="/pwa/img/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/pwa/img/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="/pwa/img/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/pwa/img/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" sizes="128x128" href="/pwa/img/128x128.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="/pwa/img/128x128.png">
<link rel="icon" sizes="192x192" href="/pwa/img/192x192.png">
<link rel="icon" sizes="128x128" href="/pwa/img/128x128.png">

Step 3 - service-worker

In fact, when you do the above steps, if you say "add to home screen" from mobile, you can see that it installs like an application with splash screen and icon.

However, we need to define a service worker so that the installation part appears at the top right on the web. Create a file named sw.js and write the following in it;

self.addEventListener('install', e => console.log('pwa installed.'));
self.addEventListener('fetch', event => {});

and call this file in <head>

<head>
    ..
    <script>
        if ('serviceWorker' in navigator) {
        	window.addEventListener('load', function () {
        		navigator.serviceWorker.register('/sw.js?v=3');
        	});
        }
    </script>
    ..
</head>

Yes, you can now see the loading part in the top right. Now let's see how to open it with a button.

Step 4 - Install App button

We can do this by listening for the beforeinstallprompt event under the window. For example, let's put a button and when this event comes, let's show that button and take action.

<button id="install-app" style="display: none">Install APP</button>
<script>
    const installButton = document.getElementById('install-app');
    let beforeInstallPromptEvent
    window.addEventListener("beforeinstallprompt", function(e) {
        e.preventDefault();
        beforeInstallPromptEvent = e
        installButton.style.display = 'block'
        installButton.addEventListener("click", function() {
            e.prompt();
        });
        installButton.hidden = false;
    });
    installButton.addEventListener("click", function() {
        beforeInstallPromptEvent.prompt();
    });
</script>

PWA related resources

https://web.dev/progressive-web-apps/
https://web.dev/app-like-pwas/
https://web.dev/add-manifest/
https://developer.mozilla.org/en-US/docs/Web/Manifest/orientation

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !

Add PWA Support to Your Site

Comments

Popular Articles

Popular Tags