CakePHP 4 Progressive Web Apps

Progressive Web Apps make app-like experiences in the browser. A progressive web application (PWA), sometimes known as a progressive web app, is a sort of web-based application software constructed utilising popular web technologies such as HTML, CSS, JavaScript, and WebAssembly. It is designed to run on any platform that supports a standards-compliant browser, including desktop and mobile devices. To create a PWA in CakePHP based web application, you need to create a web manifest (JSON) and service workers (sw.js).

Web Manifest

The web app manifest is a JSON file that informs browsers about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file contains the app name, the icons to be used, and the URL to be opened when the app is launched.

{
    "name": "CTPixel",
    "short_name": "CTPixel",
    "icons": [
        {
            "src": "/android-chrome-192x192.png?v=1",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-256x256.png?v=1",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone",
    "lang": "en-US",
    "start_url": "https://codethepixel.com/articles",
    "scope": "https://codethepixel.com/articles"
}

Service Workers

A service worker is a javascript script that provides the interception and management of network requests as well as asset caching from the web browser. Online developers may use service workers to generate consistently speedy web pages and offline experiences. It is a browser feature, but it does not have access to the DOM; its purpose is distinct from that of a standard JS script. Because service Workers may handle network requests, they can be quite powerful, especially if used maliciously by an attacker, allowing things like script injection or rewriting the entire site. This is why HTTPS is so vital in this case, as it prevents third-party scripts from being injected into your website.

const cacheName = 'v1::static';

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.addAll([
        '/',
      ]).then(() => self.skipWaiting());
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(cacheName).then(cache => {
      return cache.match(event.request).then(res => {
        return res || fetch(event.request)
      });
    })
  );
});

Link Manifest & Service Workers in Web Application Template

Link the manifest and service workers in your template <head> at .../templates/layout/default.php

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1">
<link rel="manifest" href="/site.webmanifest?v=1">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=1" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=1">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

That's all. Happy coding :)