Turning an Existing Vue App into a PWA

Sat, 03 Sep 2022 17:21:00 +0800

I previously wrote a small app called “Gojuon Quiz” to assist in memorizing the Japanese phonetic alphabet. Recently, I decided to add Progressive Web App (PWA) functionality to it. This allows the app to be used even without an internet connection after the initial successful loading. Additionally, it provides a user experience that is similar to a native application, without displaying browser address bars or similar controls.

The specific steps to implement PWA are as follows:

Install the Vue PWA plugin: vue add pwa
Generate icons of different sizes and place them in the img/icons directory. You can use the Real Favicon Generator.
Adjust the PWA plugin configuration in vue.config.js. You can refer to the @vue/cli-plugin-pwa documentation.
(Optional) Add update prompts. Refer to Handling Service Worker updates in your Vue PWA.

Note: Skipping this step will not affect the automatic update feature. However, users will need to manually close and reopen the app after the update to apply the new version.

After installation, you can see the following indicators to confirm that the PWA functionality has been successfully configured:

The plus icon appears on the right side of the address bar in Chrome/Edge.
Debugging information related to the service worker is output to the console.

When debugging, there are a few small issues to keep in mind:

PWA is not enabled in development mode (e.g., vue serve). You need to first run vue build and manually open an HTTP server in the dist directory (you can use python -m http.server) to enable it.
If you are using a device on a local network to access the HTTP server on the development machine, PWA may not be triggered. This is because PWA requires HTTPS (or the server to be on localhost).
If you want to customize the name of the PWA, it should be written under pwa.name, not in other nested structures. (I previously installed the i18n plugin and habitually wrote it under pluginOptions.)

Implementing a Simple Dark Mode with CSS Filter

Thu, 23 Dec 2021 10:43:25 +0300

The Manis theme used on this blog does not provide native support for dark mode, so I decided to add it myself. Initially, I thought about customizing the CSS with media queries, but it seemed like a bigger change. I did a quick search and found that someone had already proposed the idea of using CSS Filter to implement a simple dark mode, and there was even code that could be directly applied to a Hugo blog. Compared to media queries, using CSS Filter not only simplifies the implementation, but also allows users to switch between light and dark mode without adjusting the system/browser’s global settings.

In the specific CSS implementation, I first used invert(1) to invert the colors of the entire webpage, but this also caused a reversal of color tones. Therefore, I used hue-rotate(180deg) to bring the tones back. However, while this operation is suitable for text, it affects the display of images, videos, and other elements, making them appear as if they were being X-rayed. So, I had to apply invert(1) hue-rotate(180deg) again to these elements that needed to be excluded from the dark mode, in order to revert them back to normal.

html {
 background-color: #ebebeb !important;
}

html {
filter: invert(100%) hue-rotate(180deg);
}

/* using not to exclude certain elements */
img:not(.icon-text, .icon-social),
video,
code {
filter: invert(100%) hue-rotate(180deg) contrast(100%);
}

To allow users to switch between light and dark mode, an additional toggle icon needs to be introduced. When clicked, it will insert/remove the CSS tag for dark mode and save the user’s preference to localStorage. If the user has not explicitly set a preference, the system/browser’s global dark mode setting should be followed. Therefore, I used window.matchMedia to detect it.

var toggle = document.getElementById("dark-mode-toggle");
var darkTheme = document.getElementById("dark-mode-theme");

// probe system default dark mode setting
var systemDefault = null
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 systemDefault = "dark";
} else {
 systemDefault = "light";
}

// use user preference if possible
var savedTheme = localStorage.getItem("dark-mode-storage") || systemDefault;
setTheme(savedTheme);

toggle.addEventListener("click", () => {
 if (toggle.src.endsWith("/img/moon.svg") ) {
 setTheme("dark");
 } else if (toggle.src.endsWith("/img/sun.svg") ) {
 setTheme("light");
 }

});

function setTheme(mode) {
 localStorage.setItem("dark-mode-storage", mode);

 if (mode === "dark") {
 darkTheme.disabled = false;
 toggle.src = "/img/sun.svg";
 } else if (mode === "light") {
 darkTheme.disabled = true;
 toggle.src = "/img/moon.svg";
 }
}

The complete modifications can be seen in my Pull Request for implementing dark mode in this theme. A simple example can be found in this Gist. The final result is as follows:

Update on 12/27: The PR has been accepted and merged.

Frontend on Nekonull's Garden

Turning an Existing Vue App into a PWA

Implementing a Simple Dark Mode with CSS Filter