Решил поделиться как я настроил PWA и заодно узнать, может кто то работал над этим и может поделиться своим способом реализации.
Сначала в двух словах что такое PWA, это альтернатива мобильному приложению. Если ваш сайт адаптирован под мобильный девайс, то можете доработать свой сайт и пользователь сможет добавить себе на главный экран мобилы (иконку), и получится что то типа приложения. Посмотреть можете на этом сайте
Для просмотра ссылки Войди или Зарегистрируйся, заходите на любую страницу, кроме главной (не понимаю пока почему на ней не получается вывести) с мобильного устройства (браузер Chrome), и видите как сайт предлагает вам во всплывающем окне разместить этот сайт на вашем устройстве.
Плюс такого решения, что на ваш телефон ничего не устанавливается, как при установке приложения, то есть не используется ваша память, не нужно давать доступ, короче безопасно для пользователя, но способ на мой взгляд не плохой (можно так же настроить push сообщения, но я пока не дошел до этого). Опять же не нужно платить за это, разрабатывать приложение. Есть минусы, например, можно установить только из браузера Chrome (вроде, так пишут, другие не тестил пока), еще минусы людей подсадили на приложения, и люди пока не понимают что это, хотя это безопасней, но думаю тут вопрос к спецслужбам и тд)). Ну приступим:
в любом js файле который у вас подключен на всех страницах сайта прописываем такой код:
PHP:
document.addEventListener('DOMContentLoaded',()=>{const $navbarBurgers=Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'),0);if($navbarBurgers.length>0){$navbarBurgers.forEach(el=>{el.addEventListener('click',()=>{const target=el.dataset.target;const $target=document.getElementById(target);el.classList.toggle('is-active');$target.classList.toggle('is-active')})})}});
if(navigator.serviceWorker.controller){console.log('[PWA Builder] active service worker found, no need to register')}else{navigator.serviceWorker.register('sw.js',{scope:'./'}).then(function(reg){console.log('Service worker has been registered for scope:'+reg.scope)})}
Далее
создадим в корне сайта файлы:
sw.js и
manifest.json
содержимое:
sw.js
PHP:
self.addEventListener('install', function(event) {
var indexPage = new Request('/');
event.waitUntil(
fetch(indexPage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log("[PWA Builder] Cached index page during Install" + response.url);
return cache.put(indexPage, response);
});
}));
});
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function(error) {
console.log("[PWA Builder] Network request Failed. Serving content from cache:" + error );
return caches.open('pwabuilder-offline').then(function (cache) {
return cache.match(event.request).then(function (matching) {
var report = !matching || matching.status == 404?Promise.reject('no-match'): matching;
return report
});
});
})
);
})
Здесь ничего вроде трогать не надо.
manifest.json
PHP:
{
"name": "Карта Владимира и Владимирской области",
"short_name": "Карта 33",
"description": "Информационная карта Владимирской области. Для туризма, походов, рыбалки, активного отдыха.",
"icons": [{
"src": "oc-content/themes/one/images/logo/logoPr48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "oc-content/themes/one/images/logo/logoPr72x72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "oc-content/themes/one/images/logo/logoPr96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "oc-content/themes/one/images/logo/logoPr144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "oc-content/themes/one/images/logo/logoPr168x168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "oc-content/themes/one/images/logo/logoPr192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "oc-content/themes/one/images/logo/logoPr512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "./",
"orientation" : "any",
"display": "standalone",
"background_color": "#0eaaaf",
"theme_color": "#43b6ac"
}
Тут нужно создать свой манифест, по образу этого, создать манифест можно тут
Для просмотра ссылки Войди или Зарегистрируйся и
Для просмотра ссылки Войди или Зарегистрируйся
И подключаем
manifest.json, в head.php, например так
<!-- manifest -->
<link rel="manifest" href="manifest.json">
Теперь о проверки, используем этот ресурс
Для просмотра ссылки Войди или Зарегистрируйся, там кстати можно посмотреть другие варианты использования PWA.
и еще вариант проверки, если все правильно подключено, то на своем сайте нажав
ctrl+shift+I, во вкладке
application
в меню
Service Workers должна гореть зеленая лампочка, а в меню
Manifest должен быть ваш манифест, с картинками, цветами и тд. Ну и конечно при заходе на сайт через мобилу должно быть всплывающее окно, скажу еще, если вы установите на мобилу иконку, то предлагать больше не будет, для появления всплывающего окна заново, нужно удалить ярлык с главного экрана.
ВСЕ!!!
