4

Android (7)의 최신 Chrome &에 홈 화면에 추가를 구현하려고합니다. 매니페스트 파일에 '독립형'을 지정했지만 브라우저에서만 앱이 열립니다. 전에 같은 장치에서 원하는 동작을 얻었지만 재현 할 수는 없습니다.PWA는 android에서 독립 실행 형 모드로 열리지 않습니다.

누군가가 this question에서 비슷한 문제를 겪고있는 것을 알 수 있습니다. Lighthouse에서 PWA 속성의 유효성을 검사하는 제안 된 솔루션을 따라 갔지만 완벽한 등대 점수를 100 점으로 받더라도 독립형 모드로 앱을 열 수는 없습니다.

아이디어가 있으십니까?

(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" 
    } 
    ] 
} 

편집 :

내가 V63 & 카나리아 V66 다시 비슷한 문제로 실행하고 로컬 호스트를 사용하여 동일한 문제가 발생하는 것 같다 - 독립에 시작할 수 없습니다입니다. 동일한 코드를 호스팅하고 HTTPS 사이트에 액세스하면 독립형으로 시작할 수있었습니다.

+1

동일한 문제가 있습니다. 유용한 정보를위한 몇 가지 추가 정보 : OS는 Android 7.0.0, Chrome 버전은 61.0.3163.98, Samsung Galaxy S6 –

+1

또한 앱 관리자 및 앱 서랍에 앱이 표시되며 그 밖의 모든 기능은 작동하는 것으로 보입니다. 응용 프로그램을 열면 시작 화면이 나타나지 않고 독립 실행 형으로 열리지 않습니다. –

+1

안드로이드 8의 Chrome 63에서 나에게 잘 돌아갔습니다. – abraham

답변

0

의견에 따르면, 이것은 Chrome 63 이상에서 수정 된 버그 인 것으로 보입니다.

편집 :

참조 위의 편집 - HTTPS를 통해 호스팅은 V63과 카나리아 V66에 나를 위해 같은 문제를 해결했다. Localhost는 앱이 독립 실행 형 모드로 실행되는 것을 허용하기에 충분하지 않을 수 있습니다.

+0

저는 모바일에서 크롬 개발자와 카나리아를 사용해 보았지만 여전히 독립 실행 형이 아닙니다. 앱 아이콘과 이름은 정확하지만 카나리아 버전에 주소 표시 줄이 표시됩니다. 64뿐만 아니라. nexus 6, android 7.1.1을 사용합니다. canary 64와 chrome dev 63로 시험해 보았습니다. 나의 mac 크롬을 카나리아로 업데이트하고, 행운을 빌어 검사를 시도했습니다. – Shnigi

+0

@Shnigi 늦게 답변을 드려 죄송합니다.하지만 다시이 문제가 발생하여이 게시물을 다시 방문했습니다.localhost에서 HTTPS로 전환하면 문제가 해결되었습니다! 편집을 참조하십시오. –

+0

그래, 나도 알아 냈어. 당신은 usb 케이블로 크롬 프록시를 사용할 수 있으며 작동합니다. – Shnigi

0

하나의 해결책은 원격 장치에서 개발자 도구의 프록시를 사용하는 것입니다. USB 케이블을 사용하여 장치를 연결하고 응용 프로그램을 프록시해야합니다. 이렇게하면 localhost도 사용할 수 있습니다.