Сегодня я покажу вам, как превратить проект 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, готовый к использованию. Или вы также можете скачать его бесплатно здесь.