Users can install our software anywhere, and we can’t guarantee a file will exist in the root of the domain. To solve this I register a custom service worker for FCM and everything works. No issues.
BUT! This only works on the local dev machine. On the production server webpack bundles everything to /dist/ and it cannot find the file to register the service worker.
So I am curious how to make the following code work with webpack.
Specifically:
navigator.serviceWorker.register('/public/js/services/firebase-messaging-sw.js')
The above does not work with webpack as on the server it points to a non-existing file. The full process minus some code below.
navigator.serviceWorker.register('/public/js/services/firebase-messaging-sw.js')
.then((registration) => {
this.messaging.getToken({serviceWorkerRegistration: registration, vapidKey: "CODE_HERE"}).then((currentToken) => {
//just some code here, removed to keep example smaller
}
}).catch((err) => {
//just some code here, removed to keep example smaller
});
});
Can you try this ?
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
...
plugins: [
new ServiceWorkerWepbackPlugin({
entry: path.join(__dirname, 'path/of/your_service_worker_file.js'),
}),
],
...
Note: I'm not sure for the path value
Also you must register in main thread:
import runtime from 'serviceworker-webpack-plugin/runtime';
if ('serviceWorker' in navigator) {
const registration = runtime.register();
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加