Derek_K
Derek_K

Reputation: 31

Firebase Cloud Messaging SW integration with Svelte-Kit

Has anyone integrated Firebase Cloud Messaging with Svelte-Kit. My main issue is registering the firebase-messaging-sw.js. If placed in the static directory I get a 'Syntax Error for using import outside of a module'. I've tried adding the file to the src directory, and telling vite about it. My svelte.config.js looks like this.

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        adapter: adapter({
            out: 'dist'
        }),
        csrf: {
            checkOrigin: false,
        },
        files: {
            serviceWorker: 'src/firebase-messaging-sw.js'
        }
    },
};

export default config;

I am testing using vite build && vite preview with no luck. I feel like i'm missing a simple config to keep the file at the root of the project.

Upvotes: 1

Views: 884

Answers (2)

Vinay Namadi
Vinay Namadi

Reputation: 99

I faced issues when importing firebase-app.js and firebase-messaging.js, The below imports worked for me.

importScripts('https://www.gstatic.com/firebasejs/11.2.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/11.2.0/firebase-messaging-compat.js');

Upvotes: 0

Derek_K
Derek_K

Reputation: 31

The solution I found was to use 'importScripts' a service worker helper I wasn't aware of.

importScripts('https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.10.0/firebase-messaging.js');

Upvotes: 2

Related Questions