How to show an update popup only in PWA and not in website?

Question

I have a Laravel PWA created from scratch. I am using Laravel's Silviolleite PWA plugin.

I have created a service worker. Here is the code

> 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');
>             })
>     ) });

Below is the code of Registering Service worker in 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>

I wanted to have a popup only in a PWA (if possible). If not then on mobile website (when opened on the browser on mobile devices). The pop up prompts the user to delete the current PWA and open the website as there is an update and add new PWA(Add to home screen). How can I do this?

Answer 1

If you only want to have a popup only in the PWA and not on desktop or mobile browser, you'll want to look in your manifest.json file.

There should be a property called "display" that needs to be set equal to "standalone"

"display": "standalone"

Confirm this is set correctly and now you can check if the user is using a standalone app (PWA) or not by doing the following:

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