Сегодня я покажу вам, как превратить проект laravel в полностью работающее прогрессивное веб-приложение. Это побудит ваших пользователей установить ваш веб-сайт на свое устройство и даже получить к нему доступ, когда подключение к Интернету ограничено. Сервисный работник перейдите к инструментам Chrome dev в разделе приложение. Прежде чем я начну, есть отличный учебник по этому здесь, и это один из руководств, которые я использовал когда я впервые захотел реализовать его в своем проекте, но этот пример требует внесения изменений в ваш файл webpack.config.js, который имеет тенденцию становиться немного сложнее. Я нашел гораздо более простое решение. Использование файла webpack.mix.js. Теперь приступим.

Что тебе нужно

Чтобы получить функциональность PWA, вам сначала понадобится пара вещей. Здесь - это список всего, что вам нужно, но это вполне подойдет:

  • HTTPS
  • manifest.json
  • сервисный работник
  • Хороший адаптивный дизайн

Насчет HTTPS, если вы работаете локально, не беспокойтесь. Google рассматривает localhost как безопасный домен.

Установка

Чтобы запустить сервис-воркер, мы будем использовать плагин sw-preache для webpack. Вы можете установить пакет следующим образом

npm install — save-dev sw-precache-webpack-plugin

Обновление webpack.mix.js

Перейдите в свой файл webpack.mix.js и добавьте в него этот код

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
mix.webpackConfig({
    plugins: [
    new SWPrecacheWebpackPlugin({
        cacheId: 'pwa',
        filename: 'service-worker.js',
        staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,js,html}'],
        minify: true,
        stripPrefix: 'public/',
        handleFetch: true,
        dynamicUrlToDependencies: { //you should add the path to your blade files here so they can be cached
               //and have full support for offline first (example below)
            '/': ['resources/views/welcome.blade.php'],
            // '/posts': ['resources/views/posts.blade.php']
        },
        staticFileGlobsIgnorePatterns: [/\.map$/, /mix-manifest\.json$/, /manifest\.json$/, /service-worker\.js$/],
        navigateFallback: '/',
        runtimeCaching: [
            {
                urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
                handler: 'cacheFirst'
            },
            {
                urlPattern: /^https:\/\/www\.thecocktaildb\.com\/images\/media\/drink\/(\w+)\.jpg/,
                handler: 'cacheFirst'
            }
        ],
        // importScripts: ['./js/push_message.js']
    })
    ]
});

Краткое описание того, что это значит

  • staticFileGlobs: файлы, которые мы хотим кэшировать.
  • dynamicUrlToDependencies: Сопоставьте маршруты блейд-файлов. Это очень важно, чтобы в первую очередь выйти в автономный режим
  • runtimeCaching: позволяет сохранять сторонние библиотеки в кеше.
  • importScripts: это включает нашу настраиваемую логику для созданного сервис-воркера.

Теперь все, что вам нужно сделать, это скомпилировать ресурсы, например, такие npm run production

Файл манифеста

Создайте файл с именем manifest.json. Этот файл дает вам возможность управлять поведением вашего приложения. У Google есть очень хорошее объяснение этого. Вот как я его использую:

{
  "short_name": "your app",
  "name": "your app",
  "theme_color": "#fff",
  "background_color": "#fff",
  "display": "standalone",
  "icons": [
    {
      "src": "icons/icon_48_48_dpi.png",
      "type": "image/png",
      "sizes": "48x48"
    },
     {
      "src": "icons/icon_72_48_dpi.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "icons/icon_96_48_dpi.png",
      "type": "image/png",
      "sizes": "96x96"
    },
     {
      "src": "icons/icon_144_48_dpi.png",
      "type": "image/png",
      "sizes": "144x144"
    },
     {
      "src": "icons/icon_168_48_dpi.png",
      "type": "image/png",
      "sizes": "168x168"
    },
    {
      "src": "icons/icon_192_48_dpi.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icons/icon_128_128_dpi.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "icons/icon_256_128_dpi.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "icons/icon_384_128_dpi.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "icons/icon_512_128_dpi.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "https://127.0.0.1:8000/",
  "orientation": "portrait"
}
  • short_name: имя, отображаемое на главном экране мобильного устройства.
  • name: имя, отображаемое на баннере установки / всплывающем окне.
  • theme_color: цвет вашей темы.
  • background_color: цвет, который отображается непосредственно перед запуском приложения (рекомендуется использовать тот же цвет, что и theme_color).
  • orientation: Используемая ориентация (книжная / альбомная).
  • start_url: URL вашего веб-сайта.
  • display: standalone (для мобильных устройств) или browser (браузер добавляет адресную строку).
  • icons: это изображения значков наших приложений на главном экране. Помните, что Google использует изображения, наиболее близкие к 48 dpi, в качестве значков, а изображения, наиболее близкие к 128 dpi, в качестве значков заставки.

Проверка поддержки PWA

В файл, в котором вы определяете свои макеты, добавьте этот код:

<script>
          if ('serviceWorker' in navigator ) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
                    // Registration was successful
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                }, function(err) {
                    // registration failed :(
                    console.log('ServiceWorker registration failed: ', err);
                });
            });
        }
</script>

Это проверяет наличие поддержки сервис-воркера. Если у вас есть пакет push-менеджера, используйте эту строку

(‘serviceWorker’ in navigator && ‘PushManager’ in window)

вместо того

if (‘serviceWorker’ in navigator )

Делая это, вы получаете полную поддержку PWA. Если вы проверите это в расширении Google Lighthouse на localhost, вы получите оценку 82 только потому, что https недоступен, и вы получите эти 2 предупреждения, что совершенно нормально для местного развития

Does not use HTTPS: 1 insecure request found
Does not redirect HTTP traffic to HTTPS

Если вы запустите это на активном сервере с включенным https, вы получите наивысший балл 100.

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