Results 1 to 3 of 3

Thread: PWA sw-precache reload workaround

  1. #1
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1
    Vote Rating
    9
      0  

    Default PWA sw-precache reload workaround

    Hi,
    I'm using ExtJS 6.5.1 modern with PWA configuration (https://www.sencha.com/blog/creating...sencha-ext-js/) only for static resources, no caching fo ajax responses.
    The sw-precache uses a cache-first strategy and I'm having the same issue described here: https://github.com/PolymerElements/p...kit/issues/806
    To keep it short: whenever I do a new build (and deploy) I need to reload the page twice in order to see the changes.

  2. #2
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1
    Vote Rating
    9
      0  

    Default

    It looks like there are two solutions:
    1) force sw-precache to be network-first (losing the benefits of a fast app load)
    2) find a way to notify user that a new application version is available, and therefore a reload is required

    The second option is IMO the most interesting, but the code that handles the service worker registration is inside the framework.
    After some investigation I found out that I can use "getRegistration" method (https://developer.mozilla.org/en-US/...etRegistration) to get the current service worker registration inside the "launch" method of my Ext.app.Application:

    Code:
    initProductionBuild() {
        const self = this;
        if (navigator.serviceWorker &&
            navigator.serviceWorker.getRegistration) {
            navigator.serviceWorker.getRegistration().then(reg => {
                reg.onupdatefound = function () {
                    // The updatefound event implies that reg.installing is set; see https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
                    const installingWorker = reg.installing;
                    installingWorker.onstatechange = function () {
                        if (installingWorker.state === 'installed' &&
                            navigator.serviceWorker.controller) {
                            // At this point, the old content will have been purged and the fresh content will
                            // have been added to the cache.
                            // It's the perfect time to display a "New content is available; please refresh."
                            self.onPwaUpdate();
                        }
                    };
                };
            });
        }
    },
    
    
    onPwaUpdate() {
        Ext.Msg.alert(
            "Update",
            "Update required",
            (buttonId) => {
                if (buttonId === 'ok') {
                    window.location.reload();
                }
            },
            this
        );
    }
    This is working right now, after a new build/deploy the application shows the alert and after reload the application is updated as expected.
    I think the service worker registration should be updated and follow this pattern https://github.com/GoogleChrome/sw-p...egistration.js in order to define some methods in our Application.js (or somewhere else) that match service worker states.

    Thanks,
    Marco

  3. #3
    Sencha User mcelotti's Avatar
    Join Date
    Nov 2013
    Posts
    82
    Answers
    1
    Vote Rating
    9
      0  

    Default

    Update: the correct way to detect updates should focus on "redundant" state, ie:

    Code:
    initProductionBuild() {
        const self = this;
        if (navigator.serviceWorker &&
            navigator.serviceWorker.controller) {
            navigator.serviceWorker.controller.onstatechange = function (event) {
                if (event.target.state === 'redundant') {
                    self.onPWAupdate();
                }
            };
        }
    }

Similar Threads

  1. Reload Extjs module without full-reload page.
    By thanhnambkhn in forum Ext: Q&A
    Replies: 2
    Last Post: 29 Mar 2017, 1:14 AM
  2. Workaround for a bug in ext 3.4.1.1 Ext.dd.DragDropMgr
    By pegaso52it in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 7 Jan 2014, 4:25 AM
  3. strange behavior offline app ; load from bookmark vs reload with reload button
    By dschano in forum Sencha Architect 2.x: Help & Discussions
    Replies: 0
    Last Post: 20 Sep 2012, 6:31 AM
  4. MessageBox when server unavailable - precache images?
    By bdurette in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 6 Aug 2007, 2:17 PM
  5. [Solved] Gaining Confidence :: ds.reload & Reload of Paging Footer?
    By cluettr in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 4 Jul 2007, 11:34 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •