在Firebase上託管的聚合物PWA在Safari移動版iOS中顯示空白屏幕，但在Chrome中非常完美（包括mac book，windows，android）

Polymer PWA應用程序在MacBook Chrome，Windows Chrome，Android Chrome瀏覽器中完美無瑕， MacBook Safari，iPhone Safari和iPhone Chrome。在Firebase上託管的聚合物PWA在Safari移動版iOS中顯示空白屏幕，但在Chrome中非常完美（包括mac book，windows，android）

網絡檢查器中顯示的零錯誤或零警告。

HTML頁面 - index.html的

<!doctype html> 
<!-- declare file type --> 
<html lang="en"> 
<head> 
<meta content-type="text/javascript" charset="utf-8"> 
<meta name="generator" content="App"> 
<meta name="viewport" content="width=device-width, minimum-scale=1, 
initial-scale=1, user-scalable=yes"> 
<meta http-equiv='X-UA-Compatible' content='IE=edge'> 

<title>MyApp</title> 
<meta name="description" content="My App description"> 
<base href="/"> 
<link rel="shortcut icon" sizes="24x24" href="/images/6e156046-3456- 
614b-4981-e136dfbf7d18.webPlatform.png"> 

<link rel="manifest" href="manifest.json"> 
<!-- Add to homescreen for Chrome on Android. Fallback for 
    manifest.json --> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="application-name" content="App"> 

<!-- Add to homescreen for Safari on iOS --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black- 
    translucent"> 
<meta name="apple-mobile-web-app-title" content="App"> 

    <!-- Homescreen icons --> 
    <link rel='icon' sizes='192x192' href='/images/27ab6cb7-8da3-a597- 
    b536-2edff24c3ac6.webPlatform.png'> 
<link rel="apple-touch-icon" href="/images/c9d9ff33-7849-0621-0359- 
    e5e70df7cbf8.webPlatform.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/images/31b30d4f- 
08f3-4faa-1fc2-15642e70b367.webPlatform.png"> 
<link rel="apple-touch-icon" sizes="96x96" href="/images/32f6784e- 
c13e-81a0-1721-594d5908c4ed.webPlatform.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/images/ece2893b- 
2863-9dfc-afe6-9c2a2961e540.webPlatform.png"> 
<link rel="apple-touch-icon" sizes="192x192" href="/images/27ab6cb7- 
8da3-a597-b536-2edff24c3ac6.webPlatform.png"> 

<!-- Tile icon for Windows 8 (144x144 tile color) --> 
<meta name="msapplication-TileImage" content="/images/ece2893b-2863- 
9dfc-afe6-9c2a2961e540.webPlatform.png"> 
<meta name="msapplication-TileColor" content="#3f51b5"> 
<meta name="msapplication-tap-highlight" content="no"> 
<meta name="msapplication-square70x70logo" 
content="/images/31b30d4f-08f3-4faa-1fc2- 
15642e70b367.webPlatform.png"> 
<meta name="msapplication-square152x152logo" 
    content="/images/7ec23c59-18dd-0218-3cad- 
    09183db6b7a2.webPlatform.png"> 
<script> 
    window.Polymer = {rootPath: '/'}; 
    // Load and register pre-caching Service Worker 
    if('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('/sw.js', { scope: '/' }) 
    .then(function(registration) { 
      console.log('Service Worker Registered - ' + 
    registration.scope); 
    }); 
    navigator.serviceWorker.ready.then(function(registration) { 
     console.log('Service Worker Ready'); 
    }); 
} 
</script> 
<script> 
    if (!window.HTMLImports) { 
     HTMLImports={}; 
    } 
</script> 

<link rel="import" href="bower_components/polymer/polymer- 
element.html"> 
<link rel="import" href="bower_components/paper-toast/paper- 
toast.html"> 
<link rel="import" href="bower_components/platinum-sw/platinum-sw- 
    cache.html"> 
<link rel="import" href="bower_components/platinum-sw/platinum-sw- 
register.html"> 

<link rel="import" href="ice.html"> 

<!-- Load your application shell --> 
<link rel="import" href="my-app.html"> 

