Webdevelopment. How did you put this on the forum?

EckyBrazzz · Oct 11, 2019

@eva2000 never saw this before, but I really liked it. even pinned it below on my task bar and it shows up in the start menu to easy access the forum

But main question, how did you do that?

JJC84 · Oct 11, 2019

Out of curiosity are you referring to the quick navigation menu or that tooltip specifically? I'm not seeing that on my end...

EckyBrazzz · Oct 11, 2019

This is really nice, works on Chrome. If I click the Centmin on the taskbar it opens a new type of browser and you can go quick to whatever you want. See the arrow

JJC84 · Oct 11, 2019

Hey, that is pretty slick! I have been liking the work MS has done in the past few years with the Windows OS. I'll have to check that on a friend's machine as I don't have any Windows boxes on hand at the moment. Here's all I get.

JJC84 · Oct 11, 2019

I'm guessing it's a favicon specifically for Windows taskbars... but that's just a guess.

rdan · Oct 11, 2019

That is PWA, add to home-screen.
Try: PWABuilder

Jimmy · Oct 11, 2019

I guess that would be very useful if you don't have an app for your website but want to allow people to create a shortcut (icon) on their phones.

JJC84 · Oct 11, 2019

Thank you @rdan! I have been building PWAs recently but I have never actually gone through and added one to my home screen before. Not that I have done anything difficult I just add these plugin to my apps and it does all of the work for me. https://www.gatsbyjs.org/packages/gatsby-plugin-offline/ https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/

EckyBrazzz · Oct 11, 2019

@Jimmy I have several sites where I use different sort of icons that appear so that people can create a kind of shortcut to that site(s) on their phones (apple touch 192x192px & metro ie-10 144px-144px ) but was indeed missing this one to get a shortcut & a different browser on Windows 10

@rdan thanks for that PWA link. The Geo location I don't need, but the PWA, just 2 simple steps to get it working Thanks a 1000+ times. Was looking for that

eva2000 · Oct 11, 2019

Yeah @EckyBrazzz what you're seeing is my custom forum and site implementation of PWA service worker outlined at Added Forum PWA Mode For Page Speed Improvements. Forum members here can also disable PWA mode if they don't like it

eva2000 said: ↑

To elaborate on how the conversion to PWA app improved page load speeds, I'd need to outline what PWA app setup involves. I am still new to PWA and service workers - only started learning 6-7 days ago so please correct me if I get the explanations wrong

The key to performance is service worker cache/precaching. A service worker is basically a network router/cache proxy written in Javascript and sits between the client visitor web browser and the web site.

Service workers require the site be using HTTPS for security reasons.

When a service worker is registered and installed into the client visitor's web browser, the service worker lives in the client's web browser.

The service worker now act as a network proxy - routing and caching and/or pre-caching requests and depending on how the service worker is written and configured can do routing, caching and/or pre-caching of requests from client web browser to the web site (i.e. this forum).

For this forum, I have configured the service worker do do precaching, caching and routing of requests. For example, if a visitor loads a forum thread and the browser requests the CSS/JS files to render the page, the registered and installed service worker intercepts this request for CSS/JS files and determines if these CSS/JS files are within the client browser's local cache storage area or not. If the CSS/JS file(s) are found in the client browser's local cache storage, the file(s) are served from the client's local browser cache storage area. If the file(s) are not found in local browser cache storage area or if there's a newer more updated version of the file(s), then the service worker initiates a network request back to the site/forums to fetch the latest copy of the CSS/JS files. Then in this forum's service worker configuration, after fetching the latest copy of the CSS/JS files, it also populates or updates the client's browser local cache storage area with this newer copy for future requests of the same CSS/JS file. As you can see where the page load speed comes from, serving an already cached file from a client visitor's local browser cache storage area is much faster than going over the network to fetch the files form the site/forums

Additionally, service workers can pre-caching files. So known static files i.e. CSS/JS, site structured images, web fonts etc can also be configured to be pre-cached. All pre-cached files need a hashed revision listing so that service worker can tell when changes occur. You'd need to automate the updating of these files and their updated hashed revision listings over time. So at service worker registration and install time, these pre-cached files are loaded into a client's browser cache storage area ready for first use on subsequent requests

Service workers also support push notifications as well so that is something I will be working on over time. But current focus is on improving page load speed as seen here

As you can see, service workers allow Progressive Web Apps (PWA) to also support offline mode. As files that make up the web page rendered display are cached in client's browser cache storage area and service worker proxy consults the local cache first before going through a network request to the site/forums. So if you loose internet connectivity, the client may already have a previously cached/pre-cached files in their local browser cache storage area to be served in offline mode

