I am a reader of SSPai, and I have been a member of SSPai for 419 days.
I have learned a lot from SSPai and expanded my horizons. Therefore, the SSPai app is one of the commonly used applications on my phone. After switching to Android last year, I found that the Android app has not been updated for a long time. The Android client has always been in a "long-term disrepair" state, while the iOS client has been continuously updated with new UI and features. This makes me very envious.
However, in the article published by SSPai on March 31st, they explained the situation of the Android client and proposed a better solution.
After the upgrade of the SSPai website last year, the SSPai iOS client 2.0, which is more in line with the new design, was officially launched not long ago. Unfortunately, due to limited development capabilities, the complex adaptation and compatibility issues of the Android platform have been a headache, and the SSPai Android client has been in a "long-term disrepair" state.
Fortunately, SSPai has finally found a "better solution" for the Android client - Progressive Web App (PWA). While ensuring complete content presentation, PWA provides a lighter and more powerful new experience than client applications and web versions. It is also compatible with multiple platforms such as Android, iOS, and even Windows.
I learned about the concept of PWA for the first time in this article, so I started to Google with curiosity...
About PWA#
PWA is a concept proposed by Google in 2016, officially implemented in 2017, and achieved significant breakthroughs in 2018. The world's top browser manufacturers, Google, Microsoft, and Apple, have all announced their support for PWA technology.
PWA stands for Progressive Web App, which aims to achieve a user experience similar to native apps through various web technologies.
Looking at the differences between existing web applications and native apps, such as offline caching and immersive experience, these differences can be bridged by using existing web technologies to achieve a user experience similar to native apps.
Well, after finishing the official statement above, let me talk about my own experience. It is like a web page without the browser shell, existing on the phone's desktop in a form similar to an app. Unlike simply adding a webpage to the desktop, it has the ability to send local notifications and has caching capability. In addition, it is compatible with multiple platforms such as Android, iOS, and Windows. For me, it also has an attractive splash screen when opening.
Turning My Blog into a PWA#
After experiencing SSPai's PWA, I had the idea of turning my own blog into a PWA. After searching for information online, I found that it was unexpectedly simple to get started. Let me share my own process.
Adding manifest.json#
Here, create a manifest.json file to configure application icons, names, and other information. Here is my configuration, and you can refer to MDN for detailed configuration explanations.
{
"dir": "ltr",
"lang": "zh-cn",
"name": "Magren's Blog",
"short_name": "Magren's Blog",
"theme_color": "##ffffff",
"background_color": "##d4d4d4",
"display": "standalone",
"start_url": "./index.html",
"icons": [
{
"src": "avatar152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "avatar192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "avatar384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "avatar512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
Then, we need to include it in our HTML file. If you also have a blog, you can look for it in your theme folder.
<link rel="manifest" href="manifest.json" />
Adding Service Worker#
This API is used to implement page caching, offline capabilities, and background notifications. However, since this is just my personal blog, I did not include the notification feature.
First, check if the browser supports serviceWorker. If it does, call the function to register the site's service worker. The service worker is just a JavaScript file that resides in our app.
Add the following code to the HTML page:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js', {scope: '/'})
.then(function (registration) {
// Registration successful
console.log('ServiceWorker registration successful');
})
.catch(function (err) {
// Registration failed :(
console.log('ServiceWorker registration failed');
});
});
}
</script>
Next is sw.js, which is our service worker. Here, you can define the paths that need to be cached and the list of static files that need to be cached. This list can also be generated by a Webpack plugin. In my case, I only cached the homepage.
// Listen for service worker events
self.addEventListener('install', function (event) {
var homePage = new Request('index.html');
event.waitUntil(
// Request the homepage and store it in the cache
fetch(homePage).then(function (response) {
// Create cache-homePage cache
return caches.open('cache-homePage').then(function (cache) {
return cache.put(homePage, response);
});
}));
});
// Fetch pages
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function (error) {
// Request failed, retrieve the cached page
return caches.open('cache-homePage').then(function (cache) {
return cache.match('index.html');
});
}));
});
// Refresh the homepage
self.addEventListener('refreshHomePage', function (response) {
return caches.open('cache-homePage').then(function (cache) {
// Cache the refreshed page
return cache.put(offlinePage, response);
});
});
Finally#
Finally, let me explain how to use PWA. On a mobile phone, simply access the PWA page address through a supported browser (such as Chrome or the built-in browser on Xiaomi), and Chrome will prompt you to add the page after loading. If there is no prompt (such as Safari on iOS), you need to manually click "More" in the browser and then add it to the desktop.
On a PC, there is a download button in the upper right corner of Chrome (at the far right of the webpage link). Clicking it will add it to the computer desktop. If you want to uninstall it, simply deleting the shortcut on the desktop is not enough. You need to open it and click the uninstall button above the PWA page.