PWA (Progressive Web App)

010101

OrdinaryJellyfish I thought about it but, the app icons need to be a certain size. So, I thought: What if someone uploaded an odd size favicon? Also to be honest I didn’t bother refreshing my memory around the exact size Flarum converts the favicon to... or does it not do any size changes? I’m not sure. Since I wasn’t sure, I went with separate icons to ensure that they are the correct sizes. Also, there’s only one favicon. The PWA needs two sizes. I worried about whether or not the favicon would scale well and whether or not it would validate (be what the PWA gods consider proper).

Thanks for bringing this up though. It’s something I’ll think about more. That certainly would be better - reduces install steps.

OrdinaryJellyfish

010101 Perhaps use the favicon by default if possible and add the option to upload custom icons?

brian85

010101 Good initiative I had to made it myself a few days ago and Flarum works well as PWA !

brian85

hello, I just have a problem reported by ios users on safari with scrolltop on reply screen they cannot see what thez are typing.
see : https://discuss.flarum.org/d/6595-scrolltop-in-ios

010101

brian85 That doesn't have to do with this extension. I have that problem too with or without this extension in iOS browsers.

I haven't reported it to the Flarum devs. But, it's definitely not this extension. It's Flarum core.

Edit: It is known. Here is the issue: flarum/core895

brian85

010101 Sorry you're absolutly right I'm confused !

mskian

010101 Thanks a lot for this Extension 🌻

Check out the issue on Github - zerosonesfun/pwa1

010101

mskian Hello! Thank you for your suggestions and your pull request. I'm adding the orientation "any" to the manifest. That's a good idea. I'm not adding the additional icon sizes. Here's why:

https://developers.google.com/web/tools/lighthouse/audits/manifest-contains-192px-icon

The above page states that the other sizes aren't necessary. Plus, if someone wants to add them they can easily update the manifest file and do so.

I see you escaped the slashes in the start url and scope. I read a few posts online saying that's not necessary in a manifest and since it's working well for me as-is with no warnings or errors, at this time I'm not going to adopt the escaped slashes or the updated start url with the traffic monitoring codes.

One way to think about this extension is that it can be used as-is, or one can think of it as a good starting point. It can be edited, added to, and tweaked by each individual webmaster / developer to fit their needs.

Again, thank you so much for taking the time to make the suggestions.

010101

Version 1.2

After visiting my forum which has this extension installed I noticed something that I did not notice before. After logging in I had to manually refresh the page to see that I did in fact log in. Then after logging out, I still appeared logged in. I again had to refresh the page to see that I was logged out. This was happening due to all of the extra caching this extension was doing. I thought the extra caching only affected the actual app version, but I was wrong. The caching also affected the regular browser version of the site. In an effort to fix this quickly without having to spend days, weeks, or months troubleshooting, I switched to a different Service Worker.

The new Service Worker does not do any caching. I take that back, it caches a new offline.html page. But, other than caching the new offline page, no caching is done by this extension now. This guarantees that there will be no more log in / log out hang ups or other similar issues.

Changelog:

Updated sw.js (Service Worker) so that no caching (besides any caching Flarum already does) takes place. Except for a quick cache of the new offline page.
offline.html added. Since the PWA will not work offline, this page is used to alert users that they must have lost internet connection. It states, "This app requires a network connection; it cannot be used offline. Please check your connection."
Added "orientation": "any" to the manifest. (Thanks, @mskian.)

Install / Update
If you've never installed this before go up to the first post in this thread and follow the instructions. If you are updating, run the composer update zerosonesfun/pwa command. Be sure to deactivate and reactivate the extension in your admin panel; this refreshes important files in your public assets folder. Tweak your manifest file to your liking. Delete the existing manifest and sw.js file at your public root, and then copy the new manifest and sw.js file to your public root. Emptying any cache you can think of usually doesn't hurt either.

🕉 Namaste.

chrisonline

010101
Thanks for the update.

And I don't know why but now the icon on Android is also without the chrome icon and a full round icon:

chrisonline

010101 and even the theme color and background color settings

What exactly is this settings for?
The theme color/background is coming from the Flarum settings. So where is this color used?

010101

chrisonline Good question. I’m guessing some platform out there uses it. Apple? Maybe since Flarum is awesome it overrides that with your forum colors automatically? Since I’m not sure I removed that blurb from the instructions. 😆 It seems like it is fine to leave that part alone.

I’m glad your icon is normal now! I guess Android likes this version best.

mskian

010101 Thanks
Awesome work 💯

Some Suggestion's

caching front-end & ignore caching for admin/Api
Offline Page - Create a Static page using Flarum static page extension - https://github.com/FriendsOfFlarum/pages (disallow this page on search engine via robots.txt)

PS: it's just an idea

Example

Taken from WordPress Superpwa plugin - https://github.com/SuperPWA/Super-Progressive-Web-Apps

