We have a vue firebase service worker that needs to call back to the main vue app. According to my research you can do this with the postMessage() function like so:
// firebase-messaging-sw.js
addEventListener('fetch', event => {
event.waitUntil(
(async function() {
// Exit early if we don't have access to the client.
// Eg, if it's cross-origin.
if (!event.clientId) return
// Get the client.
const client = await clients.get(event.clientId)
// Exit early if we don't get the client.
// Eg, if it closed.
if (!client) return
// Send a message to the client.
client.postMessage({
msg: 'Hey I just got a fetch from you!',
url: event.request.url
})
})()
)
})
You handle the message in the main app so:
// main.js
navigator.serviceWorker.addEventListener('message', event => {
console.log('Url', event.data.url)
console.log('msg', event.data.msg)
})
The problem is that postMessage() needs to be called on a client object and you get the client object on the fetch event, but vue does not seem to fetch anything as it is a single page application.
So how can I get the client?
and how do I message the main app?
The client does not need to make a fetch request in order to allow the Service Worker to communicate with it. You can use the Clients API inside the Service Worker. You can also initiate a completely separate postMessage message from the client in the beginning after the app has started.
Clients API: https://developer.mozilla.org/en-US/docs/Web/API/Clients
I also suggest you check out this example: https://serviceworke.rs/message-relay.html
Related
I am trying to make a simple chat app using vuejs and socketio.
I would like to broadcast a message from one user to all the others.
I have the following code on the server side to do that:
io.on('connection', socket => {
socket.on('send-message', message => {
console.log('message sent: ' + message)
socket.broadcast.emit('receive-message', message)
})
})
On the client side, I am listening to that action in this method:
this.socket.on('receive-message', message => {
this.createMessageHtmlElement(message)
})
I am having a hard time knowing where to place that method. putting in mounted() or created() will make it get called over and over again. I only want to call it when the server actually sends a message.
What is the correct way to place server action listeners in a vuejs project?
putting in mounted() or created() will make it get called over and
over again.
this.socket.on is a "socket version" of document.addEventListener (docs) so, you will set a function (callback) that will be executed when a certain event occurs (receive-message in your case). Depending on what createMessageHtmlElement actually does, you can put this.socket.on in either created() or mounted().
Assuming you have a simple app, probably the best place to do that is App.vue since the listener is going to be registered when the App.vue is registered (Vue lifecycle)
I have a site with web components based architecture, where each web component may be a separate Vue app with it's own API layer integrated via Axios. I need to implement Auth middleware for all HTTP requests, coming from either root app or web component app. I cannot use Axios built-in interceptors mechanism as there will be multiple instances of Axios. Is there a way I can do it with global JS methods? I know there is some browser extension based API out there, but that doesn't seem like something I am looking for.
Just in case anybody else is interested, I have solved it with service worker. You can subscribe to fetch events and respond according to your auth logics. Your service worker code will look something like following:
self.addEventListener('fetch', async (event) => {
const isAuthorised = await checkIsAuthorized(); // your auth API layer
if (!isAuthorised) {
const response = new Response(null, {
status: 401,
statusText: 'Unauthorised',
});
event.respondWith(response);
return;
}
event.respondWith(fetch(event.request));
});
Service worker is able to intercept axios requests from shadow DOM as well, so it's a good match for web components case.
Besides, there is a nice article by Bartosz Polnik on implementing auth layer using service worker.
I'm hoping someone can tell me if I'm barking up the wrong tree. I have built a basic web app using Vue CLI and included the PWA support. Everything seems to work fine, I get the install prompt etc.
What I want to do, is cache various pages (routes) that user hasn't visited before, but so that they can when offline.
The reason here is that I'm planning to build an app for an airline and part of that app will act as an in flight magazine, allowing users to read various articles, however the aircrafts do not have wifi so the users need to download the app in the boarding area and my goal is to then pre cache say the top 10 articles so they can read them during the flight.
Is this possible? and is PWA caching the right way to go about it? Has anyone does this sort of thing before?
Thanks in advance
To "convert" your website to an PWA, you just need few steps.
You need to know that the service worker is not running on the main thread and you cant access for example the DOM inside him.
First create an serviceworker.
For example, go to your root directory of your project and add a javascript file called serviceworker.js this will be your service worker.
Register the service worker.
To register the service worker, you will need to check if its even possible in this browser, and then register him:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/serviceworker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope');
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
In vue.js you can put this inside mounted() or created() hook.
If you would run this code it will say that the service worker is successfully registered even if we havent wrote any code inside serviceworker.js
The fetch handler
Inside of serviceworker.js its good to create a variable for example CACHE_NAME. This will be the name of your cache where the cached content will be saved at.
var CACHE_NAME = "mycache_v1";
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_NAME).then(function(cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Everytime you make a network request your request runs through the service worker fetch handler here first. You need to response with event.respondWith()
Next step is you first open your cache called mycache_v1 and take a look inside if there is a match with your request.
Remember: cache.match() wont get rejected if there is no match, it just returns undefined because of that there is a || operator at the return statement.
If there is a match available return the match out of the cache, if not then fetch() the event request.
In the fetch() you save the response inside the cache AND return the response to the user.
This is called cache-first approach because you first take a look inside the cache and in case there is no match you make a fallback to the network.
Actually you could go a step further by adding a catch() at your fetch like this:
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
})
.catch(err => {
return fetch("/offline.html")
});
In case there is nothing inside the cache AND you also have no network error you could response with a offline page.
You ask yourself maybe: "Ok, no cache available and no internet, how is the user supposed to see the offline page, it requires internet connection too to see it right?"
In case of that you can pre-cache some pages.
First you create a array with routes that you want to cache:
var PRE_CACHE = ["/offline.html"];
In our case its just the offline.html page. You are able to add css and js files aswell.
Now you need the install handler:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(PRE_CACHE);
})
);
});
The install is just called 1x whenever a service worker gets registered.
This just means: Open your cache, add the routes inside the cache. Now if you register you SW your offline.html is pre-cached.
I suggest to read the "Web fundamentals" from the google guys: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook
There are other strategies like: network-first
To be honest i dont know exactly how the routing works with SPAs because SPA is just 1 index.html file that is shipped to the client and the routing is handled by javascript you will need to check it out witch is the best strategie for your app.
We are running a Vue application that has a firebase service worker running "next" to it.
The service worker has been initiated as such:
// main.js
import firebase from 'firebase/app'
import 'firebase/messaging'
...
const firebase_config = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
databaseURL: 'https://YOUR_PROJECT_ID.firebaseio.com',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_PROJECT_ID.appspot.com',
messagingSenderId: 'YOUR_MESSAGING_SEND_ID'
}
console.log('firebase', firebase)
new Vue({
...
In the firebase-messaging-sw.js file (in the public directory) we handle the data message as such:
// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.6.2/firebase-messaging.js')
// for some reason it requires this again
const firebase_config = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
databaseURL: 'https://YOUR_PROJECT_ID.firebaseio.com',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_PROJECT_ID.appspot.com',
messagingSenderId: 'YOUR_MESSAGING_SEND_ID'
appId: 'YOUR_APPID'
}
firebase.initializeApp(firebase_config)
const messaging = firebase.messaging()
messaging.setBackgroundMessageHandler(function(payload) {
//////////////////////////////////////////////////////
// I want to access the vue or vuex component here
//////////////////////////////////////////////////////
return true
}
How do you make a call back to the vue/vuex store, or access one of the DOM elements, if it is there?
EDIT
Here is some more detail:
It seems that the way you communicate from the service worker to the main app it with the postMessage() function.
The postMessange() function needs a client object that can be found by the fetch event and a fetch event is triggered when you access a url.
Unfortunately vue does not seem to fetch url's as it is a singe page app therefore you cant get a client therefore you can't use it to run a postMessage() (unless I got that wrong, all help is appreciated)
Here is the code I got for posting a message on fetch event:
addEventListener('fetch', event => {
event.waitUntil(
(async function() {
// Exit early if we don't have access to the client.
// Eg, if it's cross-origin.
if (!event.clientId) return
// Get the client.
const client = await clients.get(event.clientId)
// Exit early if we don't get the client.
// Eg, if it closed.
if (!client) return
// Send a message to the client.
client.postMessage({
msg: 'Hey I just got a fetch from you!',
url: event.request.url
})
})()
)
})
In React (yes I know this is Vue, hold your horses) handling asynchronous events is usually done using a middleware. Redux-saga is one of these middlewares and it supports Event channels which give you a way to tie your external event logic (e.g. your firebase event) to your internal store using puts or calls to your vuex actions.
Redux-saga is not tied to redux (as it seems) and there are several adapters that support this (vuex-redux-saga, vuex-nia or vuex-coolstory). There are some more listed here: https://yarnpkg.com/?q=vuex%20saga&p=1
Please be wary that I personally did not use any of these libraries, though I have come to love the Saga middleware approach.
I am using service worker to handle background notifications. When I receive a message, I'm creating a new Notification using self.registration.showNotification(title, { icon, body }). I'm watching for the click event on the notification using self.addEventListener('notificationclick', ()=>{}). On click I'm checking to see if any WindowClient is open, if it is, I'm getting one of those window clients and calling postMessage on it to send the data from the notification to the app to allow the app to process the notification. Incase there is no open window I'm calling openWindow and once that completes I'm sending the data to that window using postMessage.
event.waitUntil(
clients.matchAll({ type: 'window' }).then((windows) => {
if (windows.length > 0) {
const window = windows[0];
window.postMessage(_data);
window.focus();
return;
}
return clients.openWindow(this.origin).then((window) => {
window.postMessage(_data);
return;
});
})
);
The issue I am facing is that the postMessage call inside the openWindow is never delivered. I'm guessing this is because the postMessage call on the WindowClient happens before the page has finished loading, so the eventListener is not registered to listen for that message yet? Is that right?
How do I open a new window from the service worker and postMessage to that new window.
I stumble this issue as well, using timeout is anti pattern and also might cause delay larger then the 10 seconds limit of chrome that could fail.
what I did was checking if I need to open a new client window.
If I didn't find any match in the clients array - which this is the bottle neck, you need to wait until the page is loaded, and this can take time and postMessage will just not work.
For that case I created in the service worker a simple global object that is being populated in that specific case for example:
const messages = {};
....
// we need to open new window
messages[randomId] = pushData.message; // save the message from the push notification
await clients.openWindow(urlToOpen + '#push=' + randomId);
....
In the page that is loaded, in my case React app, I wait that my component is mounted, then I run a function that check if the URL includes a '#push=XXX' hash, extracting the random ID, then messaging back to the service worker to send us the message.
...
if (self.location.hash.contains('#push=')) {
if ('serviceWorker' in navigator && 'Notification' in window && Notification.permission === 'granted') {
const randomId = self.locaiton.hash.split('=')[1];
const swInstance = await navigator.serviceWorker.ready;
if (swInstance) {
swInstance.active.postMessage({type: 'getPushMessage', id: randomId});
}
// TODO: change URL to be without the `#push=` hash ..
}
Then finally in the service worker we add a message event listener:
self.addEventListener('message', function handler(event) {
if (event.data.type === 'getPushMessage') {
if (event.data.id && messages[event.data.id]) {
// FINALLY post message will work since page is loaded
event.source.postMessage({
type: 'clipboard',
msg: messages[event.data.id],
});
delete messages[event.data.id];
}
}
});
messages our "global" is not persistent which is good, since we just need this when the service worker is "awaken" when a push notification arrives.
The presented code is pseudo code, to point is to explain the idea, which worked for me.
clients.openWindow(event.data.url).then(function(windowClient) {
// do something with the windowClient.
});
I encountered the same problem. My error was that I registered event handler on the window. But it should be registered on service worker like this:
// next line doesn't work
window.addEventListener("message", event => { /* handler */ });
// this one works
navigator.serviceWorker.addEventListener('message', event => { /* handler */ });
See examples at these pages:
https://developer.mozilla.org/en-US/docs/Web/API/Clients
https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage
UPD: to clarify, this code goes into the freshly opened window. Checked in Chromium v.66.