An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Some of Our Sources
- Technology Review
- Simplebits
- Smashing Apps
- Vandelay Design
- Inspiredology
- FanExtra - PSD
- Noupe
- Fudge Graphics
- Freelance Switch
- Hashedout
Help Webnuz
Referal links:
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.
Original Link: https://dev.to/pandanoxes/release-03-part-2-internal-project-contribution-4e70
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To