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.
Top comments (0)