This will fully enable your website to be installable as
a REAL app from web-browsers. On Android, push notifications
and pop-up's requesting the user to install your PWA app
will work. On iPhone, it still has to be installed from
the Safari "Share" "Add to Home Screen" method, but will
be a real PWA with a real icon on all three platfroms;
Iphone, Android and Windows. Push notifications are
currently only functional on Android and Windows due to
Apple restrictions, possibly make use of ... moreThis will fully enable your website to be installable as
a REAL app from web-browsers. On Android, push notifications
and pop-up's requesting the user to install your PWA app
will work. On iPhone, it still has to be installed from
the Safari "Share" "Add to Home Screen" method, but will
be a real PWA with a real icon on all three platfroms;
Iphone, Android and Windows. Push notifications are
currently only functional on Android and Windows due to
Apple restrictions, possibly make use of E-mail notifications
for iPhone users.
First, sign up for OneSignal. It's free, easy, and enables Web Push
Notifications. They'll give you code to download, upload it all to
app/webroot.
Add this code in app/View/Layouts/defualt.ctp inside the "Meta" area.
Place this right before </head> and right after ?>
<link rel="manifest" href="/manifest.json">
<script>if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] active service worker found, no need to register"
} else {
// Register the service worker
navigator.serviceWorker
.register("OneSignalSDKWorker.js", {
scope: "./"
})
.then(function (reg) {
console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
});
}
}</script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "REPLACE WITH YOUR ONESIGNAL APP ID",
});
});
</script>
Create a manifest.json and put it in app/webroot
Put this in Manifest.json
{
"short_name": "REPLACE WITH YOUR APP/SITE SHORT NAME",
"name": "REPLACE WITH YOUR APP/SITE NAME",
"icons": [
{
"src": "images/launcher-icon-0-75x.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "images/launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/launcher-icon-1-5x.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/launcher-icon-5x.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "REPLACE WITH YOUR START URL",
"display": "standalone (OR FULLSCREEN)",
"background_color": "#850000 (REPLACE WITH YOUR COLOR)",
"theme_color": "#850000 (REPLACE WITH YOUR COLOR)",
"scope": "/",
"orientation": "portrait"
}
This will go inside your OneSignalSDKWorker.js, which also goes in webroot
// This is the "Offline copy of pages" service worker
const CACHE = "pwabuilder-offline";
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "index.html";
const offlineFallbackPage = "/";
// Install stage sets up the index page (home page) in the cache and opens a new cache
self.addEventListener("install", function (event) {
console.log("[PWA Builder] Install Event processing"
if (offlineFallbackPage === "offline.html" {
return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker.");
}
return cache.add(offlineFallbackPage);
})
);
});
// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET" return;
function fromCache(request) {
// Check to see if you have it in the cache
// Return response
// If not in the cache, then return error page
return caches.open(CACHE).then(function (cache) {
return cache.match(request).then(function (matching) {
if (!matching || matching.status === 404) {
return Promise.reject("no-match"
}
OneSignal will also provide a code to add in HTML Block
that provides users a button to enable/disbale Push
Notifications. That code is below, and can be added into
any page by HTML Block. I added it to a blank custom page
named "Push Notifications" and put the page in the Menu.
After you are done, refresh your screen several times,
allowing the service worker to register, the "offline"
data to accumalate. Then use the "Lighthouse" google
chrome extension to test your PWA quality. You should
see 3 out of 3 installable, and 7 out of 7 PWA optimized.
It will explain anything else you need to alter on your
website to increase the PWA's quality.
If you want to give your users the possibility to promote their profile, for example: on their personal website, then you can provide your user a simple html code snippet which they can place on...
You can add it
Layout Editor Available Blocks HTML Block
Adjust accordingly in your language
<BODY onLoad="KW_doClock()"><table border="0" cellpadding="0" cellspacing="0"...