Question

要使我的aurelia应用程序成为我使用aurelia cli创建的适当的PWA，我需要注册一名服务人员。

关于主题，网络上已有类似的未解答的question或很少的discussions和forum posts，但是我找不到任何可以帮助我入门的具体方法。 / p>

我正在考虑三种可能的解决方法

选项[1]-使用index.html页面并在aurelia应用范围之外的脚本标记内注册服务级别的用户。

// service worker in index.html file

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body aurelia-app="main">

  <script type="text/javascript"> 
     ... my service worker code here ...
  </script>
  </body>
</html>

option [2]-在aurelia main.js / main.ts中

// inside aurelia main.js/main.ts file

export function configure(aurelia) {
  ... rest of the conf ...
  registerServiceWorker();
  return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

选项[3]-app.js文件

// inside app.js file constructor

export class App {

  constructor() {

    this.registerServiceWorker();
  }

处理此任务的正确/正确方法是什么？当我使用webpack时，是否需要更多配置才能使服务工作者与webpack和aurelia一起玩得开心？

如果使用WorkBox是唯一的前进方式，我也可以接受，但为了简单起见，我宁愿直接在aurelia中使用香草服务工人。

Answer 1

这就是我的工作方式。

1- insatll工作箱插件

yarn add workbox-webpack-plugin

2-配置webpack

//webpack.config.js
// add plugin somewhere in the top section 

const  workboxPlugin = require('workbox-webpack-plugin');

//inside plugins section 
 plugins: [
   // somewhere in the bottom is OK 
   new workboxPlugin.GenerateSW({
      swDest: 'sw.js', // name of your service worker file
      clientsClaim: true,
      skipWaiting: true
    }),

3-将您的sw.js文件放在静态目录中。它将被移至构建版本的dist文件夹中。

4-如果它是一个完整的PWA，请在静态目录中也添加manifest.json文件。您可以从google developr site获取示例manifest.json文件。

5-将Service Worker初始化脚本添加到索引文件中

 // index.html or index.ejs file
 <script>

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) { return registration.update(); })
      .catch(error => console.log(error));
  }

</script>

运行，希望您应该已经安装并运行了serveiceworker。

P.S。这是正确的方法吗？我不知道，但是现在它对我有用。

在奥雷利亚添加服务人员

1 个答案: