Experimental feature!
Progressive Web App plugin is an experimental feature. We need your feedback to improve it further and make it stable.
Blogger doesn't provide a native way to enable Progressive Web App as we cannot upload assets such as manifest.json, serviceworker.js, etc.
Our theme is the first in Blogger to natively implement Progressive Web App (PWA) functionality, proudly eliminating the need for third-party services, with only the Offline Page and Push Notifications not supported.
Checkout these Blogger community threads regarding PWA:
- Is it possible that i can build progressive web app for my Blogger blog
- Please Request For Progressive Web App
- Why blogger not have plugins option for easy integration of new things like PWA, AMP etc?
When using our theme, you can enable and configure it for your Blog with ease.
What is Progressive Web App?
A Progressive Web App (PWA) is a type of web application that offers a native app-like experience while being accessible through a web browser. PWAs are designed to combine the best features of web and mobile apps, providing fast performance, offline functionality, and a responsive interface. Key features of PWAs include:
- Installable: Users can add a PWA to their home screen without needing to go through an app store.
- Responsiveness: PWAs adapt seamlessly to different devices and screen sizes, from desktops to smartphones.
- Fast and Reliable: PWAs load quickly and offer smooth performance, even on slow or unreliable networks.
- Offline Capability: Using service workers, PWAs can cache content, allowing users to access the app even without an internet connection.
- Push Notifications: PWAs can send notifications, similar to native mobile apps.
PWAs aim to enhance the user experience by blending the advantages of web apps (easy access and updates) with the functionality of native apps (offline access, push notifications).
As said earlier, Offline Page and Push Notifications features are not available using the inbuilt plugin of the theme due to how they are implemented and Blogger limitations. Using cloudflare workers as workaround we can enable these features too, checkout @kumardeo/blogger-pwa github repository. Make sure to disable the inbuilt plugin of theme when following the tutorial from github repository.
Enable PWA plugin
Built-in PWA plugin can be configured using LinkList widget titled Progressive Web App (if you have not renamed it) in Layout.
Add icon
By default it uses the favicon configured for meta tags.
In case you have not added it or want to use different icon, create a new link in the widget and use icon as Site Name and the icon image url as Site URL. The icon must be of 1:1 ratio with a minimum width of 512px, i.e. 512px*512px, 640px*640px, etc.
Add description
By default it uses Blog Description from Blog Settings.
In case you have not added it or want to use different description, create a new link in the widget and use description as Site Name and the description text as Site URL.
Add screenshots
You can add screenshots which will be previewed when install popup is shown. There are two types of screenshots you can add through the widget namely narrow screenshots which will be displayed on mobile devices and wide screenshots which will be displayed on desktop devices.
Narrow screenshots
The narrow screenshots must be of 3:4 ratio with a minimum width of 540px, i.e. 540px*720px, etc.
To add a narrow screenshot, create a new link in the widget and use screenshot_narrow as Site Name and the screenshot image url as Site URL. You are allowed to add multiple narrow screenshots.
Wide screenshots
The wide screenshots must be of 4:3 ratio with a minimum width of 720px, i.e. 720px*540px, etc.
To add a wide screenshot, create a new link in the widget and use screenshot_wide as Site Name and the screenshot image url as Site URL. You are allowed to add multiple wide screenshots.
Add shortcuts
To add a shortcut to your PWA, create a new link in the widget and use the shortcut name as Site Name and shortcut url as Site URL. You are allowed to add multiple shortcuts.
Please note that url must be navigating to the same origin due to limitations, therefore we recommend you to add only the absolute pathname and querystring part of the url, i.e. /p/contact.html instead of https://xyz.blogspot.com/p/contact.html.
