PWA

I tried to integrate PWA features for this website.

Progressive Web Apps (PWAs) blend the best of web and native apps. They are websites built with web technologies (HTML, CSS, JavaScript) that can provide an app-like experience to users.

Key Features

• Installable: Users can "install" PWAs directly to their device's homescreen, just like native apps.
• Offline Functionality: PWAs can work even without an active internet connection using technologies like service workers and caching.
• Fast and Reliable: PWAs aim to be faster and more reliable than traditional websites, providing smooth user interactions.
• Enhancements: They can access device features like push notifications, camera, and geolocation (with user permission).

Core Technologies

• Service Workers: Act as a "proxy" between your PWA and the network. They enable offline caching, background sync, and push notifications.
• Web App Manifest: A JSON file that defines how the PWA should behave when installed (app name, icons, splash screen, etc.).
• HTTPS: PWAs require HTTPS for security reasons.

Integrating PWA

This website is built using VuePress and the theme from vuepress-theme-hope. The Hope Theme has already reserved a friendly configuration method for the use of PWA, which connects with Vite PWA. As long as you install the related modules and make the appropriate settings, you can integrate simple PWA features.

During the process of setting up PWA, it is necessary to prepare many different versions of icons. For this part, after looking for some resources, I eventually used the tool vue-pwa-asset-generator. The usage of this tool is roughly as follows:

1. Install vue-pwa-asset-generator with npm.

   npm install --global vue-pwa-asset-generator
   

2. Generate various icons with the following command,

   vue-asset-generate -a logo.svg -o img -b 182C61
   

   The parameters are explained as follows:
   • -a: input asset, SVG / PNG file (<= 512x512).
   • -o: output folder (created if it does not exist)
   • -b: fallback background color for the ico image.
   • --no-manifest: option to not generate manifest.json file

Additionally, in the process of looking for resources, I found that the website progressier provides quite good support for PWA, and it might be worth trying in the future.