Posts by Harald Schneider

Hi David

I found an example how to use an AB Script function return code in JS here in the forum. What about the other way around?

Is it possible to use the return value of a JS Custom Function in an AB Script?

Thanks for the hint. I tried with the square brackets before, but the problem was, that the var was empty. I tapped into my own pit .. :-/

Thanks! :-)

Can I display a variable's content inside a HTML control? E.g.

<span>{{myVariable}}</span>

Sorry, I missed the latest release. You code faster, than I can write posts here :-) THANK YOU!

Really, really awesome job with the new Electron platform :-)

Can we have this for the Mac, too ? It just requires AB to generate the proper build scripts. I have tested it and it works out of the box!

Here an example of the release script. There is just one special thing: The permissions of the app-builder need to be executable - see 1st line.

chmod +x node_modules/app-builder-bin/mac/app-builder cordova platform add electron cordova plugin add cordova-plugin-whitelist cordova plugin add cordova-plugin-device cordova plugin add cordova-plugin-network-information cordova plugin add cordova-plugin-dialogs cordova plugin add cordova-plugin-inappbrowser cordova build electron --release

Not in my case. I keep data on the Mac's side. Here I use a small script which fixes permissions and does the build and copy job.

If I would be a pure Windows user, I would prefer one of the other options. That's what I like on AB - it allows flexible solutions for most problems :-)

Absolutely :-)

It is OK for me. It is just 1 line more in the build script, which copies the file to the www folder. Thanks for your support!

I also tried that without success.

Hi David

The only thing that works, is moving service-worker-global.js via AB Filemanager to app/scripts

Caching breaks, when there are double dots in the offlineFundamentals paths. Furthermore, if we would link service-worker.js vial Filemanager, it would be executed twice: By the generated link in index.html and when the script is registered by the global script:

navigator.serviceWorker.register('service-worker.js')

So at least service-worker.js has to reside in the www folder.

If you put them into www/app, the the the cached URLs are not correctly assembled. Putting them into www just saved me the time to modify the original script ;-)

The scripts have to reside in the www folder to work properly. When I add them via filemanager, they are copied to www/app/...

I digged further into it an successfully implemented the following scripts:

https://css-tricks.com/serviceworker-for-offline/

After this, the app runs fluently, even with a cut network connection. Here is the complete procedure:

Add this to AppOptions/HTML/CustomMetaData:

<script src="service-worker-global.js"></script>

Copy service-worker-global.js to the www folder:

