CODEWITHSUNDEEP
progressive-web-apps
Riesling
Riesling

Reputation: 6583

Detect webrequest coming from PWA on the server side

I'm adding PWA support to a web app. I want to add a back-button to the interface for iOS when the app is used as a PWA but not when used in the old fashioned way in Safari (or another browser).

I know I can detect this via JS - so I could just show/hide the back-button at runtime, but I would like to know if there is any way to detect in on the server-side already (apache/php). I guess there will be more use-cases coming up to serve slightly different content.

I guess I could set a cookie, but I want to make sure there is nothing more easy/obvious to use, some new header for example.

Upvotes: 4

Views: 1517

Answers (1)

Riesling
Riesling

Reputation: 6583

Found one more way in the meantime to do it, apart from cookies. Sending a custom http header via a service worker.

app.js

navigator.serviceWorker.register('/sw.js').then(registration => {
    if(registration.active) {
        const sw = registration.active;
        sw.postMessage({
            'is_pwa': is_pwa()
        });
    }
});

sw.js

var myHeader = new Headers(event.request.headers);
    if (is_pwa) {
        myHeader.append('ISPWA', is_pwa ? is_pwa : "");
    }
    var config = {
        headers: myHeader
    };
    if(navigator.onLine !== false) {
        event.respondWith(fetch(request).catch(function(error) {
            fetch(request, config).catch(function() {
            [...]

php

var_dump($_SERVER['HTTP_ISPWA']);

Upvotes: 3

Related Questions