vincentmorneau / apex-pwa Goto Github PK
View Code? Open in Web Editor NEWA complete guide for turning an APEX application into a Progressive Web App
License: MIT License
A complete guide for turning an APEX application into a Progressive Web App
License: MIT License
Hi Vincent
I have only one step to finish this journey, so please help.
This your desciption is great, and it works for all the subscribers.
I've made a small changes on pushnotification.js, and now works well for the specific user, when i copy endpoint, auth and p256dh from Firebase and then use those data in my SQL Developer like this:
/***/
declare
l_rest_return clob;
l_endpoint VARCHAR2(2000);
l_auth VARCHAR2(2000);
l_p256dh VARCHAR2(2000);
l_title VARCHAR2(2000);
l_body VARCHAR2(2000);
l_values VARCHAR2(4000);
begin
l_endpoint := 'someEndpointFromFirebase';
l_auth := 'someAuthFromFirebase';
l_p256dh := 'someP256dhFromFirebase';
l_title := 'Title';
l_body := 'Body';
l_values := l_endpoint||','||l_auth||','||l_p256dh||','||l_title||','||l_body;
l_rest_return := apex_web_service.make_rest_request(
p_url => 'http://myserver:3057/push' -- My custom REST endpoint (1)
, p_http_method => 'GET'
, p_parm_name => apex_util.string_to_table('endpoint:auth:p256dh:title:body') -- Notification structure (2)
, p_parm_value => apex_util.string_to_table(l_values,',') -- Notification Content (3)
);
end;
/***/
But I don't know how to get those data and insert them in my oracle table, at the moment when user click on button "Enable notifications".
Without that, notifications doesnt have to much sense. I believe that I must do something in the part of the app.js, that I send as an attachment.
So, to resume, my question is
Hi Vincent,
When i try to run your demo on my Iphone the buttons to install application and allow notification disappear?
It works fine on my desktop
Thank you in advance,
Kerry
Good day,
I setup everything in the guide for Push Notification , I used the sample pl/sql script:
declare
l_rest_return clob;
begin
l_rest_return := apex_web_service.make_rest_request(
p_url => 'https://localhost:3050/push' -- My custom REST endpoint (1)
, p_http_method => 'GET'
, p_parm_name => apex_util.string_to_table('title:body') -- Notification structure (2)
, p_parm_value => apex_util.string_to_table('Hey you:Go back to APEX now!') -- Notification Content (3)
);
end;
And get the following error:
Error report -
ORA-29273: HTTP request failed
ORA-06512: at "SYS.UTL_HTTP", line 1130
ORA-29259: end-of-input reached
ORA-06512: at "APEX_180200.WWV_FLOW_WEB_SERVICES", line 1017
ORA-06512: at "APEX_180200.WWV_FLOW_WEB_SERVICES", line 1523
ORA-06512: at "APEX_180200.WWV_FLOW_WEBSERVICES_API", line 369
ORA-06512: at line 4
29273. 00000 - "HTTP request failed"
*Cause: The UTL_HTTP package failed to execute the HTTP request.
*Action: Use get_detailed_sqlerrm to check the detailed error message.
Fix the error and retry the HTTP request.
Please help me to solve this issue.
Regards
Hi Vincent,
Please can you help me and advise where i have gone wrong.
I am getting the below error message when trying to send a push notification
sw.js:210 Uncaught (in promise) SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse ()
at pushSW (sw.js:210)
at sw.js:47
Thank you in advanced
Kerry
Vincent,
can you gave us some explanation or tip how to send notification to specific user or group of users? Using this code in sql developer, everyone receive notification...
Thank you
Hi, In our company we have one server with APEX and we want to implement this great (!) future. Is it possible to serve multiple manifests for different apps? How to achieve it?
APEX 18.2 on Tomcat on Linux
ORDS 18.4.0.r3541002
Dear Vincent,
Thanks a lot for this very clear explication. But in part 2 I have an other question. Is it possible to explain more deeply how to reach the root directory to write the ws file.
I seach since a week with Oracle Developper Tools, throught out my APEX management pages, and with FTP connexion, but without any success.
Please put me "on the road" !
Best regards.
Lionel
Hallo Vincent,
I followed your great complete Guide about PWA and could put manifest.json and sw.js in my local system under
/webapps/ROOT in Tomcat. It worked great. Now I would like to do it in OXAR(https://github.com/OraOpenSource/OXAR) too. I would like to know where to put manifest.json and sw.js in OXAR.
Regards
Pierre
Not really an expert here so be easy on me.
I'm following your guide but i'm not able to find the manifest.json.
We are using Tomcat (Nginx as reverse proxy, oracle linux 7.5) , and tried multiple locations such as:
/var/lib/tomcat/webapps
/var/lib/tomcat/webapps/ords
furthermore for now we are using http instead of https (may that be the issue?).
I have tried different ways but I 'm out of options, if u could point me in a new (correct) direction it would be much appreciated.
(Also tried a it on a different server with ORDS standalone, same error (also HTTP....))
Tnx in advance,
Jan
Hi Vincent,
Is it possible to put the manifest.json and sw.js on a seperate proxy server which forwards all requests to the ORDS?
Problem is, that I can't put any files in the root directory due to company restrictions but I would love to implement some PWA features.
Thanks
What apex version is needed in order to install the demo app? I have 5.1.4.00.08, and I receive a "NOT_COMPATIBLE" message when trying to install.
Hi Vincent
I am hosting my App on one of APEX Hosting companies. I have bought a domain from them (Let's say https://mydomain.com) They gave me FTP Access to public_html
I have followed your nice guide. Now, I have the following files in public_html:
My APEX App URL is
https://mydomain.com/ords/f?p=myAppID
Regarding the file locations, am I going at the right way?
// THESE FILES (sw.js and manifest.json)
// HAVE TO BE SERVED FROM ORDS DOC ROOT. MORE INFO:
// https://github.com/vincentmorneau/apex-pwa/blob/master/doc/part2.md
Regards
Mahmoud
i have the problem when people goes to the wood need a) to have the last data from the db apex system in the tablets so they go and lost the conection but have the last names and info, b) the takes notes or modify this data, come back to the office and this info will syck ?, to make the pwa got a big troubles i am new on this platform and far away to have installed ords, but with tomcat i find many issues like glash fish etc i advance but for example where do i get c) manifest.json and sw.js where what produces these twoo files??, by the moment this issues please :( i am sick and i need to work even when i write i feel pain .
He i got another link where of course i get the question manifest y sw now maybe some one can confirm me the a) and b) :D
Hi there
We are using multiple databases. On some Instances with with weblogic, otehrs with tomcat.
Our URL looks like that https://servername:PORT/ords/DB-SID/f?p=APP_ID
"they need to be at the root level of your APEX environment"
where now is that? after ../ORDS/here or after ../ORDS/DB-SID/here?
We have no standalone-Config, any Idea where to find this doc_root-Parameter?
Using ORDS 19.4 on a weblogic (mostly)
Vincent,
I was inspired by your blog post to make my apex app to be PWA. Mostly because of notifications. And I think I've done everything correctly, until the part 7, "Setting up the REST Endpoint".
I've followed all your instructions, create pushNotifications.js and change all the things from my Firebase account you mentioned, and create firebase.json by clicking on "generate new private key".
Then on my app server, I've execute first command "npm install" and everything was ok. But when I execute "node pushNotification.js" I'm receiving following error:
"module.js:478
throw err;
^
Error: Cannot find module 'firebase-admin'
at Function.Module._resolveFilename (module.js:476:15)
...
...
"
My firebase.json doesn't have anything that you have in your package.json file (firebase-admin, express, web-push... and other dependencies).
I don't understand how to get that file and how to deploy it.
Please help and thanks in advanced!
Hi Vincent,
I have requirement that my apex app also should run offline.
I came to know about Service workers , but don't how to implement
I would love to implement some PWA features.
Thanks
Hi Vincent,
We have made some progress since our last ticket (#11) but unfortunately we haven’t been able to get your demo working.
We did multiple clean installs of ORDS (18.2) on a new server (Windows Server 2016), trying both HTTPS and HTTP. We installed your demo app and followed your guide.
Manifest.json is found
Service worker is not found using Chrome (build 71.0.3578.98) but is found using Firefox (64.0.2).
Continuing on firefox:
If we press the install button (not visible by default so we manually adjusted visibility by editing the HTML/CSS directly). We get the following error-->
Also on chrome -->
We assume it has something to do with the fact that installation criteria haven’t been met (hence the button being invisible?). But since our service worker is seemingly working, the manifest has been found and we tried both http and https on localhost, we’re running out of ideas.
We haven’t tried using a valid SSL certificate, only self-signed ones, but shouldn’t it be able to work on localhost as that is considered a trusted source? For the sake of being complete, we also adjusted Chrome security flags to see if that helped, which it didn’t.
// This event will be triggered after installation criteria are met
window.addEventListener('beforeinstallprompt', function (event) {
// Stop the automatic installation prompt
event.preventDefault();
// Store the event in a global variable so it can be triggered later
installPrompt = event;
// Controls the display (hide and show) of the PWA buttons
pwa.ui.refresh();
});
If u could help it would be much appreciated
Good Day,
im very excited to get test out your push notifications.
I wanted to ask how can i register my my sw.js file?,If i uploaded it to my applications shared components?
i tried .register('#APP_IMAGES.sw.js') , but i am getting an error "Service worker failed to register. DOMException"
I do not have any access to root files.
Thank you for your help in advanced.
Thanks,
Kerry
Did anyone succeed on having a PWA a the ATP instance? Any help on where to allocate the manifest.json would be much appreciated!!
hey vincend,
i've placed the file sw.js and manifest.json in the root folder of my environment, but when i click on the install or notification button i got the error:
Uncaught ReferenceError: pwa is not defined
at <anonymous>:1:1
andd the console shows me:
in your demo-app i can see there is loading much more javascript than in my application with your imported static-files
did i forgot something? why the app.min.js would not be called?
Importing the localForage script in the sw.js file causes a "TypeError: RangeError: Maximum call stack size exceeded." error to be thrown in Safari on iPadOS 13 and in chrome on MacOS 10.14.5. In safari on MacOS the error is not thrown and the service worker installs properly.
If the import line is removed from sw.js it installs in chrome and on the iPad, but then loses the functionality provided by localForage.
I have also tried using the latest distribution version of localForage (1.7.3 vs the 1.7.1 currently used here) with the same results.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.