Comments (3)
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.
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.
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)
- Use site.webmanifest instead of manifest.json HOT 2
- Manifest, config, assets generator in NPM script
- Automatic splash screens generator HOT 1
- Error with push notifications: applicationServerKey is not valid
- How to send notifications to endpoints which the server delivers Web Push Notifications in PHP?
- Update Workbox to v4
- Integrate pwacompat
- Add background sync and queues manager
- Integrate Web Payments (Payment Request API)
- Integrate User Location (Geolocation API)
- Integrate Credential Management API?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jfa-pwa-toolkit.