I am a reader of SSPai, and it has been 419 days since I became a member of SSPai.
I have learned a lot from SSPai and broadened my horizons. Therefore, the SSPai app is one of the frequently 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, and 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, which makes me very envious.
However, in an 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 device adaptation and compatibility issues on 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 the complete presentation of content, 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 Googling with a curious attitude...
About PWA#
PWA is a concept proposed by Google in 2016, officially implemented in 2017, and made 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 applications, such as offline caching and immersive experience, these differences can be compensated by using existing web technologies, ultimately achieving a user experience similar to native applications.
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 mobile 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 unexpectedly easy to get started. Let me share my own process.
Adding manifest.json#
Here, create a manifest.json file to mainly configure the application icon and name. Here is my configuration, and you can refer to MDN for detailed configuration explanations.
{
"dir": "ltr",
"lang": "en",
"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, because this is my personal blog, I did not include the notification feature.
First, check if the browser supports service workers. 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 was successful
console.log('ServiceWorker registration successful');
})
.catch(function (err) {
// Registration failed :(
console.log('ServiceWorker registration failed');
});
});
}
</script>
Next is sw.js, our service worker. Here, you can define the paths that need to be cached and the list of static files to be cached. This list can also be generated by a Webpack plugin. In my case, I only cached the homepage.
// Listen for the install event of the service worker
self.addEventListener('install', function (event) {
var homePage = new Request('index.html');
event.waitUntil(
// Fetch the homepage and store it in the cache
fetch(homePage).then(function (response) {
// Open the cache named 'cache-homePage'
return caches.open('cache-homePage').then(function (cache) {
return cache.put(homePage, response);
});
}));
});
// Intercept the page requests
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function (error) {
// If the request fails, return 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 device, simply access the PWA page address through a supported browser (such as Chrome or the built-in browser on Xiaomi phones). Chrome will prompt you to add the page after loading. If it doesn't 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.