Как показать всплывающее окно обновления только в PWA, а не на веб-сайте? - PullRequest
Новая
       12

Как показать всплывающее окно обновления только в PWA, а не на веб-сайте?

0 голосов
/ 25 октября 2019

У меня есть Laravel PWA, созданный с нуля. Я использую плагин Laravel Silviolleite PWA.

Я создал сервисного работника. Вот код 

> var staticCacheName = "pwa-v" + new Date().getTime(); var filesToCache
> = [
>     '/offline.html',
>     '/css/style.css',
>     '/js/app.js', ];
> 
> // Cache on install self.addEventListener("install", event => {
>     this.skipWaiting();
>     event.waitUntil(
>         caches.open(staticCacheName)
>             .then(cache => {
>                 return cache.addAll(filesToCache);
>             })
>     ) });
> 
> // Clear cache on activate self.addEventListener('activate', event =>
> {
>     event.waitUntil(
>         caches.keys().then(cacheNames => {
>             return Promise.all(
>                 cacheNames
>                     .filter(cacheName => (cacheName.startsWith("pwa-")))
>                     .filter(cacheName => (cacheName !== staticCacheName))
>                     .map(cacheName => caches.delete(cacheName))
>             );
>         })
>     ); });
> 
> // Serve from Cache self.addEventListener("fetch", event => {
>     event.respondWith(
>         caches.match(event.request)
>             .then(response => {
>                 return response || fetch(event.request);
>             })
>             .catch(() => {
>                 return caches.match('/offline.html');
>             })
>     ) });

Ниже приведен код работника службы регистрации в meta.blade.php 

<script type="text/javascript">
    // Initialize the service worker
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/serviceworker.js', {
            scope: '.'
        }).then(function (registration) {
            // Registration was successful
            console.log('Laravel PWA: ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            // registration failed :(
            console.log('Laravel PWA: ServiceWorker registration failed: ', err);
        });
    }
</script>

Я хотел, чтобы всплывающее окно было только в PWA (если это возможно),Если нет, то на мобильном сайте (при открытии в браузере на мобильных устройствах). Во всплывающем окне пользователю предлагается удалить текущий PWA и открыть веб-сайт при наличии обновления и добавить новый PWA (Добавить на главный экран). Как я могу это сделать?

1 Ответ

2 голосов
/ 26 октября 2019

Если вы хотите, чтобы всплывающее окно отображалось только в PWA, а не в настольном или мобильном браузере, вам нужно просмотреть файл manifest.json.

Должно быть свойство с именем display"который должен быть установлен равным" standalone "

"display": "standalone"

Убедитесь, что он установлен правильно, и теперь вы можете проверить, использует ли пользователь автономное приложение (PWA) или нет, выполнив следующие действия: 

if(navigator.standalone) {
    alert('Thanks for using our PWA!')
} else {
    alert('Please consider downloading our PWA.')
}
...