Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 6 of 6 total
Thread PWA Builder
Mon, Mar 25 2019 4:04 PMPermanent Link

KimHJ

Comca Systems, Inc

Have anyone used the PWA to create a mobile from a EWB code.

I went online and and tried and it gave me some requirements that I'm not 100% will work with EWB.

It ask me to create a Offline Service worker and gave me this code and I understand that I need to add it to the html page.

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Would it be OK to add it here?


// This is the "Offline page" service worker

// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker

// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
 if (navigator.serviceWorker.controller) {
   console.log("[PWA Builder] active service worker found, no need to register");
 } else {
   // Register the service worker
   navigator.serviceWorker
     .register("pwabuilder-sw.js", {
       scope: "./"
     })
     .then(function (reg) {
       console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
     });
 }
}



The next I'm a little confused about, do I need to create a a file with HTML extension and call it i.e.: offline.html?

// This is the "Offline page" service worker

const CACHE = "pwabuilder-page";

// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "ToDo-replace-this-name.html";

// Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener("install", function (event) {
 console.log("[PWA Builder] Install Event processing");

 event.waitUntil(
   caches.open(CACHE).then(function (cache) {
     console.log("[PWA Builder] Cached offline page during install");

     if (offlineFallbackPage === "ToDo-replace-this-name.html") {
       return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
     }

     return cache.add(offlineFallbackPage);
   })
 );
});

// If any fetch fails, it will show the offline page.
self.addEventListener("fetch", function (event) {
 if (event.request.method !== "GET") return;

 event.respondWith(
   fetch(event.request).catch(function (error) {
     // The following validates that the request was for a navigation to a new document
     if (
       event.request.destination !== "document" ||
       event.request.mode !== "navigate"
     ) {
       return;
     }

     console.error("[PWA Builder] Network request Failed. Serving offline page " + error);
     return caches.open(CACHE).then(function (cache) {
       return cache.match(offlineFallbackPage);
     });
   })
 );
});

// This is an event that can be fired from your page to tell the SW to update the offline page
self.addEventListener("refreshOffline", function () {
 const offlinePageRequest = new Request(offlineFallbackPage);

 return fetch(offlineFallbackPage).then(function (response) {
   return caches.open(CACHE).then(function (cache) {
     console.log("[PWA Builder] Offline page updated from refreshOffline event: " + response.url);
     return cache.put(offlinePageRequest, response);
   });
 });
});



Thanks for any help.
Kim
Mon, Feb 8 2021 10:40 PMPermanent Link

erickengelke

Avatar

KimHJ wrote:

> Have anyone used the PWA to create a mobile from a EWB code.

I didn't find it successful.  Instead I used the following.

I've made a prototype PWA that seems to work, I can add it to my Chrome home screen.... but it's not pretty and not all EWB yet, I didn't have time to convert everything to Pascal.

see   https://www.erickengelke.com/pwa.   for a sample.

There were a lot of steps:

First, you need a .htaccess file to force HTTPS.  Google is your friend.  

Then I threw in some pure JavaScript to get it done, though you could do it with EWB non-gui for your service worker.  See sw.js for the service worker.

I had to edit EWB's index.html by hand, the first few lines of the header are mine.

And I used TScript to load a short Javascript loadjs.js file which interfaces to the system on capable browsers.

Those are the steps I remember.  Chrome's lighthouse helped find some bugs.

I'm not sure where it's getting the name (it defaults to "https" as the name).

The JavaScript I used required the async/await code, which EWB does not support unless you hand-edit the resulting .js file.

There's a lot of steps to go wrong.  So I hope my explanation helps, but no guarantees it will work.

Good luck,
Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Tue, Feb 9 2021 8:12 AMPermanent Link

erickengelke

Avatar

erickengelke wrote:

> I've made a prototype PWA that seems to work, I can add it to my Chrome home screen.... but it's not pretty and not > all EWB yet, I didn't have time to convert everything to Pascal.

The PWA application easily adds to my Android phone.  This technology will replace the need for Cordova I think with one image for Android and iOS and Chrome/Edge.

Other than adding a TScript to my EWB app, and hand editing the Head section, there were absolutely no coding changes to the stock EWB program, as I did the rest in pure JavaScript for now.

You could put in code to add a "Install Locally" button, but I didn't do that.

There really is a lot of conflicting information and instructions on the Web that don't seem to work in Chrome/Android in 2021 so it took longer than I had hoped.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
Fri, Feb 12 2021 12:43 PMPermanent Link

erickengelke

Avatar

erickengelke wrote:

erickengelke wrote:
> There really is a lot of conflicting information and instructions on the Web that don't seem to work in
> Chrome/Android in 2021 so it took longer than I had hoped.

I guess I'll add one more pointer for someone struggling to make this work.

To me, the hardest part of the whole PWA process seems to be dealing with the cache.  

While testing, think your change your files on the Server but it doesn't fix your cached copies, even after you may have thought you cleared the cache.  This can drive you nuts and you might make wrong changes based on the belief that what changes you just tried didn't work - when it fact it was caching that screwed you up.

Someday when Tim somehow finds he has time to get around to adding support for PWAs, EWB should be ahead of the game because the EWB compiler already knows the list of all the file "assets" and could build the list needed for the caching.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com
EWB Programming Books and Component Library
http://www.erickengelke.com
Thu, Feb 25 2021 5:02 PMPermanent Link

KimHJ

Comca Systems, Inc

erickengelke wrote:

>>I guess I'll add one more pointer for someone struggling to make this work.

To me, the hardest part of the whole PWA process seems to be dealing with the cache.  <<

Thanks Erick,

I had the same problem.

Kim
Tue, Apr 6 2021 11:22 AMPermanent Link

Trinione

PWA support is crucial.

Also, proper Touch functionality. For example, even using the samples on the website once cannot touch/zoom the photos.

Drag 'n drop also needed.

Users expect these things with Modern UIs and one can quickly lose out when they are absent.

........................................................
PascalNetwork.com
pascal - the language we love
Image