const cacheName = 'forum.example.com-superpwa';
const startPage = 'https://forum.example.com';
const offlinePage = 'https://forum.example.com/offline';
const filesToCache = [startPage, offlinePage];
const neverCacheUrls = [/\/admin#/,/\/api/];
// Install
self.addEventListener('install', function(e) {
	console.log('SuperPWA service worker installation');
	e.waitUntil(
		caches.open(cacheName).then(function(cache) {
			console.log('SuperPWA service worker caching dependencies');
			filesToCache.map(function(url) {
				return cache.add(url).catch(function (reason) {
					return console.log('SuperPWA: ' + String(reason) + ' ' + url);
				});
			});
		})
	);
});

// Activate
self.addEventListener('activate', function(e) {
	console.log('SuperPWA service worker activation');
	e.waitUntil(
		caches.keys().then(function(keyList) {
			return Promise.all(keyList.map(function(key) {
				if ( key !== cacheName ) {
					console.log('SuperPWA old cache removed', key);
					return caches.delete(key);
				}
			}));
		})
	);
	return self.clients.claim();
});

// Fetch
self.addEventListener('fetch', function(e) {
	
	// Return if the current request url is in the never cache list
	if ( ! neverCacheUrls.every(checkNeverCacheList, e.request.url) ) {
	  console.log( 'SuperPWA: Current request is excluded from cache.' );
	  return;
	}
	
	// Return if request url protocal isn't http or https
	if ( ! e.request.url.match(/^(http|https):\/\//i) )
		return;
	
	// Return if request url is from an external domain.
	if ( new URL(e.request.url).origin !== location.origin )
		return;
	
	// For POST requests, do not use the cache. Serve offline page if offline.
	if ( e.request.method !== 'GET' ) {
		e.respondWith(
			fetch(e.request).catch( function() {
				return caches.match(offlinePage);
			})
		);
		return;
	}
	
	// Revving strategy
	if ( e.request.mode === 'navigate' && navigator.onLine ) {
		e.respondWith(
			fetch(e.request).then(function(response) {
				return caches.open(cacheName).then(function(cache) {
					cache.put(e.request, response.clone());
					return response;
				});  

			})
		);
		return;
	}

	e.respondWith(
		caches.match(e.request).then(function(response) {
			return response || fetch(e.request).then(function(response) {
				return caches.open(cacheName).then(function(cache) {
					cache.put(e.request, response.clone());
					return response;
				});  

			});
		}).catch(function() {
			return caches.match(offlinePage);
		})
	);
});

// Check if current url is in the neverCacheUrls list
function checkNeverCacheList(url) {
	if ( this.match(url) ) {
		return false;
	}
	return true;
}
```

taciturasa

I’m guessing some platform out there uses it. Apple? Maybe since Flarum is awesome it overrides that with your forum colors automatically?

010101 It may very well just be Flarum ignoring the setting and overriding it with its own. This is indeed the meta tag used for color on Chrome, Apple, etc., as well as what colors the colorbar on Discord or Slack link unfurls.

010101

mskian The previous version cached much of the frontend but that caused log in/log out issues.

But, I get your suggestion and appreciate your interest in this extension. Thanks again!

mskian

010101 😃

thedd

010101 this extension is not working for mine. I don't see a + button to add my flarum to desktop and mobile

added sw.js and site.webmanifest files to flarum root folder

-paste this code to sw.js
-and this code to site.webmanifest
and installed the extension composer require zerosonesfun/pwa
clear cache,

and after I tried deleting the two files from the root folder and adding the files to public /var/www/flarum/public folder too, but still not working

010101

thedd Go to yourwebsite.com/sw.js . Of course replace yourwebsite with your domain. Do you see the JavaScript code? If not then you don’t have the files in the right place. If you are able to pull up the JavaScript then it’s a cache issue. You have to clear Flarum’s cache plus your browser’s cache. Sometimes you have to do a rain dance and then clear the caches again. 🙂

mskian

thedd Put the Manifest and service worker file inside the Public Folder

Clear Flarum cache
clear Browser cache

thedd

010101 mskian I'm able to sw.js file in mywebsite/sw.js and clear the cache php flarum cache:clear and chrome cache too but I don't see an install icon

thedd

thedd works after setting up SSL

Th0mC

Hi there 🙂
I really want (my users too 🙂 ) this working. Thanks for the extension.
As thedd
I added sw.js and site.webmanifest files to flarum root folder
-paste the code to sw.js
-and the code to site.webmanifest
and installed the extension composer require zerosonesfun/pwa
clear flarum cache, clear Safari iOS cache
And I have ssl activated 🙂
But when I add the website from safari to the homescreen, I just get a weblink to the site in safari.
I don't know where could be the issue 🙁
Just one thing, flarum is installed in a subdirectory on mywebsite https://lafabriq.org/forum and that's where I put the files.
Thanks for your help

« Previous Page Next Page »