7

Release 0.3 - Part 2 Internal Project Contribution

 3 years ago
source link: https://dev.to/pandanoxes/release-03-part-2-internal-project-contribution-4e70
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Kevan Y

Posted on Nov 18

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"
        }
    ]
}
Enter fullscreen modeExit fullscreen mode

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',
                    },
                ],
            },
        ],
    ],
Enter fullscreen modeExit fullscreen mode

After that PWA is set up.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK