Release 0.3 - Part 2 Internal Project Contribution

For release 0.3, I worked on IPC144 as my internal project contribution. The issue is Add Progressive Web App (PWA) support.

Process

I started to install PWA plugin, but Docusaurus, I had some version not matching issue. It turns out that the current project is using an older version of Docusaurus (2.0.0-beta.2). The PWA plugin version has to match the version of Docusaurus to work.

I created another pull request for upgrading Docusaurus to version (2.0.0-beta.8). After the pull request got merged, I can start working on the PWA feature.

To implement PWA, we first need an icon for 192x192 and 512x512. After that, we need to create a manifest.json to add all the settings for PWA.

{
    "theme_color": "#DA291C",
    "background_color": "#FFFFFF",
    "display": "standalone",
    "scope": "./",
    "start_url": "./",
    "name": "IPC144 - Course Notes",
    "short_name": "IPC144",
    "description": "IPC144 course notes",
    "icons": [
        {
            "src": "img/pwa/manifest-icon-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "img/pwa/manifest-icon-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ]
}

After that we add some more config in docusaurus.config.js.

    plugins: [
        [
            '@docusaurus/plugin-pwa',
            {
                offlineModeActivationStrategies: ['standalone', 'queryString'],
                pwaHead: [
                    {
                        tagName: 'link',
                        rel: 'icon',
                        href: 'img/pwa/manifest-icon-512.png',
                    },
                    {
                        tagName: 'link',
                        rel: 'manifest',
                        href: '/manifest.json',
                    },
                    {
                        tagName: 'meta',
                        name: 'theme-color',
                        content: '#DA291C',
                    },
                    {
                        tagName: 'meta',
                        name: 'apple-mobile-web-app-capable',
                        content: 'yes',
                    },
                    {
                        tagName: 'meta',
                        name: 'apple-mobile-web-app-status-bar-style',
                        content: '#DA291C',
                    },
                    {
                        tagName: 'link',
                        rel: 'apple-touch-icon',
                        href: 'img/pwa/manifest-icon-192.png',
                    },
                    {
                        tagName: 'link',
                        rel: 'mask-icon',
                        href: 'img/pwa/manifest-icon-512.png',
                        color: '#DA291C',
                    },
                    {
                        tagName: 'meta',
                        name: 'msapplication-TileImage',
                        content: 'img/pwa/manifest-icon-512.png',
                    },
                    {
                        tagName: 'meta',
                        name: 'msapplication-TileColor',
                        content: '#DA291C',
                    },
                ],
            },
        ],
    ],

After that PWA is set up.

Blog

Release 0.3 - Part 2 Internal Project Contribution

Kevan Y

Process

Join Our Newsletter. No Spam, Only the good stuff.

Related