6

I am trying to implement Add To Home Screen on the latest Chrome & Android (7). I have specified "standalone" in the manifest file but the app only opens in the browser. I've gotten the desired behavior before on the same device, but can't seem to reproduce it.

I see that someone had a similar issue in this question. I followed the suggested solution - validating PWA properties with Lighthouse - but even with a perfect 100 Lighthouse score, I am still unable to get the app to open in standalone mode.

Any ideas?

My code for reference (which is also on GitHub & hosted on GitHub Pages):

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A2HS Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0077c2"/>
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <p>Add To Home Screen</p>
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js')
        .then(reg => console.log('Registration success. Scope is ', reg.scope))
        .catch(err => console.log('Registration failed. ', err));
      }
    </script>
  </body>
</html>

sw.js

const cacheName = 'a2hs-test';
const resourcesToCache = [
  'index.html',
  'manifest.json',
  'icons/icon-512.png',
  'icons/icon-256.png',
  'icons/icon-96.png',
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(resourcesToCache);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

manifest.json

{
  "short_name": "A2HS",
  "name": "Add To Home Screen",
  "theme_color": "#0077c2",
  "background_color": "#42a5f5",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "icons/icon-96.png",
      "sizes": "96x96"
    },
    {
      "src": "icons/icon-256.png",
      "sizes": "256x256"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512"
    }
  ]
}

EDIT:

I ran into a similar issue again on v63 & Canary v66, and it seems like using localhost caused the same issue - unable to launch in standalone. Hosting the exact same code and accessing the HTTPS site allowed me to launch in standalone.

David
  • 2,846
  • 3
  • 22
  • 34

2 Answers2

1

As per the comments, this appears to simply be a bug that was fixed in Chrome 63+.

EDIT:

See edits above - hosting via HTTPS also solved the same issue for me on v63 and Canary v66. Localhost might not be sufficient to allow apps to launch in standalone mode.

David
  • 2,846
  • 3
  • 22
  • 34
  • I just tried with chrome dev and canary on mobile but still standalone doesnt work. The app icon and name is correct, but it will show the address bar in canary ver. 64 as well. Using nexus 6, android 7.1.1. Tried with canary 64 and chrome dev 63. Updated my mac chrome to canary as well and tried to inspect, with no luck. – Shnigi Nov 01 '17 at 09:00
  • @Shnigi sorry for the late response but I ran into this issue again and was revisiting this post. Shifting from localhost to HTTPS solved the issue though! See edits. – David Feb 02 '18 at 00:16
  • Yeah I figured it out as well. You can use chrome proxy with usb cable and it works. – Shnigi Feb 20 '18 at 13:10
0

One solution I found is to use the proxy from developer tools under remote devices. You have to use USB cable to connect your device and proxy the application, this way you can use localhost as well.

Shnigi
  • 972
  • 9
  • 19