(function() { var allNavItems = $(".main-nav li"); var allTabs = $(".tab"); allNavItems.on("click", function(e) { e.preventDefault(); allNavItems.removeClass("active"); allTabs.removeClass("active"); // this = list item $(this).addClass("active"); var selector = $(this).find("a").attr("href"); $(selector).addClass("active"); }); // ServiceWorker is a progressive technology. Ignore unsupported browsers if ('serviceWorker' in navigator) { console.log('CLIENT: service worker registration in progress.'); navigator.serviceWorker.register('service-worker.js').then(function() { console.log('CLIENT: service worker registration complete.'); }, function() { console.log('CLIENT: service worker registration failure.'); }); } else { console.log('CLIENT: service worker is not supported.'); } })();

Copy service-worker.js also to the www folder

"use strict"; console.log('WORKER: executing.'); var version = 'v2::'; /* These resources will be downloaded and cached by the service worker during the installation process. If any resource fails to be downloaded, then the service worker won't be installed either. */ var offlineFundamentals = [ '', 'app/images/card-info.png', 'app/images/card-news.png', 'app/views/Home.html', 'app/views/Info.html', 'app/views/Impressum.html', 'app/views/Datenschutz.html' ]; self.addEventListener("install", function(event) { console.log('WORKER: install event in progress.'); event.waitUntil( caches .open(version + 'fundamentals') .then(function(cache) { return cache.addAll(offlineFundamentals); }) .then(function() { console.log('WORKER: install completed'); }) ); }); self.addEventListener("fetch", function(event) { console.log('WORKER: fetch event in progress.'); if (event.request.method !== 'GET') { console.log('WORKER: fetch event ignored.', event.request.method, event.request.url); return; } event.respondWith( caches .match(event.request) .then(function(cached) { var networked = fetch(event.request) // We handle the network request with success and failure scenarios. .then(fetchedFromNetwork, unableToResolve) // We should catch errors on the fetchedFromNetwork handler as well. .catch(unableToResolve); /* We return the cached response immediately if there is one, and fall back to waiting on the network as usual. */ console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url); return cached || networked; function fetchedFromNetwork(response) { /* We copy the response before replying to the network request. This is the response that will be stored on the ServiceWorker cache. */ var cacheCopy = response.clone(); console.log('WORKER: fetch response from network.', event.request.url); caches // We open a cache to store the response for this request. .open(version + 'pages') .then(function add(cache) { /* We store the response for this request. It'll later become available to caches.match(event.request) calls, when looking for cached responses. */ cache.put(event.request, cacheCopy); }) .then(function() { console.log('WORKER: fetch response stored in cache.', event.request.url); }); // Return the response so that the promise is settled in fulfillment. return response; } /* When this method is called, it means we were unable to produce a response from either the cache or the network. This is our opportunity to produce a meaningful response even when all else fails. It's the last chance, so you probably want to display a "Service Unavailable" view or a generic error response. */ function unableToResolve () { /* There's a couple of things we can do here. - Test the Accept header and then return one of the `offlineFundamentals` e.g: `return caches.match('/some/cached/image.png')` - You should also consider the origin. It's easier to decide what "unavailable" means for requests against your origins than for requests against a third party, such as an ad provider. - Generate a Response programmaticaly, as shown below, and return that. */ console.log('WORKER: fetch request failed in both cache and network.'); /* Here we're creating a response programmatically. The first parameter is the response body, and the second one defines the options for the response. */ return new Response('<h1>Service Unavailable</h1>', { status: 503, statusText: 'Service Unavailable', headers: new Headers({ 'Content-Type': 'text/html' }) }); } }) ); }); /* The activate event fires after a service worker has been successfully installed. It is most useful when phasing out an older version of a service worker, as at this point you know that the new worker was installed correctly. In this example, we delete old caches that don't match the version in the worker we just finished installing. */ self.addEventListener("activate", function(event) { /* Just like with the install event, event.waitUntil blocks activate on a promise. Activation will fail unless the promise is fulfilled. */ console.log('WORKER: activate event in progress.'); event.waitUntil( caches /* This method returns a promise which will resolve to an array of available cache keys. */ .keys() .then(function (keys) { // We return a promise that settles when all outdated caches are deleted. return Promise.all( keys .filter(function (key) { // Filter by keys that don't start with the latest version prefix. return !key.startsWith(version); }) .map(function (key) { /* Return a promise that's fulfilled when each outdated cache is deleted. */ return caches.delete(key); }) ); }) .then(function() { console.log('WORKER: activate completed.'); }) ); });

Edit the offlineFundamentals array in service-worker.js. It should contain all your views and all image resources. All other dependencies are cached automatically then:

var offlineFundamentals = [ '', 'app/images/card-info.png', 'app/images/card-news.png', 'app/views/Home.html', 'app/views/Info.html', 'app/views/Impressum.html', 'app/views/Datenschutz.html' ];

If everything is OK, you can track the service worker's cache management in the console of e.g. Firefox Dev Edition:

WORKER: fetch event in progress. service-worker.js:62:11 WORKER: fetch event (cached) https://www.marketmix.com/pwa/marketmix/www/app/images/icon.png service-worker.js:103:17 WORKER: fetch response from network. https://www.marketmix.com/pwa/marketmix/www/app/images/icon.png

Hi,

I am still experimenting with PWAs under iOS. Unfortunately, the App does not cache image resources, once the network connection is lost.

I tried to install the Corodva Service Workers plugin, but it throws an error during built - looks like it is outdated and not really usable anymore.

Would it be possible to implement Service Worker's Caching on Angular level?

https://angular.io/guide/service-worker-intro