Добавление сервисных работников в Аурелию - PullRequest
Новая
       36

Добавление сервисных работников в Аурелию

3 голосов
/ 22 марта 2019

Чтобы сделать мое приложение aurelia правильным PWA, которое я создал с помощью aurelia cli, мне нужно зарегистрировать работника сервиса.

Уже есть похожий неотвеченный вопрос или несколько обсуждений и сообщений на форуме в сети, доступных по теме, но я не смог найти ничего конкретного чтобы помочь мне начать.

Я думаю о трех возможных способах справиться с этим

option [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>

опция [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();
  }

Каким будет правильный / правильный способ решения этой задачи? Поскольку я использую веб-пакет, потребуется ли ему дополнительная настройка, чтобы работники службы хорошо играли с веб-пакетом и aurelia?

Если использование WorkBox - единственный путь вперед, я тоже могу с этим смириться, но для простоты я бы предпочел использовать ванильных работников напрямую в aurelia.

1 Ответ

0 голосов
/ 04 апреля 2019

Вот как я сделал это для работы.

1 - плагин insatll workbox 

yarn add workbox-webpack-plugin

2 - настройка веб-пакета 

//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 в статический каталог.Вы можете получить образец файла manifest.json с сайта разработчика Google .

5 - добавить сценарий инициализации сервисного работника в индексный файл 

 // 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>

запустить и, надеюсь, выдолжен установить и запустить работник.

PS Это правильный способ сделать это?Понятия не имею, но пока это работает на меня.

...