GithubHelp home page GithubHelp logo

vincentmorneau / apex-pwa Goto Github PK

View Code? Open in Web Editor NEW
82.0 82.0 27.0 36.83 MB

A complete guide for turning an APEX application into a Progressive Web App

License: MIT License

JavaScript 0.84% CSS 0.01% SQLPL 99.16%

apex-pwa's People

Contributors

vincentmorneau avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

apex-pwa's Issues

Endpoint, auth and p256dh in oracle table

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

  • How can i get endpoint, auth and p256dh at the moment when user alow notifications and then insert those data in oracle table?
    Thanks a lot!
    pitanje

Install demo on mobile device

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

Testing Push Notification

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

Send a Push Notification

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

Multiple PWA apps on same server

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

How to write WS file on root directory ?

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

Where to put manifest.json and sw.js with Tomcat

Not really an expert here so be easy on me.

screen shot 2019-01-04 at 14 38 01

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

sw.js file required authentication

image

image

image

image

Change Firebase Details As per Your Instruction And Upload it on Apex Application Static Files.

issue:
when Run Your Demo App in Apex 19.1 Then Above Issue is Occurs.

Static files on proxy server

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

Demo app apex version

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.

sw.js and manifest.json

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

dummy questions.

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

Where is my root? to put sw.js

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)

Push notification, installing on server (node pushNotification.js)

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!

Installation criteria are not met / prompt is undefined

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

image

Service worker is not found using Chrome (build 71.0.3578.98) but is found using Firefox (64.0.2).

image

image

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-->

image

Also on chrome -->

image

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

add sw.js in shared components

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

Importing Application Error

Hi Vincent,

Thought I would give this a try and am struggling to import the application into my environment. I get the following error:

image

Regards

Uncaught ReferenceError: pwa is not defined at <anonymous>:1:1

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:

image

in your demo-app i can see there is loading much more javascript than in my application with your imported static-files

image

did i forgot something? why the app.min.js would not be called?

importing localForage causing TypeError: RangeError: Maximum call stack size exceeded.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.