CODEWITHSUNDEEP
firebasepolymer
Vinayak Vanarse
Vinayak Vanarse

Reputation: 81

Polymer PWA hosted on firebase shows blank screen in Safari mobile iOS but works perfect in Chrome (both mac book, windows, android)

Polymer PWA app works perfectly fine in MacBook Chrome, Windows Chrome, Android Chrome browser but shows blank screen in MacBook Safari, iPhone Safari and iPhone Chrome.

Zero Errors or Zero warnings shown in web inspector.

HTML page - 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"}

There seems to be some issue in html imports or rel link that I am not able to check. Has anyone had similar issues? any fix recommended.

I am using Firebase deploy command to host the PWA on firebase.

Thanks, V

Upvotes: 0

Views: 1116

Answers (1)

Manuel Lopez
Manuel Lopez

Reputation: 378

Google Chrome is currently the only browser that has a native support for web components features (templates, HTML imports, custom elements and shadow DOM). For the other browsers you need to include a polyfill (webcomponentsjs) before importing any web component.

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

You can see browsers support for Polymer 1.0 here.

And for 2.0 here.

Upvotes: 0

Related Questions