Also read the updated post which uses Cloudflare Wrangler CLI .
What's updated?
1. You no longer need to create multiple Workers app which means only 1 route.
2. Easy to update the files.
3. Uses ES Modules format for Workers.
Hello! Kamal Bhai Ji เคฎें เคเคชเคा เคธ्เคตाเคเคค เคนै।.
เค्เคฏा เคเคชเคจे เคเคญी เคฆेเคा เคนै เคि เคเคฌ เคเคช เคिเคธी เคตेเคฌเคธाเคเค เคชเคฐ เคाเคคे เคนैं เคคो เคตเคน "เคนोเคฎ เคธ्เค्เคฐीเคจ เคฎें เคोเคก़ें" เคธंเคेเคค เคฆिเคाเคคा เคนै? เคฏเคฆि เคนां เคเคฐ เคเคช เคญी เค เคชเคจी เคตेเคฌเคธाเคเค เคฌเคจाเคจा เคाเคนเคคे เคนैं เคคो เคเคช เคธเคนी เคเคเคน เคชเคฐ เคนैं।© Fineshop Design | Progressive Web App for Blogger |
เคเคธ เคฒेเค เคฎें, เคฎैं เคเคชเคो เค เคชเคจी เคตेเคฌเคธाเคเค เคे เคฒिเค เคเคธाเคจ เคคเคฐीเคे เคธे เคเค PWA (Progressive Web app) เคฌเคจाเคจे เคे เคฒिเค เคฎाเคฐ्เคเคฆเคฐ्เคถเคจ เคเคฐूंเคा.
เคเคธเคฒिเค, เคเคธเคธे เคชเคนเคฒे เคि เคเคช เค เคชเคจी เคตेเคฌเคธाเคเค เคे เคฒिเค PWA เคธ्เคฅाเคชिเคค เคเคฐเคจे เคी เคช्เคฐเค्เคฐिเคฏा เคถुเคฐू เคเคฐें, เคเคชเคो เคชเคคा เคนोเคจा เคाเคนिเค เคि PWA เค्เคฏा เคนै เคเคฐ เคฏเคน เคเคชเคी เคตेเคฌเคธाเคเค เคे เคฒिเค เค्เคฏों เคฎเคนเคค्เคตเคชूเคฐ्เคฃ เคนै.
What is PWA (Progressive Web App)
Progressive web apps เคชเคฐ เคฆेเคถी เคैเคธा เค เคจुเคญเคต เคฌเคจाเคจे เคा เคเค เคจเคฏा เคคเคฐीเคा เคนै। เคตे เคฆोเคจों เคฆुเคจिเคฏाเคं เคे เคธเคฐ्เคตเคถ्เคฐेเคท्เค เคो เคोเคก़เคคे เคนैं, เคเคชเคฏोเคเคเคฐ्เคคाเคं เคो เคตेเคฌเคธाเคเค เคเคฐ เคเคช เคा เคธเคฐ्เคตเคถ्เคฐेเคท्เค เคช्เคฐเคฆाเคจ เคเคฐเคคे เคนैं।.
เคช्เคฐोเค्เคฐेเคธिเคต เคตेเคฌ เคเคช เคเค เคตेเคฌเคต्เคฏू เคเคช เคนै เคिเคธे เคเคชเคे เคซोเคจ เคฏा เคैเคฌเคฒेเค เคชเคฐ เคเค เคเคช เคी เคคเคฐเคน เคंเคธ्เคॉเคฒ เคिเคฏा เคा เคธเคเคคा เคนै, เคฒेเคिเคจ เคฏเคน เคตेเคฌ เคช्เคฐौเคฆ्เคฏोเคिเคिเคฏों เคे เคธाเคฅ เคฌเคจाเคฏा เคเคฏा เคนै। เคเคธเคा เคฎเคคเคฒเคฌ เคนै เคि เคเคช เคเค เค เคฒเค เคฎूเคฒ เคเคช เคฌเคจाเค เคฌिเคจा เคชुเคถ เคจोเคिเคซिเคेเคถเคจ เคเคฐ เคเคซ़เคฒाเคเคจ เคธเคฎเคฐ्เคฅเคจ เคैเคธी เคธुเคตिเคงाเคं เคोเคก़ เคธเคเคคे เคนैं.
Why is PWA Important?
เคช्เคฐोเค्เคฐेเคธिเคต เคตेเคฌ เคเคช เคเค เคตेเคฌเคธाเคเค เคนै เคो เคเคชเคฏोเคเคเคฐ्เคคा เคे เคกिเคตाเคเคธ เคชเคฐ เคเค เคเคช เคी เคคเคฐเคน เคต्เคฏเคตเคนाเคฐ เคเคฐเคคी เคนै। เคฏเคน เคคेเคी เคธे เคฒोเคก เคนोเคคा เคนै, เคตिเคญिเคจ्เคจ เคเคชเคเคฐเคฃों เคे เคฒिเค เคเคค्เคคเคฐเคฆाเคฏी เคนै, เคเคฐ เคुเค เคญी เคกाเคเคจเคฒोเคก เคเคฐเคจे เคी เคเคตเคถ्เคฏเคเคคा เคे เคฌिเคจा เคिเคธी เคญी เคธเคฎเคฏ เคชเคนुंเคा เคा เคธเคเคคा เคนै।
เคช्เคฐोเค्เคฐेเคธिเคต เคตेเคฌ เคเคช เคเคชเคฏोเคเคเคฐ्เคคाเคं เคเคฐ เคกेเคตเคฒเคชเคฐ्เคธ เคฆोเคจों เคे เคฒिเค เคชाเคฐंเคชเคฐिเค เคตेเคฌเคธाเคเค เคी เคคुเคฒเคจा เคฎें เคฌेเคนเคคเคฐ เค เคจुเคญเคต เคช्เคฐเคฆाเคจ เคเคฐเคคा เคนै। เคเคธเคฎें เคเคธी เคตिเคถेเคทเคคाเคं เคนैं เคो เคเคฎเคคौเคฐ เคชเคฐ เคฎूเคฒ เคเคช्เคธ เคฎें เคชाเค เคाเคคी เคนैं เคैเคธे เคชुเคถ เคจोเคिเคซिเคेเคถเคจ, เคเคซ़เคฒाเคเคจ เคธเคฎเคฐ्เคฅเคจ เคเคฐ เคนोเคฎ เคธ्เค्เคฐीเคจ เคเคเคเคจ। เคเคธเคा เคฎเคคเคฒเคฌ เคนै เคि เคฏเคน เคคेเคी เคธे เคฒोเคก เคนोเคा, เคธเคญी เคช्เคฐเคाเคฐ เคी เคธ्เค्เคฐीเคจ เคชเคฐ เคฌेเคนเคคเคฐ เคฆिเคेเคा, เคจिเคฏเคฎिเคค เคตेเคฌเคธाเคเค เคी เคคुเคฒเคจा เคฎें เค เคงिเค เคाเคฐ्เคฏเค्เคทเคฎเคคा เคนोเคी เคเคฐ เคกिเคตाเคเคธ เคเคซ़เคฒाเคเคจ เคนोเคจे เคชเคฐ เคญी เคเคชเคฒเคฌ्เคง เคฐเคนेเคा।.
How to build a PWA for Blogger
เคช्เคฐोเค्เคฐेเคธिเคต เคตेเคฌ เคเคช เคฌเคจाเคจे เคे เคฒिเค, เคเคชเคो เค เคชเคจी เคตेเคฌเคธाเคเค เคฎें เคुเค เคธुเคตिเคงाเคँ เคोเคก़เคจे เคी เคเคตเคถ्เคฏเคเคคा เคนोเคी। เคเคจ เคธुเคตिเคงाเคं เคฎें เคธेเคตा เคเคฐ्เคฎी เคถाเคฎिเคฒ เคนैं, เคो เคเคชเคी เคธाเคเค เคो เคเคซ़เคฒाเคเคจ เคाเคฎ เคเคฐเคจे เคी เค เคจुเคฎเคคि เคฆेเคคे เคนैं, เคเคฐ เคเคฌ เคเคชเคฏोเคเคเคฐ्เคคा เคเคชเคी เคธाเคเค เคชเคฐ เคฒौเคเคคे เคนैं เคคो เคธूเคเคจाเคं เคชुเคถ เคเคฐเคคे เคนैं। เคเคช เค เคชเคจी เคตेเคฌเคธाเคเค เคชเคฐ เคเค เคเคก-เคू-เคนोเคฎ เคธ्เค्เคฐीเคจ เคช्เคฐॉเคฎ्เคช्เค เคญी เคंเคธ्เคॉเคฒ เคเคฐ เคธเคเคคे เคนैं เคो เคเคชเคฏोเคเคเคฐ्เคคाเคं เคो เคเคชเคी เคธाเคเค เคฏा เคเคช เคो เคเคจเคे เคฎोเคฌाเคเคฒ เคกिเคตाเคเคธ เคฏा เคกेเคธ्เคเคॉเคช เคंเคช्เคฏूเคเคฐ เคชเคฐ เคเคจเคी เคนोเคฎ เคธ्เค्เคฐीเคจ เคชเคฐ เคोเคก़เคจे เคे เคฒिเค เคช्เคฐेเคฐिเคค เคเคฐเคคा เคนै.
เคเคธ เค्เคฏूเคोเคฐिเคฏเคฒ เคो เคธเคฎเคเคจा เคฅोเคก़ा เคฎुเคถ्เคिเคฒ เคนो เคธเคเคคा เคนै, เคฒेเคिเคจ เคฏเคฆि เคเคช เคธเคญी เคเคฐเคฃों เคा เคธเคนी เคขंเค เคธे เคชाเคฒเคจ เคเคฐเคคे เคนैं, เคคो เคเคช เคจिเคถ्เคिเคค เคฐूเคช เคธे เค เคชเคจी เคฌ्เคฒॉเคเคฐ เคตेเคฌเคธाเคเค เคे เคฒिเค เคเค PWA เคฌเคจाเคจे เคฎें เคธเค्เคทเคฎ เคนोंเคे.
This process requires a Custom Domain with the integration of Cloudflare, and it can't be done on the .blogspot subdomain with this process. With .blogspot you can't set up service worker.
Limitations:-
เคถुเคฐू เคเคฐเคจे เคธे เคชเคนเคฒे, เคเคชเคो Cloudflare Workers Limits. เคे เคฌाเคฐे เคฎें เคชเคคा เคนोเคจा เคाเคนिเค । เคฏเคฆि เคเคชเคे เคฌ्เคฒॉเค เคชเคฐ เคฌเคก़ी เคธंเค्เคฏा เคฎें เคตिเค़िเคเคฐ เคนैं, เคคो เคเคช เคเคจ เคธीเคฎाเคं เคो เคชाเคฐ เคเคฐ เคธเคเคคे เคนैं เคเคฐ เคฏเคน เคธाเคเค เคे เคช्เคฐเคฆเคฐ्เคถเคจ เคे เคธाเคฅ-เคธाเคฅ เคเคชเคฏोเคเคเคฐ्เคคा เค เคจुเคญเคต เคो เคญी เคช्เคฐเคญाเคตिเคค เคเคฐ เคธเคเคคा เคนै। เคเคธ เคธเคฎเคธ्เคฏा เคो เคนเคฒ เคเคฐเคจे เคे เคฒिเค, เคเคช เคธเคถुเคฒ्เค เคฏोเคเคจा เคชเคฐ เคธ्เคตिเค เคเคฐเคจे เคชเคฐ เคตिเคाเคฐ เคเคฐ เคธเคเคคे เคนैं।
Requirements:-
เคถुเคฐू เคเคฐเคจे เคธे เคชเคนเคฒे, PWA เคो เคธเค्เคฐिเคฏ เคเคฐเคจे เคे เคฒिเค เคเค เคीเคें เคเคตเคถ्เคฏเค เคนोเคจी เคाเคนिเค:
- DNS เคो Cloudflare เคฆ्เคตाเคฐा เคช्เคฐเคฌंเคงिเคค เคिเคฏा เคाเคจा เคाเคนिเค (Note: Proxy must be enabled).
1:1
เคจ्เคฏूเคจเคคเคฎ เคเคाเคฐ เคे เคเค्เคธเคेंเคถเคจ เคे เคธाเคฅ512x512
เคจुเคชाเคค เคा เคเค เคฌ्เคฒॉเค เคเคเคเคจ.png
.- 5 Preview images for your webpages of size
540x720
เคฎें เคเคाเคฐ เคे เค เคชเคจे เคตेเคฌเคชेเคों เคे เคฒिเค images เคा Preview เคเคฐें .png
. - เคเค GitHub Account เคนोเคจा เคाเคนिเค.
Forking Repository:-
เค เคชเคจे GitHub เคाเคคे เคฎें เคธाเคเคจ เคเคจ เคเคฐें เคเคฐ @kumardeo/blogger-pwa-github repository เคो fork เคเคฐें.
You can also create a new branch and make changes there so that you can create PWA for multiple blogs using same repository. It is recommended that you don't make changes in main branch.
Uploading Icons:-
-
Prepare an icon for your blog in
.png
extension with a size of512x512
(recommended file size: maximum 150KB).
*Rename the file asandroid-icon-512x512.png
- Go to favicon-generator.org and upload the Blog Icon.
- Download the generated favicon and extract the files.
-
*Delete unnecessary files like:
browserconfig.xml
manifest.json
-
Upload these icons in
app/icons
directory in themain
branch of forked repository.
*Upload the original file as well, i.e.android-icon-512x512.png
.
Total number of icons will be approximately 26.
Uploading Screenshots:-
- Prepare 5 screenshots of your Webpages of size
540x720
in.png
extension that will appear when it shows the install button (recommended file size: maximum 750KB each). -
Name the screenshots in series:
screen-1.png
screen-2.png
screen-3.png
screen-4.png
screen-5.png
- Upload all these screenshots in
app/screenshots
directory in themain
branch of forked repository.
manifest.json:-
- Go to forked repository and open
app/manifest.json
file. -
The file looks something like the following:
{ "version": "1.0", "name": "My Blog", "short_name": "My Blog", "description": "My blog description goes here...", "dir": "auto", "lang": "en-US", "orientation": "any", "start_url": "/?utm_source=homescreen", "scope": "/", "display": "standalone", "prefer_related_applications": false, "background_color": "#fff", "theme_color": "#fff", "icons": [ { "src": "icons/favicon.ico", "sizes": "16x16 24x24 32x32 64x64", "type": "image/x-icon" }, { "src": "icons/android-icon-36x36.png", "sizes": "36x36", "type": "image/png", "purpose": "any maskable" }, { "src": "icons/android-icon-48x48.png", "sizes": "48x48", "type": "image/png", "purpose": "any maskable" }, { "src": "icons/android-icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any maskable" }, { "src": "icons/android-icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any maskable" }, { "src": "icons/android-icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any maskable" }, { "src": "icons/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "icons/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ], "screenshots": [ { "src": "screenshots/screen-1.png", "type": "image/png", "sizes": "540x720" }, { "src": "screenshots/screen-2.png", "type": "image/png", "sizes": "540x720" }, { "src": "screenshots/screen-3.png", "type": "image/png", "sizes": "540x720" }, { "src": "screenshots/screen-4.png", "type": "image/png", "sizes": "540x720" }, { "src": "screenshots/screen-5.png", "type": "image/png", "sizes": "540x720" } ], "shortcuts": [ { "name": "My Shortcut 1", "short_name": "My Shortcut 1", "description": "My Shortcut 1 description goes here...", "url": "/search/label/my-shortcut-1?utm_source=homescreen", "icons": [ { "src": "icons/android-icon-192x192.png", "sizes": "192x192" } ] }, { "name": "My Shortcut 2", "short_name": "My Shortcut 2", "description": "My Shortcut 2 description goes here...", "url": "/search/label/my-shortcut-2?utm_source=homescreen", "icons": [ { "src": "icons/android-icon-192x192.png", "sizes": "192x192" } ] } ] }
-
*Edit and Replace the marked parts as per your need and commit the changes.
Shortcut's
Also note down the color code.url
field must not point to url that is out of scope.
It is recommended that you use relative url instead of absolute url in theurl
field of shortcut, i.e./search/label/Science
instead ofhttps://example.com/search/label/Science
.
Try to not to add more than 3 shortcuts in the array.
Learn more about Web app manifests.
browserconfig.xml:-
- Go to forked repository and open
app/browserconfig.xml
file. -
The file looks something like the following:
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/app/icons/ms-icon-70x70.png"/> <square150x150logo src="/app/icons/ms-icon-150x150.png"/> <square310x310logo src="/app/icons/ms-icon-310x310.png"/> <TileColor>#ffffff</TileColor> </tile> </msapplication> </browserconfig>
- *Edit and Replace the marked color code same as manifest.json color code and commit the changes.
Learn more about Browser configuration files.
worker.js:-
- Go to forked repository and open
worker.js
file, copy its content to any text editor. -
Find the following code:
const APP_CONFIG = { app: { name: 'fineshop-pwa-app' }, github: { username: '<username>', repository: '<repository>', branch: '<branch>', /** * If the repository is private, provide token as string * otherwise keep it null */ token: null }, cacheConfig: { cache: 'pwa-app', browserTTL: 2 * 60 * 60 * 24, edgeTTL: 2 * 60 * 60 * 24, defaultEtag: 'strong', /** * This field is for Development purpose only to bypass cache * Keep it false in order to serve cached responses */ bypassCache: false } };
-
*Replace the marked parts, i.e.
<username>
with your GitHub username<repository>
with your Forked Repository name<branch>
with your Branch name (main)
Here is an example:... github: { username: 'kumardeo', repository: 'blogger-pwa-github', branch: 'main', /** * If the repository is private, provide token as string * otherwise keep it null */ token: null }, ...
You must not edit and commit changes in
worker.js
file to repository itself.
We will be using this modified code for Cloudflare Workers.
Creating Workers in Cloudflare:-
- Login to your Cloudflare Account.
- Go to Workers & Pages section and click on Create application.
- Go to Workers tab and click on Create Worker and rename the worker as
blogname-pwa
, i.e.fineshop-pwa
. - Click on Deploy as we shall be able to edit code after deploying "Hello World!" worker.
- Now click on Edit code and replace the existing code with the code in previous step.
- Click on Save and Deploy.
Creating Routes:-
- Go to Websites section in Cloudflare Dashboard and select your domain.
- Now go to Workers Routes section and then click on Add Route.
-
Input the fields as shown in the given table:
Route Service Environment www.fineshopdesign.com/app/* fineshop-pwa production - *Input the fields as per your blog url and workers name.
Now try to open these URLs one by one by replacing with your blog url:
www.fineshopdesign.com/app/icons/android-icon-512x512.png
www.fineshopdesign.com/app/manifest.json
www.fineshopdesign.com/app/pwa.js
www.fineshopdesign.com/app/fallback/
If you are able to open these URLs that means there is no problem, you have done with the Cloudflare setups.
Now it's time to make changes in blog.
Learn more about Workers Routes.
Editing Blog:-
- Now go to Blogger Dashboard. Go to Theme section.
- Click on Edit HTML.
-
Paste the following codes below
<head>
, if you didn't find it, it would have been probably parsed which is<head>
. Delete existing similar codes.<!--[ START: PWA Meta Tags]--> <link rel="apple-touch-icon" sizes="57x57" href="/app/icons/apple-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="60x60" href="/app/icons/apple-icon-60x60.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/app/icons/apple-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="76x76" href="/app/icons/apple-icon-76x76.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/app/icons/apple-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="120x120" href="/app/icons/apple-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="144x144" href="/app/icons/apple-icon-144x144.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/app/icons/apple-icon-152x152.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/app/icons/apple-icon-180x180.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/app/icons/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/app/icons/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="96x96" href="/app/icons/favicon-96x96.png" /> <link rel="icon" type="image/png" sizes="192x192" href="/app/icons/android-icon-192x192.png" /> <link rel="manifest" href="/app/manifest.json" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="application-name" content="My Blog" /> <meta name="theme-color" content="#ffffff" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-title" content="My Blog" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="msapplication-config" content="/app/browserconfig.xml" /> <meta name="msapplication-TileImage" content="/app/icons/ms-icon-144x144.png" /> <meta name="msapplication-TileColor" content="#ffffff" /> <!--[ END: PWA Meta Tags ]-->
- Replace the name with your Blog name and color code with code you used in
manifest.json
.
Now follow the steps as per your template, i.e. AMP Template or Non-AMP Template.
AMP Template:-
If you are using an AMP Template, you must follow the below steps:
- Add the following AMP Serviceworker JS below to
<head>
or above to</head>
.
<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>
- Paste the following codes above to
</body>
.
<amp-install-serviceworker data-iframe-src='/app/fallback/' layout='nodisplay' src='/app/serviceworker.js'/>
Non-AMP Template:-
If you are using a Non-AMP Template, you must follow the below steps:
- Add the following Javascript code above to
</head>
.
<script async="true" defer="true" src="/app/pwa.js" type="module"></script>
Lastly, save the changes and visit your blog on your mobile phone, i.e. Android, you will be able to see a button to install your Progressive Web App.
Custom Install Button:-
You may want to add a custom button on your site which shows the installation prompt on click. You can use the following css and javascript codes to create a beautiful install button.
You should not use it if you are using an AMP template.
Step 1: Add the following css in theme xml just above to </head>
<style>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
.pwa-button{position:fixed;z-index:999;left:20px;bottom:75px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:#1900ff;visibility:visible;opacity:1;transition:visibility .5s,opacity .5s}
.pwa-button[hidden]{display:flex;visibility:hidden;opacity:0}
.pwa-button:not([disabled])::before{content:'';position:absolute;z-index:-1;inset:0;background:inherit;border-radius:inherit;animation:1s cubic-bezier(0,0,.2,1) infinite pwa-button-ping}
.pwa-button svg.flash{width:22px;height:22px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4}
@keyframes pwa-button-ping{75%,to{transform:scale(1.6);opacity:0}}
/*]]>*/</style>
Step 2: Add the following javascript just above to </body>
<script type='module'>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
(({button:t,onInstall:n})=>{let i=null;var e=()=>{i&&(t.disabled=!0,i.prompt().then(e=>{"accepted"===e.outcome&&o()}).finally(()=>{t.disabled=!1}),i=null)},l=e=>{e.preventDefault(),i=e,t.hidden=!1};const o=()=>{t.hidden=!0,t.removeEventListener("click",e),window.removeEventListener("beforeinstallprompt",l)};t instanceof HTMLElement&&(t.hidden=!0,t.addEventListener("click",e),window.addEventListener("beforeinstallprompt",l));const d=e=>{t instanceof HTMLElement&&o(),"function"==typeof n&&n(e),window.removeEventListener("appinstalled",d)};window.addEventListener("appinstalled",d)})({
button: document.getElementById("app_install_button")||Object.assign(document.body.appendChild(document.createElement("button")),{hidden:!0,type:"button",className:"pwa-button",innerHTML:"<svg class='flash' viewBox='0 0 24 24'><path d='M6.08998 13.28H9.17998V20.48C9.17998 22.16 10.09 22.5 11.2 21.24L18.77 12.64C19.7 11.59 19.31 10.72 17.9 10.72H14.81V3.52002C14.81 1.84002 13.9 1.50002 12.79 2.76002L5.21998 11.36C4.29998 12.42 4.68998 13.28 6.08998 13.28Z' stroke-miterlimit='10'></path></svg>"}),
onInstall(){
/**
* Do something on app installed
* i.e. Display a Thank You message in UI
*/
}
});
/*]]>*/</script>
Save the changes, now an install button will appear on your site.
Push Notifications:-
One of the best features of PWA is Push Notifications which allows you to send notifications to your visitors in the background.
To send push notifications, we may need to use third-party notification services, i.e. Firebase Cloud Messaging, OneSignal, etc.
The repository has support for OneSignal, which means all the required files (i.e. OneSignal Service Worker), codes, etc are already added. You just have to make changes as per your app configuration and you are good to go.
OneSignal Integration:-
Not applicable for AMP templates since it uses OneSignal JavaScript SDK.
- Go to OneSignal Dashboard.
- Go to your existing Web App or Create a new App using their Documentation.
- Go to the App settings.
- Select 'Typical Site' in 'Choose Integration' Settings.
-
Toggle On 'Service Workers' in 'Advance Push Settings'.
Input the fields as given below:
Path to service worker files:/app/
Main service worker filename:onesignalworker.js
Updater service worker filename:onesignalworker.js
Service worker registration scope:/app/onesignal/
- Find App's App Id and note it down.
- Go to forked repository and open
app/pwa.js
file. -
Find the following part:
})({ consoleLogs: true, oneSignalEnabled: false, oneSignalSDK: "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js", oneSignalConfig: { appId: "<appId>", allowLocalhostAsSecureOrigin: true } });
-
*Replace the marked parts, i.e.
false
withtrue
<appId>
with your OneSignal App ID
Here is an example:... consoleLogs: true, oneSignalEnabled: true, oneSignalSDK: "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js", oneSignalConfig: { appId: "********-****-****-****-************", allowLocalhostAsSecureOrigin: true } ...
- Commit the changes.
Do not add any code provided by OneSignal in the Template XML because I have already added it as per requirement.
License:-
@kumardeo/blogger-pwa-github is licensed under the MIT License
Reporting Issues:-
If you are facing any issue or it doesn't work as expected, you can open an issue in this GitHub repository: @kumardeo/blogger-pwa-github
I shall try to fix issues and commit the changes.
Conclusion:-
This is all about building a PWA (Progressive Web App) for your Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in . Thank you!