Click to expand...

EckyBrazzz · Oct 11, 2019

@eva2000 as mentioned before, it's super fast! (mentioned quick)

EckyBrazzz · Oct 11, 2019

Learning Progressive Web Apps | Google Developers now.... Looks even better

eva2000 · Oct 11, 2019

EckyBrazzz said: ↑

@eva2000 as mentioned before, it's super fast! (mentioned quick)
Click to expand...

Yeah it's nice as I love my page speed

EckyBrazzz · Oct 11, 2019

WordPress users can use Super Progressive Web Apps

Only guess I'm running out of luck with WordPress

SuperPWA is not compatible with OneSignal on multisites yet. Disable one of these plugins until the compatibility is available.
Please refer to the OneSignal integration documentation for more info.
Click to expand...

eva2000 · Oct 11, 2019

EckyBrazzz said: ↑

WordPress users can use Super Progressive Web Apps
Click to expand...

I tried a few Wordpress PWA plugins including that one and they didn't really work well for me unfortunately but that was last year so could of improved ? Let us know how you do

EckyBrazzz · Oct 11, 2019

SuperPWA is not compatible with OneSignal on multisites yet. Disable one of these plugins until the compatibility is available.
Please refer to the OneSignal integration documentation for more info.
Click to expand...

EckyBrazzz · Oct 11, 2019

Testing the plugin on a non Multi WordPress site

Action Required to integrate SuperPWA with OneSignal:
1. Go to OneSignal Configuration > Scroll down to Advanced Settings →
2. Enable Use my own manifest.json
3. Set https://domain.com/superpwa-manifest.jsonas Custom manifest.json URL and Save Settings.
Please refer the OneSignal integration documentation for more info.
Click to expand...

But it keeps the one or the other

{"name":"TEST SITE","short_name":"TEST S,"description":"TEST","icons":[{"src":"https:\/\/domain.com\/wp-content\/plugins\/super-progressive-web-apps\/public\/images\/logo.png","sizes":"192x192","type":"image\/png"},{"src":"https:\/\/domain.com\/wp-content\/plugins\/super-progressive-web-apps\/public\/images\/logo-512x512.png","sizes":"512x512","type":"image\/png"}],"background_color":"#D5E0EB","theme_color":"#D5E0EB","display":"standalone","orientation":"portrait","start_url":".","scope":"\/","gcm_sender_id":"XXXXXX78795"}
Click to expand...

But guess keep the OneSignal for now, still learning the Progressive Web Apps | Google Developers site indicated before, that might work with both

EckyBrazzz · Oct 11, 2019

Step back, working on to many issues now.....

Broadcast Live Video - Live Streaming: What to do next?
Click to expand...

Don't know who invented that a day only has 24 hours, but I blame that person for that

Rake-GH · Oct 13, 2019

For Xenforo 2 I am using this plugin, works good for me:
Beta - Home Screen Installation

Log in / Register

Forums

Join the community today

Webdevelopment. How did you put this on the forum?

EckyBrazzz Active Member

JJC84 Ad astra per aspera

EckyBrazzz Active Member

JJC84 Ad astra per aspera

JJC84 Ad astra per aspera

rdan Well-Known Member

Jimmy Well-Known Member

JJC84 Ad astra per aspera

EckyBrazzz Active Member

eva2000 Administrator Staff Member

EckyBrazzz Active Member

EckyBrazzz Active Member

eva2000 Administrator Staff Member

EckyBrazzz Active Member

eva2000 Administrator Staff Member

EckyBrazzz Active Member

EckyBrazzz Active Member

EckyBrazzz Active Member

Rake-GH Active Member

.

Log in / Register

Useful Searches

Join the community today

Webdevelopment. How did you put this on the forum?

EckyBrazzz Active Member

JJC84 Ad astra per aspera

EckyBrazzz Active Member

JJC84 Ad astra per aspera

JJC84 Ad astra per aspera

rdan Well-Known Member

Jimmy Well-Known Member

JJC84 Ad astra per aspera

EckyBrazzz Active Member

eva2000 Administrator Staff Member

EckyBrazzz Active Member

EckyBrazzz Active Member

eva2000 Administrator Staff Member

EckyBrazzz Active Member

eva2000 Administrator Staff Member

EckyBrazzz Active Member

EckyBrazzz Active Member

EckyBrazzz Active Member

Rake-GH Active Member

.