googlecodelabs / your-first-pwapp

Code associated with Your First Progressive Web App codelab
https://g.co/codelabs/pwa
Apache License 2.0
637 stars 554 forks source link

Cannot read property 'prompt' of null #189

Closed ilhamsr closed 5 years ago

ilhamsr commented 5 years ago

I was following the tutorial but get an error in the seventh step, the error was

Uncaught TypeError: Cannot read property 'prompt' of null at HTMLButtonElement.installPWA (install.js:50)

and this is my install.js :

/*
 * @license
 * Your First PWA Codelab (https://g.co/codelabs/pwa)
 * Copyright 2019 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License
 */
'use strict';

let deferredInstallPrompt = null;
const installButton = document.getElementById('butInstall');
installButton.addEventListener('click', installPWA);

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

/**
 * Event handler for beforeinstallprompt event.
 *   Saves the event & shows install button.
 *
 * @param {Event} evt
 */
function saveBeforeInstallPromptEvent(evt) {
  console.log("ahoy")
  // CODELAB: Add code to save event & show the install button.
  deferredInstallPrompt = evt;
  installButton.removeAttribute('hidden');
  console.log("HERE");
}

/**
 * Event handler for butInstall - Does the PWA installation.
 *
 * @param {Event} evt
 */
function installPWA(evt) {
  // CODELAB: Add code show install prompt & hide the install button.
  console.log("Clicked");
  **deferredInstallPrompt.prompt();  //LINE 50 HERE**
  // Hide the install button, it can't be called twice.
  evt.srcElement.setAttribute('hidden', true);
  // CODELAB: Log user response to prompt.
  deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });
}

// CODELAB: Add event listener for appinstalled event

/**
 * Event handler for appinstalled event.
 *   Log the installation to analytics or save the event somehow.
 *
 * @param {Event} evt
 */
function logAppInstalled(evt) {
  // CODELAB: Add code to log the event
  window.addEventListener('appinstalled', logAppInstalled);
  console.log('Weather App was installed.', evt);
}

i'm just copied all the instruction in the tutorial but why i get this error 🤔

ilhamsr commented 5 years ago

nevermind, it works great on my phone

DKhateek1372 commented 4 years ago

But Dude its not working on myside.

R4W3 commented 3 years ago

Easy fix: Make sure all files linked to actually exist. e.g. Icons etc.