Pwa offline don't work

WEB TMS WEB Core
1

This is serviceworker.js deployed :

var CACHE_NAME = "WM_Wapp";
var CACHED_URLS = [
  "Manifest.json",
  "index.html",
  "Account_IE.divPwd.btShowPwd.Glyph.bmp",
  "Account_IE.html",
  "Account_IE.pnlTop.imgLogo.Picture.png",
  "images/Login.jpg",
  "images/Menu.jpg",
  "images/Sfondo.jpg",
  "Impost.html",
  "Impostazioni.json",
  "InputBox.html",
  "Languages/Italiano.json",
  "Login.grdLogin.btCommonUser.Glyph.png",
  "Login.html",
  "MacMan.bmpContainer.Items.Bitmap.png",
  "MacMan.bmpContainer.Items.Bitmap_1.png",
  "MacMan.bmpContainer.Items.Bitmap_2.png",
  "MacMan.html",
  "MacMan.msgWait.Picture.gif",
  "MacMan.pnlPiede.btGoBack.Glyph.png",
  "MacMan.pnlPiede.btMonMac.Glyph.png",
  "Main.html",
  "Main.msgWait.Picture.gif",
  "Main.pnlTop.btMenu.Glyph.png",
  "Renderlib/Bootstrap5/css/bootstrap.min.css",
  "Renderlib/Bootstrap5/js/bootstrap.bundle.min.js",
  "Renderlib/Custom/custom.css",
  "Renderlib/TMS/TWebCalendar.css",
  "Renderlib/TMS/TWebCalendar.js",
  "WM_Wapp.js"
  ];


if ('serviceWorker' in navigator) {
  caches.keys().then(function(CACHED_URLS) {
    CACHED_URLS.forEach(function(CACHE_NAME) {
      caches.delete(CACHE_NAME);
    });
  });
}

self.addEventListener('install', function(event) {
                event.waitUntil(
                                caches.open(CACHE_NAME).then(function(cache) {
                                return cache.addAll(CACHED_URLS);
                })
                                );
});

self.addEventListener('fetch',function(event) {
   event.respondWith(
     fetch(event.request).catch(function() {
                   return caches.match(event.request).then(function(response) {
       if (response) {
                                   return response;
       } else if (event.request.headers.get("accept").includes("text/html")) {
                                   return caches.match("index.html");
                   }
                   });
   })
                   );
});

NOTE : I added "Manifest.json" to list because IDE not include it automatically and the instructions to clear cache before updating : caches.delete(CACHE_NAME);
But all files in the list want start as ./ ?

Manifest deployed :

{
   "short_name":"OsmoPlus",
   "name":"Osmositec Plus",
   "description":"Osmositec Purifier Control",
   "start_url":"index.html",
   "display":"fullscreen",
   "theme_color":"#FFFFFF",
   "background_color":"#FFFFFF",
   "icons":
   [
    {
      "src": "IconResLow.png",
      "type": "image/png",
      "sizes": "64x64"
    },
    {
      "src": "IconResMid.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "IconResHigh.png",
      "type": "image/png",
      "sizes": "512x512"
    }
   ]
}

"start_url":"index.html" is rigth ? or "start_url":"./index.html",

This is my WECore project : note at rigth the file included in the project

image
image744×513 143 KB

This is the index.html deployed : note row 12 word manifest is produced without “”, is rigth ?

image
image510×521 133 KB

At the end if i run application offline this is the error :

image
image1004×565 118 KB

The main error is : “the rtl is not defined” : because serviceworker.js or WM_Wapp.js is not loaded in offline ?

If you want to see that app on line please click here : BLUSIMP by Water Monitor

Try to install it and execute offline

NB : i can send you all project if need

Thank you

2

Guido, I see that the file in your project list is Serviceworker.js, while the file internally looks for servioeworker. Javascript names are case sensitive. That is a bug that I found when setting up my PWA.

3

yes its true, i discovered also the images IconResHigh,Low and Mid are not included in serviceworker even if included in project, the Manifest too. I done this :

var CACHED_URLS = [
"Manifest.json",
"IconResHigh.png",
"IconResLow.png",
"IconResMid.png",
"$(ProjectHTML)",
$(FileList)
];

4

My point is that you need to change your file's name from Serviceworker.js to serviceworker.js (i.e., all lowercase) so that Javascript will recognize it.

5

sure at the end i done it :)
ATTENTION : never "serviceworker.js?v=2" is accepted !!

Thank you

6

Serviceworker caching support was already adapted for v2.2
I suggest to check v.2.2 beta 1.

Wrt online/offline, we expose the browser API that reports this. Beyond what the browser API reports, we have at this moment not an alternative way to expose online/offline state.

7

Serviceworker caching support was already adapted for v2.2
i used the serviceworker template of your sample PWA. It's correct ? there is a better template that this ?

8

You use v2.2 beta?

9

sicerely i don't known. i use this :

var CACHE_NAME = "$(ProjectName)";
var CACHED_URLS = [
  "Manifest.json",
  "IconResHigh.png",
  "IconResLow.png",
  "IconResMid.png",
  "$(ProjectHTML)",
  $(FileList)
  ];


self.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open(CACHE_NAME).then(function(cache) {
       return cache.addAll(CACHED_URLS);
     })
   );
});

self.addEventListener('fetch',function(event) {
   event.respondWith(
     fetch(event.request).catch(function() {
       return caches.match(event.request).then(function(response) {
         if (response) {
           return response;
         }else if (event.request.headers.get("accept").includes("text/html")) {
           return caches.match("$(ProjectHTML)");
         }

       });
     })
   );
});
10

The version is shown under IDE Help, About TMS WEB Core

11

sorry i mistake, i installed webcore 2.1.2

12

Then please try with v2.2 as we did improvements in this area in v2.2

13

i will try it. thx

14

I'm reluctant to install the "beta". When will 2.2 be released to production?

15

We aim for later this month.