https://www.pi.co.za/scripts/iosPWASplash.js

1function iosPWASplash(icon, color = 'white') {
2    // Check if the provided 'icon' is a valid URL
3    if (typeof icon !== 'string' || icon.length === 0) {
4        throw new Error('Invalid icon URL provided');
5    }
6
7    // Calculate the device's width and height
8    const deviceWidth = screen.width;
9    const deviceHeight = screen.height;
10    // Calculate the pixel ratio
11    const pixelRatio = window.devicePixelRatio || 1;
12    // Create two canvases and get their contexts to draw landscape and portrait splash screens.
13    const canvas = document.createElement('canvas');
14    const canvas2 = document.createElement('canvas');
15    const ctx = canvas.getContext('2d');
16    const ctx2 = canvas2.getContext('2d');
17
18    // Create an image element for the icon
19    const iconImage = new Image();
20
21    iconImage.onerror = function () {
22        throw new Error('Failed to load icon image');
23    };
24
25    iconImage.src = icon;
26
27    // Load the icon image, make sure it is served from the same domain (ideal size 512pxX512px).
28    // If not then set the proper CORS headers on the image and uncomment the next line.
29    // iconImage.crossOrigin="anonymous"
30    iconImage.onload = function () {
31        // Calculate the icon size based on the device's pixel ratio
32        const iconSizew = 188 * pixelRatio;
33        const iconSizeh = 86 * pixelRatio;
34
35        canvas.width = deviceWidth * pixelRatio;
36        canvas2.height = canvas.width;
37        canvas.height = deviceHeight * pixelRatio;
38        canvas2.width = canvas.height;
39        ctx.fillStyle = color;
40        ctx2.fillStyle = color;
41        ctx.fillRect(0, 0, canvas.width, canvas.height);
42        ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
43
44        // Calculate the position to center the icon
45        const x = (canvas.width - iconSizew) / 2;
46        const y = (canvas.height - iconSizeh) / 2;
47        const x2 = (canvas2.width - iconSizew) / 2;
48        const y2 = (canvas2.height - iconSizeh) / 2;
49        // Draw the icon with the calculated size
50        ctx.drawImage(iconImage, x, y, iconSizew, iconSizeh);
51        ctx2.drawImage(iconImage, x2, y2, iconSizew, iconSizeh);
52        const imageDataURL = canvas.toDataURL('image/png');
53        const imageDataURL2 = canvas2.toDataURL('image/png');
54
55        // Create the first startup image <link> tag (splash screen)
56
57        const appleTouchStartupImageLink = document.createElement('link');
58        appleTouchStartupImageLink.setAttribute('rel', 'apple-touch-startup-image');
59        appleTouchStartupImageLink.setAttribute('media', 'screen and (orientation: portrait)');
60        appleTouchStartupImageLink.setAttribute('href', imageDataURL);
61        document.head.appendChild(appleTouchStartupImageLink);
62
63        // Create the second startup image <link> tag (splash screen)
64
65        const appleTouchStartupImageLink2 = document.createElement('link');
66        appleTouchStartupImageLink2.setAttribute('rel', 'apple-touch-startup-image');
67        appleTouchStartupImageLink2.setAttribute('media', 'screen and (orientation: landscape)');
68        appleTouchStartupImageLink2.setAttribute('href', imageDataURL2);
69        document.head.appendChild(appleTouchStartupImageLink2);
70    };
71}
72
73window.iosPWASplash = iosPWASplash;