Coder Social home page Coder Social logo

Comments (3)

jfadev avatar jfadev commented on July 17, 2024

Hello,
You are grouping all js files with webpack or similar?

Think that the config.js file must be accessible from both window and
from the service worker.
Due to its error, the global constant PWA_CONFIG does not exist.

Try to keep the original structure:

/index.html
/sw.js
/pwa/

(But you should check if all paths are correct in the project)

Load scripts in classic mode:

<script type="text/javascript" src="/pwa/config.js"></script>
<script type="text/javascript" src="/pwa/pwa.js"></script>
/* Your angular app */
<script type="text/javascript" src="/public/app.js"></script>

You can also clone this functional demo:
https://github.com/jfadev/jfa-pwa-toolkit-demo

At the moment I am working on the dev branch that will be an NPM package and can be used much more easily in modern js frameworks.
I hope to finish it soon 😁

from jfa-pwa-toolkit.

TehEbil avatar TehEbil commented on July 17, 2024

Hi, thank you very much for your fast response!

I do not group those files (none at all), I just include them as is (as you shown, these three are just the last scripts called (and also PWA.ServiceWorker.register();)). I have same paths and all files are included correcty. The only difference is index, index is in

/theme/index.html
/pwa
/sw.js

Might there be something else which disables global variables somehow?

And sorry if offtopic - I always upload these to production server, because of ssl_certificate errors. Do you test these actually on your local machine? I tried some tutorials, but none of them actually worked :x

from jfa-pwa-toolkit.

jfadev avatar jfadev commented on July 17, 2024

In general, you need to serve both your page and your service worker script
via HTTPS in order to use service workers.

There is an exception to the HTTPS requirement to facilitate local development:
if you access your page and the service worker script
via http://localhost[:port], or via http://127.x.y.z[:port],
then service workers should be enabled without any other action.

How do you get your index.html?
from http://localhost/ or http://localhost/theme/ ?

The following files should be published in the following URLs so you don't have to change anything:

http://localhost/sw.js
http://localhost/pwa/config.js
http://localhost/pwa/pwa.js
http://localhost/pwa/manifest.json
or
https://yourdomain.com/sw.js
https://yourdomain.com/pwa/config.js
https://yourdomain.com/pwa/pwa.js
https://yourdomain.com/pwa/manifest.json

you need the following code in all your pages: ex:
https://yourdomain.com/
https://yourdomain.com/news/
https://yourdomain.com/about/

<html>
<head>
    <link rel="manifest" href="/pwa/manifest.json"></link>
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <script type="text/javascript" src="/pwa/config.js"></script>
    <script type="text/javascript" src="/pwa/pwa.js"></script>
    <script type="text/javascript">
        PWA.ServiceWorker.register();
    </script>
</body>
</html>

Try running your project at http://localhost/ and make sure that your service worker has been loaded correctly in DevTools>Application>Service Workers

If you still have problems, do not hesitate to keep asking here until we make it work. 👍

from jfa-pwa-toolkit.

Related Issues (12)

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.