![]() | ![]() Products ![]() ![]() ![]() ![]() |
Home » Technical Support » Elevate Web Builder Technical Support » Support Forums » Elevate Web Builder General » View Thread |
Messages 1 to 6 of 6 total |
![]() |
Mon, Mar 25 2019 4:04 PM | Permanent 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 PM | Permanent Link |
erickengelke | 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 AM | Permanent Link |
erickengelke | 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 PM | Permanent Link |
erickengelke | 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 PM | Permanent 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 AM | Permanent 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 |
This web page was last updated on Saturday, May 4, 2024 at 12:54 AM | Privacy Policy![]() © 2024 Elevate Software, Inc. All Rights Reserved Questions or comments ? ![]() |