Как предварительно кэшировать stati c assets с laravel -mix-workbox? - PullRequest
Новая
       69

Как предварительно кэшировать stati c assets с laravel -mix-workbox?

0 голосов
/ 22 апреля 2020

Я пытаюсь создать PWA с автономной поддержкой, используя Laravel и Vue. js. Я использую плагин laravel -mix-workbox для настройки моего сервисного работника, но у меня огромное количество проблем, пытающихся выполнить sh, что должно быть простой задачей. У меня есть некоторые статические c ресурсы (изображения, XML файлы и c.), Которые обслуживаются из моего приложения, и я не могу получить рабочую коробку для добавления их в список предварительно кэшированных файлов.

Я попытался переместить ресурсы в / resources / img и добавить вызов copyDirectory, чтобы попытаться включить их, также я попробовал webpack-copy-plugin, но включены только скомпилированные ресурсы (js, css, шрифты и др. c). Вот мой файл webpack.mix. js: 

const mix = require('laravel-mix');

//mp035 add workbox plugin and copy-webpack-plugin
require('laravel-mix-workbox');
const CopyPlugin = require('copy-webpack-plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
    output: {
      publicPath: ''
    },
    plugins: [
        new CopyPlugin([
          { from: 'resources/img/*', to: 'public/img', flatten:true },
          { from: 'resources/root/*', to: 'public', flatten:true },
        ]),
      ],
  })


.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps().version()

// mp035 add inject manifest plugin to inject workbox manifest into the service worker.
.injectManifest({
    swSrc: './resources/pwa/service-worker.js',
    maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
});

Кто-нибудь знает, как я могу включить все файлы в моем / resources / img (или / public / img) в список предварительно кэшированных файлов?

1 Ответ

0 голосов
/ 22 апреля 2020

Хорошо, похоже, это проблема с laravel -mix-workbox. Удаление и использование плагина generi c workbox webpack решает проблему. Для тех, кто находит это, вот обновленный webpack.mix. js: 

const mix = require('laravel-mix');

//mp035 add workbox plugin and copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
    output: {
      publicPath: ''
    },
    plugins: [
        new CopyPlugin([
          { from: 'resources/img/*', to: 'public/img', flatten:true },
          { from: 'resources/root/*', to: 'public', flatten:true },
        ]),
        new InjectManifest({
            swSrc: './resources/pwa/service-worker.js',
            maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
        }),
      ],
  })


.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps().version();

В общем, использование рабочей коробки с laravel -миксом было чрезвычайно болезненным процессом со всеми «незначительными» «твик, который laravel -mix разрушает рабочий плагин». Я рекомендую придерживаться простого веб-пакета, если это возможно.

...