Added Forum PWA Mode For Page Speed Improvements.

FYI, yesterday I added a new User Preference Option to enable Progressive Web App (PWA) mode for forum browsing to improve forum page speed performance by up to 40-80%. Forum members can help test PWA mode, by enabling PWA mode in their User Preference Checkbox. PWA development is currently ongoing but eventually PWA will be enabled forum wide. Update: PWA Mode is now enabled by default

When you check the box, the next web browser reload will register the service worker (sw.js) in the web browser and from that point forward, your forum browsing sessions will be PWA based.



In web browser Developer tools -> Application -> Service Workers you will see sw.js service worker being registered.



Take note of the far right 'Unregister' service worker link. You will need to use that if you want to disable PWA mode for the forums by going to User Preferences and unchecking Enable PWA mode for forums + clicking Unregister service worker link in web browser Developer tools -> Application -> Service Workers section.

Update: You no longer need to manually unregister the service worker sw.js file. I have figured out how to code it so unchecking the enable PWA mode for forums check box will automatically unregister and uninstall the service worker sw.js file When unregistered/uninstalled, the web browser developer tools -> Application -> Service Workers section will list the service work as 'deleted'



Give PWA mode a try and see if you can notice a difference in page load speeds (especially on repeat visits)

Example of forum PWA app installed on my Samsung Galaxy S7

---

 

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

 

Update: You no longer need to manually unregister the service worker sw.js file. I have figured out how to code it so unchecking the enable PWA mode for forums check box will automatically unregister and uninstall the service worker sw.js file When unregistered/uninstalled, the web browser developer tools -> Application -> Service Workers section will list the service work as 'deleted' and on subsequent page loads, that section will be empty if you have no other service workers installed.

This update will allow my future plans to enable PWA mode forum wide for everyone - guests and members. But with this update, registered logged in members can choose to disable PWA mode.






You can see demo example for how 'enable PWA mode' installs the service worker when checkbox is checked and how service worker is unregistered/uninstalled when check box is unchecked.

 

PWA Mode Enabled By Default

PWA mode is now enabled by default forum wide with registered forum members having the option to disable PWA mode via a checkbox. I reversed the configuration due to Xenforo custom user fields having a limitation in not being able to check the checkbox by default without hacking templates and registration form and requiring to do a batch SQL query to update all existing registered members to check the enable PWA checkbox custom user field. The current method is simpler in that PWA mode is enabled by default and registered forum members can opt to disable PWA by User Preference Option



You can see example of disabling PWA mode here and example of re-enabling PWA mode by unchecking the checkbox here.

 

The forum's PWA app installed on Windows 10

 

First 2 weeks worth of page load speed statistics since switching forums over to PWA mode have been posted community.centminmod.com journey for speed