JS Progressive Web Apps ?

Curious if there's any javascript/developers playing with Progressive Web Apps (PWA checklist) ? You can do PWA testing optionally in webpagetest.org advanced options for Google Lighthouse report testing outlined here.



I was curious how I could get a site's PWA score up in that segment and decided to try testing it on static site. Pretty happy with the result

Webpagetest PWA score = 100



Google Lighthouse Progressive Web Apps = 100 - 12 audit tests passed



Opera testing offline network - serving user end cached files from custom javascript based service worker and browser local storage cache I setup





Browser cache storage



Contents for browser cache storage's service worker caches I created

---

 

Centmin Mod centminmod.com site seems like a good candidate for conversion to a PWA state due to it's static nature. Started doing some private testing

 

centminmod.com PWA development coming along nicely. Testing native Android Chrome 'Add to Home Screen' so you can launch Centmin Mod site as a native Android app/PWA

 

FYI, switched centminmod.com to PWA enabled live operation now for some testing as outlined here. Give the site a whirl and see how it performs for 2nd/repeat visited pages and also offline mode (after at least loading page once to browser cache storage API)

Chrome 67+ has support for PWA on desktop too PWA Coming to Chrome for Desktop

From Chrome menu - Install Centmin Mod



Clicking it prompts to install Centmin Mod site PWA app



On install, Centmin Mod site pops up as a Windows 10 native app



Also shows up in Windows 10 menu



As a native Windows 10 app, you can pin Centmin Mod PWA to taskbar or Start menu like any other app



centminmod.com opened up as a native Windows 10 app

 

So far the PWA conversion + disabling Google Adsense page level ads has done wonders for site page load speed As expected disabling Google Adsense page level ads had a more dramatic impact on site page load times and the further away the country visitors are from USA base hosted centminmod.com site. There maybe slight differences due to centminmod.com now running behind Cloudflare with DNS round robin to 3 of my previously GeoDNS (Amazon Route53) based VPS in Los Angeles, Seattle and New Jersey - so visitors around the world will hit Cloudflare edge servers but those will need to communicate back to one of these 3 backend origin VPSes.

This is Google Data Studio + Google Analytics source data based site page speed metrics for July 20th to July 27th (4am) period for desktop, mobile, desktop + mobile and for United States, Indonesia, Vietnam, India, China, Brazil, Germany, Russia, Singapore & Australia regions which are the most visited regions and also the first four countries are also the slowest for page load times. So the focus on these regions in terms of PWA conversion and the affects on site page load times is of most interest

• July 24th - PWA switch
• July 25th - disabled Google Adsense page level ads
• July 26th - a lot of webpagetest runs and re-tuning of centminmod.com site for page speed including adding some pre-caching to PWA service worker.

First separate break down of overall centminmod.com desktop and mobile site page speed metrics - of interest throughout will be average document content loaded and average page load times as conversion to PWA should improve these quite dramatically



Next is centminmod.com site page speed metrics for Desktop + Mobile + Tablet so all traffic


Now the breakdown by country starting with United States



Then Indonesia and Vietnam



Then India and China



Germany and Russia - Russia had a spike again but early July 27th stats up to 4-5am mark. It could very well be due to centminmod.com doing Cloudflare DNS round robin to 3 USA based locations in Los Angeles, Seattle and New Jersey i.e. Russian visitors hitting further away New Jersey backend origin.


Brazil and Singapore - no traffic yet for July 27th (4-5am)


Australia - no traffic yet for July 27th (4-5am)



As a page speed addict, there will certainly be more tuning and optimisations - so lets see how things go over the long term. Especially in terms of Google PageSpeed Insight origin stats derived from CruX - Chrome User Experience Reports which get updated daily based on rolling monthly average

 

Looks like Facebook is also converting it's mobile app to PWA version Facebook is testing a proper Progressive Web App for its mobile website

 

Guess which centmin mod site is getting the PWA conversion treatment eventually

I've setup a custom Xenforo usergroup which has the PWA enabled version of the forums configured so can test privately - excluding general visitors/members from PWA enabled version for now. If any forum member wants to help me test PWA enabled version of this forum, contact me via private conversation message and I'll add your member account to the PWA enabled usergroup as well

 

Looking good so far for this forum's PWA conversion



Both Centmin Mod site and forum's PWA app will have it's own app window so has it's own app history separate from Chrome app.

Samsung Galaxy S7 app history

 

Using my Samsung Galaxy Tab S 8.4 LTE tablet for remote Chrome developer tools network debugging of centminmod.com PWA site. You can see with service worker caching the dom content loaded and load time over network is very fast at 504ms and 680ms respectively.



And in offline mode, dom content loaded and load time without internet connectivity loaded centminmod.com site at 626ms and 751ms respectively. Both very fast times compared to without PWA and service worker caching



Compared to without PWA and service worker caching but using standard Chrome browser level caching resulted in dom content loaded and load time at 913ms and 1.09s (1090ms) respectively



PWA with service worker cache/preaching resulted in dom content loaded times being 44.8% faster at 504ms vs 913ms and load time being 37.6% faster at 680ms vs 1090ms

 

Forum PWA User Preference Option Added

Update for this forum's PWA conversion and testing. Instead of enabling PWA at the XF usergroup level, I have made a new forum User Preference Checkbox Option. 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.

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

 

Checking in on my centminmod.com site PWA conversion's page speed improvements. Looking very good comparing before PWA conversion versus after PWA conversion

Google Analytics segment for PWA is for only pages loaded within native 'Add To Home Screen' launched browsing.

• All Users - 55.14% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
• Desktop - 51.58% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
• Mobile - 69.6% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
• PWA - 53.5% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads than All Users

before PWA conversion July 1 - 23, 2018



after PWA conversion July 24 - 29, 2018



Just drilling down for China based traffic shows huge improvements in page load speed after PWA conversion





Another way to view before and after stats is to focus just on frequent user sessions which have more than 2 pageviews per session

• All Users - 48.7% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
• Desktop - 41.1% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
• Mobile - 70% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads
• PWA - 41.9% faster Average Page Load Time after PWA conversion + disable Google Adsense page level ads than All Users

frequent user sessions before PWA conversion July 1 - 23, 2018



frequent user sessions after PWA conversion July 24 - 29, 2018



If you haven't guessed it yet, I love my numbers/stats. So here's more before and after stats taken from my Google Data Studio reports based on Google Analytic numbers. Breakdown of before and after sub-continent average document loaded and average page load times

before PWA conversion July 1 - 23, 2018



after PWA conversion July 24, 2018

 

Added an explanation of PWA and service workers and why they can improve page load speed and performance at Added Forum PWA Mode For Page Speed Improvements.

 

Yup, I did all the work myself Still learning as I go

 

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.

 

Highly doubt it. Probably something I'd offer to my paying clients eventually though. But not there yet, still learning and lots to do