[#44171] - [5.3][PWA] Service Worker (sw.js) & Offline Page (offline.html) for Joomla
- New
- Medium
- Build: 4.4-dev
- # 44171
Is your feature request related to a problem? Please describe.
@joomla currently doesn't have an offline page, I suggest adding this simple solution for offline page which is included in PWA for Joomla along with the #19877 manifest file & Web Share API #44311
Describe the solution you'd like
Offline Pages
This simple but elegant solution pulls a file from your web server called "offline.html" (make sure that file is actually there) and serves the file whenever a network connection can not be made.
Registering the Service Worker:
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('sw.js')
}
</script>
</body>
Service Worker: sw.js (example from https://www.pwabuilder.com)
// This is the "Offline page" service worker
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
const CACHE = "pwabuilder-page";
// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "offline.html";
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
self.addEventListener('install', async (event) => {
event.waitUntil(
caches.open(CACHE)
.then((cache) => cache.add(offlineFallbackPage))
);
});
if (workbox.navigationPreload.isSupported()) {
workbox.navigationPreload.enable();
}
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
const preloadResp = await event.preloadResponse;
if (preloadResp) {
return preloadResp;
}
const networkResp = await fetch(event.request);
return networkResp;
} catch (error) {
const cache = await caches.open(CACHE);
const cachedResp = await cache.match(offlineFallbackPage);
return cachedResp;
}
})());
}
});
Offline Page: offline.html (example from https://web.dev/articles/offline-fallback-page#the_offline_fallback_page )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>You are offline</title>
<!-- Inline the page's stylesheet. -->
<style>
body {
font-family: helvetica, arial, sans-serif;
margin: 2em;
}
h1 {
font-style: italic;
color: #373fff;
}
p {
margin-block: 1rem;
}
button {
display: block;
}
</style>
</head>
<body>
<h1>You are offline</h1>
<p>Click the button below to try reloading.</p>
<button type="button">⤾ Reload</button>
<!-- Inline the page's JavaScript file. -->
<script>
// Manual reload feature.
document.querySelector("button").addEventListener("click", () => {
window.location.reload();
});
// Listen to changes in the network state, reload when online.
// This handles the case when the device is completely offline.
window.addEventListener('online', () => {
window.location.reload();
});
// Check if the server is responding and reload the page if it is.
// This handles the case when the device is online, but the server
// is offline or misbehaving.
async function checkNetworkAndReload() {
try {
const response = await fetch('.');
// Verify we get a valid response from the server
if (response.status >= 200 && response.status < 500) {
window.location.reload();
return;
}
} catch {
// Unable to connect to the server, ignore.
}
window.setTimeout(checkNetworkAndReload, 2500);
}
checkNetworkAndReload();
</script>
</body>
</html>
web-app-origin-association (example from https://docs.pwabuilder.com/#/builder/manifest?id=scope_extensions-array )
{
"web_apps": [
{
"web_app_identity": "https://*.joomla.org/"
}
]
}
In order to allow for your app to intercept links, you must specify web-app-origin-association that must be located at https://<associated origin>/.well-known/web-app-origin-association.
This file is part of PWA for Joomla: #44172, #44182
Additional context
This is a simple solution for offline page from @pwa-builder (developed by @microsoft)
PWABuilder was founded by Microsoft as a community guided, open source project to help move PWA adoption forward.
Offline Page: https://web.dev/articles/offline-fallback-page
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
| Title |
|
||||||
| Labels |
Added:
Feature
|
||
I added an addition for scope_extensions field in my first post:
web-app-origin-association (example from https://docs.pwabuilder.com/#/builder/manifest?id=scope_extensions-array )
{
"web_apps": [
{
"web_app_identity": "https://*.joomla.org/"
}
]
}
In order to allow for your app to intercept links, you must specify web-app-origin-association that must be located at https://<associated origin>/.well-known/web-app-origin-association.
you must fork the repo first iirc maybe can help https://docs.joomla.org/Using_the_Github_UI_to_Make_Pull_Requests
@universewrld can you do a pull request ?
I created a topic, you can copy all the information from my topic #44182 to create a pull request
Personaly I do not see a reason to have it in core.
I mean, to make it work with all core features will require a huge amount of work. But final benefits from this is very small or close to zero.
Who need this, they can add it in to their template.
Personaly I do not see a reason to have it in core.
I mean, to make it work with all core features will require a huge amount of work. But final benefits from this is very small or close to zero.
Who need this, they can add it in to their template.
there is no "huge work" here, PWA does not affect other features of the @joomla core at all and does not cause any conflicts with other features of the CMS, so it can be integrated even in the next version 5.1.5
PWA in 2024 is as necessary a feature as robots.txt, configuration.php and RSS in 2005, when Joomla was founded.
Joomla has a configuration file, why can't Joomla have a Manifest file out of the box?
Most Joomla website owners don't have programming skills, so a PWA app will help them replace the native Android/iOS app.
PWA (with properly configured caching functions via service worker) will help save the power of servers and data centers, this will help reduce the impact on the environment, since the implementation of PWA will have a positive effect on the energy that servers will have to spend on displaying website content to the user. this is not a slider or an online store feature, it cannot be provided by third-party developers, just as robots.txt and RSS cannot be third-party features.
@anibalsanchez I saw you created a similar issue #19657 earlier, could you help us?
@universewrld While I appreciate the initiative, I am concerned about adapting Joomla for web app development at this stage.
Joomla's strength lies in creating and managing traditional websites. The opportunity to design it with native web app support was available during Joomla 4's development, which concluded years ago; implementing such support now would require significant changes.
Instead, I suggest exploring other tools specifically designed for web apps. We could also consider how Joomla might complement a web app through its content management capabilities or enhance its integration with external web apps.
@universewrld While I appreciate the initiative, I am concerned about adapting Joomla for web app development at this stage.
@anibalsanchez At the very least, @joomla could have a manifest #19877 file that does not affect other areas of the CMS in any way and would be a good addition to the website, such as files such as robots.txt, configuration.php & .htaccess
Joomla's strength lies in creating and managing traditional websites.
PWA is a traditional website, it is not a native application for @microsoft Windows or @android, it is just a wrapper that can have better caching and an offline page.
The opportunity to design it with native web app support was available during Joomla 4's development, which concluded years ago; implementing such support now would require significant changes.
This will not require significant changes.
I spent a couple of days learning about PWA and implemented it into my website (using examples from @pwa-builder documentation and @google dev) adding a few new files to the website folder and everything works as expected, I just want it to be native in Joomla to automate the PWA setup process.
It's not as complicated as it may seem at first glance, it's just additional website settings options such as title and keywords.
Instead, I suggest exploring other tools specifically designed for web apps. We could also consider how Joomla might complement a web app through its content management capabilities or enhance its integration with external web apps.
Joomla already has a Web Services API, now it's time for PWA (Manifest and Service Workers)
Not every website needs to have a native Android app that is 100 MB or more in size, some websites may have a PWA that is less than 2 MB in size.
Joomla offers an API for Android developers, but what if you offer something for more website owners, something easier that they can add to their website without developing a separate Android app.
Thousands of people have a website to publish articles, blogs and information, these are not thousands of programmers, these are ordinary people, without programming skills and they do not have the ability to easily set up PWA in the Joomla Control Panel.
@joomla could present itself as 3 main features: «Joomla! CMS», «Joomla! PWA» & «Joomla! Framework».
All 3 features would be in one installation package.
PWA development was several years ago, but it is still not represented in the CMS settings.
Web apps are much more universal, as they are supported by all current platforms and do not depend on corporate app stores.
It would be a big mistake to think that this should not be part of Joomla, as it opens up a great future for CMS.
PWA is a way to more decentralization and independence for independent websites, because a website on Joomla is not a community on Facebook, where you are completely dependent on corporations.
The official Joomla page was recently blocked on @facebook due to a mistake by the social network's moderators (and was unblocked a month later), that's why it is important to have an independent web app for every website owner.
@universewrld can you do a pull request ?