How to build it?

[Nic2012]

Hi, I would like to get an Angular-Seed project (v7.2 with Gulp 3.9 and Typescript) offline capable.

In package.json I can see a build target that compiles a lot of js files... index.js, index.mjs, index.umd.js into window build subfolder, but which one do I have to integrate in my Project? Whats the differences between them?

And what do you mean in the readme by "Installation"? Do we have to build it at first by npm run build und install the result afterwards in our Project by npm install --save-dev ...?

Thank you for providing this project and best regards, Nic

[jeffposnick]

If you have a new project that doesn't already have offline capabilities via AppCache, I would strongly suggest that you do not attempt to add them by using sw-appcache-behavior.

Instead, use a service worker directly. There's more info at:

• https://angular.io/guide/service-worker-config (for Angular-specific service worker tooling)
• https://developers.google.com/web/tools/workbox/ (for generic service worker tooling that can also work with Angular)
• https://web.dev/offline-cookbook/ (for "vanilla"service worker recipes, without using special tooling)

[Nic2012]

Thanks for your answer, but this is not the case, this Angular Project is not new it was solved by using the deprecated AppCache. I thought your Projects helps to migrate to service worker?

[jeffposnick]

Sorry, I misinterpreted your request.

You don't have to build anything to use this project, as all of the runtime code is published to npm and can be used via CDNs that mirror npm.

The usage examples at https://github.com/GoogleChromeLabs/sw-appcache-behavior#usage can be followed with, e.g. the UNPKG CDN with the following URLs:

• https://unpkg.com/appcache-polyfill-window@0.3.0/build/index.modern.js
• https://unpkg.com/appcache-polyfill-sw@0.3.0/build/index.umd.js

[Nic2012]

No problem, now I have integrated both libs into my project, on win client side the code works fine. Its nearly the same as y mentioned in https://github.com/GoogleChromeLabs/sw-appcache-behavior#usage, but for the moment in the index.html of my Angular project. After startup the application I can see the files declared in manifest file can be found now in Cache Storage (Dev Tools in Chrome)

But when I set Network mode to offline also in Dev tools and pushes F5 refreshing the page nothing will be fetched via service worker. Is there any changes in code needed that the fetch event is triggered in service worker code? I was expecting that the code with "event.respondWith(appcachePolyfill.handle(event))" will be fired, too, or I am wrong?

BTW I am using the old version 0.1.0, because latest versions cannot be installed on my Win10 machine, but for this I create new ticket.

[jeffposnick]

It might be that the service worker is installed, but not in control of your current page: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#clientsclaim

What happens if you close the tab, then revisit the page, and then go offline? Do you see the fetch events firing in that case?

[Nic2012]

After revisit the page, service worker (SW) triggered install and activate events, I can see SW in Dev tools, but no fetch event.

But I can see no clients related in activate event:

After going offline (via tab Network) do I have to refresh again or doing interaction on page?

[Nic2012]

clients.claim() inside the activate Event makes no difference.

[jeffposnick]

I can't tell from your screenshots what URL the service worker script is being served from, but another issue that can sometimes lead to confusion is if your service worker script is located at a subsection of your site, like /scripts/sw_appcache.mjs, in which case the default scope for the service worker would be /scripts/, and only client pages that were also served from /scripts/ would be controlled.

Can you share a link to your deployed site where I can reproduce this issue? That might help debug things quicker.

[Nic2012]

Yes it seems to be an issue with the scope, I was shortly able to receiving some fetch events when service worker code is located on root where also the Angular main app code will be running. But the project is a bit outdated bundled with old technology that caused during runtime a lot of exception with es6 compiler etc. That needs to be adjusted first.