Learn about Centmin Mod LEMP Stack today
Register Now

JS Progressive Web Apps ?

Discussion in 'Web Development & Web Performance' started by eva2000, Jul 22, 2018.

  1. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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

    http2-pwa-100-01.png

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

    http2-pwa-100-02.png

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

    opera-offline-pwa-01.png

    opera-offline-pwa-03.png

    Browser cache storage

    opera-offline-pwa-02.png

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

    opera-offline-pwa-04.png
     
    Last edited: Jul 22, 2018
  2. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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 :D

    canary-centminmod.com-pwa-24718-01.png
     
  3. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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 :D

    pwa-centminmod-android-chrome-01b.jpg pwa-centminmod-android-chrome-02b.jpg
    pwa-centminmod-android-chrome-03b.jpg
     
  4. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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) :D

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

    From Chrome menu - Install Centmin Mod

    canary-centminmod.com-pwa-25718-01.png

    Clicking it prompts to install Centmin Mod site PWA app

    canary-centminmod.com-pwa-25718-02.png

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

    canary-centminmod.com-pwa-25718-03.png

    Also shows up in Windows 10 menu :)

    canary-centminmod.com-pwa-25718-04.png

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

    canary-centminmod.com-pwa-25718-05.png

    centminmod.com opened up as a native Windows 10 app

    canary-centminmod.com-pwa-25718-06.png
     
    Last edited: Jul 25, 2018
    • Informative Informative x 1
  5. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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 :D

    ga-data-200718-270718-01-desktop-mobile.png

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

    ga-data-200718-270718-01-desktop-mobile2.png
    Now the breakdown by country starting with United States

    ga-data-200718-270718-01-desktop-mobile-usa.png

    Then Indonesia and Vietnam

    ga-data-200718-270718-02-indonesia-vietnam.png

    Then India and China

    ga-data-200718-270718-02-india-china.png

    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.

    ga-data-200718-270718-03-germany-russia.png
    Brazil and Singapore - no traffic yet for July 27th (4-5am)

    ga-data-200718-270718-04-brazil-singapore.png
    Australia - no traffic yet for July 27th (4-5am)

    ga-data-200718-270718-05-australia.png

    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 :)
     
  6. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
  7. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    Guess which centmin mod site is getting the PWA conversion treatment eventually ;) :D

    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 :)

    opera-pwa-cmm-forums-01.png
     
    Last edited: Jul 27, 2018
  8. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    Looking good so far for this forum's PWA conversion

    centminmod-forums-pwa-270718-02-tn.jpg centminmod-forums-pwa-270718-05-tn.jpg

    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

    centminmod-forums-pwa-270718-01-tn.jpg
     
  9. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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.

    tablet-chrome-remote-debugging-280718-02-resized.jpg

    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

    tablet-chrome-remote-debugging-280718-01-resized.jpg

    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

    tablet-chrome-remote-debugging-280718-03-resized.jpg

    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 :D
     
  10. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x

    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.

    centminmod-forums-pwa-preference-option-01.png

    centminmod-forums-pwa-preference-option-01b.png

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

    centminmod-forums-pwa-preference-option-02.png

    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) :D
     
  11. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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

    ga-centminmod.com-290718-before-pwa-01.png

    after PWA conversion July 24 - 29, 2018

    ga-centminmod.com-290718-after-pwa-01.png

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

    ga-centminmod.com-290718-after-pwa-china-01.png
    ga-centminmod.com-290718-after-pwa-china-02.png
    ga-centminmod.com-290718-after-pwa-china-03.png

    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

    ga-centminmod.com-290718-frequent-before-pwa-01.png

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

    ga-centminmod.com-290718-frequent-after-pwa-01.png

    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

    g-datastudio-centminmod.com-before-01.png

    after PWA conversion July 24, 2018

    g-datastudio-centminmod.com-after-01.png
     
    Last edited: Jul 29, 2018
  12. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
  13. Revenge

    Revenge Active Member

    412
    86
    28
    Feb 21, 2016
    Portugal
    Ratings:
    +304
    Local Time:
    8:21 PM
    1.9.x
    10.1.x
    You installed a xenforo pwa plugin, or you did all the work?
     
  14. rdan

    rdan Premium Member Premium Member

    4,308
    1,044
    113
    May 25, 2014
    Ratings:
    +1,504
    Local Time:
    3:21 AM
    Mainline
    10.2
    (y) I think.
     
    • Agree Agree x 1
  15. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    Yup, I did all the work myself :D Still learning as I go :)
     
  16. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    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.
    xenforo-enable-pwa-checkbox-300718-01.png
    xenforo-enable-pwa-checkbox-300718-02.png

    unregister-service-worker-01.png

    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.
     
    Last edited: Jul 30, 2018
  17. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x

    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 :)

    disable-pwa-02.png

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

    Revenge Active Member

    412
    86
    28
    Feb 21, 2016
    Portugal
    Ratings:
    +304
    Local Time:
    8:21 PM
    1.9.x
    10.1.x
    Eva, will you make a tutorial for this? :whistle:
     
    • Agree Agree x 1
  19. ArisC

    ArisC Active Member

    113
    27
    28
    Jun 1, 2017
    Ratings:
    +52
    Local Time:
    10:21 PM
    Nginx Latest
    MariaDB Latest
    Hah :whistle:
     
  20. eva2000

    eva2000 Administrator Staff Member

    36,387
    7,992
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,304
    Local Time:
    5:21 AM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    Highly doubt it. Probably something I'd offer to my paying clients eventually though. But not there yet, still learning and lots to do :)
     
..