<!-- Add any global styles for body, document, etc. --> 
<style> 
    body { 
    margin: 0; 
    font-family: 'Roboto', 'Noto', sans-serif; 
    line-height: 1.0; 
    min-height: 100vh; 
    background-color: #eeeeee; 
    } 
    </style> 
    </head> 
    <body> 
    <paper-toast id="toast" text="Hi, welcome to BizRec!"></paper- 
    toast> 
    <my-app></my-app>

Bower.json - >

"dependencies": { 
"app-layout": "PolymerElements/app-layout#^2.0.0", 
"app-route": "PolymerElements/app-route#^2.0.0", 
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0", 
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0", 
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0", 
"iron-pages": "PolymerElements/iron-pages#^2.0.0", 
"iron-selector": "PolymerElements/iron-selector#^2.0.0", 
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1", 
"polymer": "Polymer/polymer#^2.0.0", 
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0", 
"polymerfire": "firebase/polymerfire#^2.2.0", 
"paper-button": "PolymerElements/paper-button#^2.0.0", 
"paper-input": "PolymerElements/paper-input#^2.0.2", 
"iron-icons": "PolymerElements/iron-icons#^2.0.1", 
"iron-ajax": "PolymerElements/iron-ajax#^2.0.5", 
"paper-card": "PolymerElements/paper-card#^2.0.0", 
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.1", 
"iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0", 
"paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0", 
"paper-item": "PolymerElements/paper-item#^2.0.0", 
"paper-toast": "PolymerElements/paper-toast#^2.0.0", 
"paper-fab-speed-dial": "Collaborne/paper-fab-speed-dial#^2.3.1", 
"paper-avatar": "NeilujD/paper-avatar#^2.0.1", 
"app-toast": "jifalops/app-toast#^0.3.1", 
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0", 
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0", 
"paper-tooltip": "PolymerElements/paper-tooltip#^2.0.1", 
"neon-animation": "PolymerElements/neon-animation#^2.0.1", 
"paper-toolbar": "PolymerElements/paper-toolbar#^2.0.0", 
"iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^2.1.0", 
"vaadin-date-picker": "vaadin/vaadin-date-picker#^2.0.4", 
"d3-progress-meter": "Collaborne/d3-progress-meter#^1.1.1", 
"paper-pulsating-progress": "Collaborne/paper-pulsating-progress#^2.0.2", 
"paper-spinner": "PolymerElements/paper-spinner#^2.0.0", 
"paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0", 
"iron-collapse": "PolymerElements/iron-collapse#^2.0.0", 
"platinum-sw": "PolymerElements/platinum-sw#^2.0.0"}

似乎是在HTML進口或相對鏈接，我不能檢查一些問題。有沒有人有類似的問題？建議任何修復。

我正在使用Firebase部署命令在Firebase上託管PWA。

感謝， V

來源

2017-11-10 Vinayak Vanarse

谷歌Chrome目前具有用於Web組件的功能（模板，HTML進口，自定義元素和影子DOM）的本地支持的瀏覽器。對於其他瀏覽器，您需要在導入任何Web組件之前添加一個polyfill（webcomponentsjs）。

<script src="webcomponents-lite.js"></script> 
<link rel="import" src="my-element.html">

您可以看到瀏覽器支持Polymer 1.0 here。

和2.0 here。

來源

2017-11-11 11:16:09

嗨，謝謝。它有幫助。我現在能夠至少看到屏幕和新的錯誤。新錯誤是Error：Load polymer.html以使用Polymer（）函數。 _polymerFn - data：text/javascript; charset = utf-8，％0A ...％0A：39 –

And .... NotSupportedError（DOM Exception 9）：無法定義多個具有相同標記名稱的自定義元素 –

Hello @VinayakVanarse。不幸的是，我不能給你一個具體的答案，因爲我沒有看到源代碼......對於第一個錯誤，你檢查了你是否在你的元素中導入了polymer.html，或者路徑沒有任何錯字？而對於第二個錯誤：你檢查了你的元素註冊（在Polymer腳本和你分配給dom-module標籤的id）嗎？也許你已經註冊了兩個同名的元素。 –

在Firebase上託管的聚合物PWA在Safari移動版iOS中顯示空白屏幕，但在Chrome中非常完美（包括mac book，windows，android）

回答

相關問題