Installable to the home screen


#1

Hi,

I try to make my web app “installable” to the home screen.
So i follow this: https://developers.google.com/web/fundamentals/web-app-manifest/?utm_source=devtools

I create the manifest.json and i add <link rel="manifest" href="/manifest.json"> to the first page.

But in the inspector of the web browser, there is the message “No manifest detected”.
And localhost:3000/manifest.json is accessible, and show me the correct json file.

How to make it working?

Thanks in advance.


#2

I put the <link rel="manifest" href="/manifest.json"> in index.html and in the inspector i can see the manifest.

But now how to show the add to home screen banner?
There is some code here https://developers.google.com/web/fundamentals/app-install-banners/#pwa-criteria
How to adapt the code to meteor?


#3

Shouldn’t have to do anything special to adapt to Meteor.
Is there a particular part that doesn’t work for you?


#4

You need to have a service worker set up and running.

The meta tag looks right. Where did you created the manifest? Must be at the root of the /public folder.


#5

The part that doesnt work is to show the add to home screen banner.

let deferredPrompt;

    window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    // Update UI notify the user they can add to home screen
    btnAdd.style.display = 'block';
});

btnAdd.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    btnAdd.style.display = 'none';
    // Show the prompt
    deferredPrompt.prompt();
    // Wait for the user to respond to the prompt
    deferredPrompt.userChoice
        .then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('User accepted the A2HS prompt');
            } else {
                console.log('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
        });
});

There is a lot of error in my editor and when i run meteor:
Uncaught ReferenceError: btnAdd is not defined

I do not have a service worker, is it possible to add this in a meteor web app?
The manisfet.json is in the public folder and it load now.


#6

Possible, but not as easy as everything else in Meteor.


#7

You need a service worker indeed. And it’s as easy as adding it to any other app.
You don’t need a full blown service worker with caching mechanisms. So start with only what you need. Place it into the root of the /public folder and load it from there.

For my app I currently only need push notifications, so I just implemented handling for those. Additionally I just implemented an empty fetch handler. That meets already the minimum requirement to be able to show the banner.


#8

@vuhrmeister Do you have an example of code for the service worker, the minimum requirement to be able to show the banner please?


#9

I think the only requirement is to have a fetch handler. In my case I just added an empty handler:

self.addEventListener('fetch', function (event) {})