Question

我在创建反应pwa应用程序时遇到问题...

确实，在使用以下命令设置我的反应项目＆＃34; create-react-app＆＃34;并添加我的正确文件我有以下项目结构。

my-app
  - README.md
  - package.json
  - .gitignore
  - node_modules
  - public
    - favicon.icon
    - index.html
    - manifest.json
    - sw.js
  - src
    - App.css
    - App.js
    - index.css
    - index.js
    - registerServiceWorker.js
    - indexedDB
      - database.js
      - idb.js
    - components
      - home-page
        - HomePage.js
        - homePage.css
      - auth-page
        - AuthPage.js
        - authPage.css
    - services
      - AuthService.js
      - UserService.js
    - global
      - Global.js

我从registeredServiceWorker.js注册了一个名为＆＃34; sw.js＆＃34;的服务工作者。以下文件放在公用文件夹中。

问题是：我在我的＆＃34; AuthService.js＆＃34;中开发了一些功能。位于src文件夹内的文件，我需要将这些函数放入我的公共＆＃34; sw.js＆＃34;位于我的公共文件夹中的文件。

问题是：我该怎么做？我多次尝试导入/需要AuthService.js文件，但是反应告诉我未捕获的SyntaxError：意外的令牌*

看看我的sw.js

//import * as idb from './src/global/Global.js' // <-- BUG HERE CANNOT IMPORT THE FILE
//import * as idb from './src/services/AuthService.js' // <-- BUG HERE CANNOT IMPORT THE FILE
//import * as idb from './src/indexedDB/database.js'; // <-- BUG HERE CANNOT IMPORT THE FILE


// I would like to get BASE_URL_BACKEND from my src/global/Global.js
// but I can't because I can't import/require anything on sw.js,
// so I hardcoded it...
const BASE_URL_BACKEND = 'http://192.168.1.43:8080';

const cacheName ='emmergency-1.0';

self.addEventListener('install', evt => {
    console.log(`SW installé à ${new Date().toLocaleTimeString()}`);

    let cachePromise = caches.open(cacheName).then(cache =>{
        return cache.addAll([
            '/'
        ])
        .then(console.log("Cache initialisé"))
        .catch(console.err);
    });

    evt.waitUntil(cachePromise);
});


// Others function here but nothing interesting to understand the problem.
// (... Others functions heres ...)
// Others function here but nothing interesting to understand the problem.



self.addEventListener('sync', event => {
    if(event.tag === 'sync-emergencies'){
        console.log('Attemting to sync', event.tag);

        event.waitUntil(
            getAllEmergency().then(emergencies => {
                const unsynced = emergencies.filter(emergency => emergency.unsynced);

                console.log("UNSYNCED =", unsynced);

                return Promise.all(unsynced.map(emergency => {
                    fetch(`${BASE_URL_BACKEND}/api/calls`, {
                        headers : {
                            'Accept': 'application/json',
                            'Content-Type' : 'application/json',
                            // MUST HAVE HERE THE AUTHORIZATION TOKEN 
                            // STORED INSIDE AuthService.js, BUT I CAN'T
                            // BECAUSE OF THE IMPOSSIBILITY TO IMPORT / REQUIRE FILES
                        },
                        method: 'POST',
                        body: JSON.stringify(emergency)
                    })
                    .then(() => {

                        // I need "putEmergency" function which is coded inside database.js, but I can't due to the impossibility to import / require external file...
                        //return putEmergency(Object.assign({}, emergency, { unsynced: false}), emergency.id);
                    })
                    .catch( (error) => {
                      console.log('Erreur lors du push :', error)
                    });
                }))
            })
        )
    }
});

请有人帮忙，建议和回答。我现在被困在这里3天了......谢谢你。

Answer 1

如果要使用像这样的导入，则必须在webpack配置中添加用于构建serviceworker的条目。

如果你的文件在构建后是普通的js，你可以使用importScripts

修改以回顾评论部分：

create-react-app使用webpack，但它是隐藏的。要访问webpack配置文件，您必须运行npm run eject。

完成后，您必须修改webpacks配置文件，以便向服务工作者添加条目，如下所示。

entry: { sw: paths.appServiceWorker, main: [require.resolve('./polyfills'), paths.appIndexJs] }

一旦构建项目，这将在static / js文件夹中生成一个新文件。这是您想要注册为服务工作者的内容。

在＆＃34; public＆＃34;之间共享功能文件夹和＆＃34; src＆＃34;文件夹 - React app

1 个答案: