Calling plugin while using Capacitor as Script include for PWA #3174

mark-divitt · 2020-06-29T20:23:21Z

mark-divitt
Jun 29, 2020

Hi Folks,
Capacitor newbie here. I am working with a PWA. I have successfully included Capacitor Core into my webapp (via Script include), so things like this works:
const isAvailableCamera = Capacitor.isPluginAvailable('Camera');
console.log('Camera :' + isAvailableCamera); // Returns true

However, when I call this:

Camera.getPhoto();

It fails with:

app.js:92 Uncaught ReferenceError: Camera is not defined

also tried : Plugins.Camera.getPhoto(); with same result

So somehow the Plugins are not being included into capacitor.js or I am referencing them wrong.

Please note that I am not calling import anywhere, relying on script include to include plugins

capacitor.js is minified, so rather hard to read.

Not a lot of examples for the "Script include" way of doing things.

I am not using Ionic in this case, I am using Framework7.

I did all the steps in this set of instructions :

Using Capacitor as a Script Include
To use Capacitor core in a web app that is not using a build system or bundler/module loader, you must set bundledWebRuntime to true in your capacitor.config.json, tell capacitor to copy the specified version of Capacitor Core into your project, and then import capacitor.js into your index.html:

{
  "bundledWebRuntime": true
}
Copy to your project:

npx cap copy web
In index.html, import capacitor.js before your app's JS:

<script src="capacitor.js"></script>
<script src="your/app.js"></script>

Thanks in advance for your help!
Mark

Answered by dotNetkow

Jun 30, 2020

OK, here's a working example in one HTML file. You can open this on the file system or via npx cap serve (local web server).

The docs here are most of the way there - I will update soon but in the meantime, here's a WIP full example (subject to change!)

You must include the capacitor.js file locally. It can be found under node_modules/@capacitor/core/dist/capacitor.js or will get copied into your project automatically from there by running the npx cap copy web command (as the docs mention).

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Capacitor: Vanilla JS</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=…

View full answer

dotNetkow · 2020-06-29T21:15:55Z

dotNetkow
Jun 29, 2020

Hey Mark, my guess is that you're not including PWA Elements, which is required for the Camera to work in a PWA.

Here's the script tag details.

4 replies

mark-divitt Jun 29, 2020
Author

Hi dotNetkow,
Thanks for the idea, however I did include those with no luck, same exact issue...

index.html:
...

....

Thanks,
Mark

dotNetkow Jun 29, 2020

Do you have a tag in the index.html by chance? it's required, as Capacitor is injected there upon app initialization.

It's (very newly) mentioned in the Installation page, but I'll update the /docs/web page too).

mark-divitt Jun 29, 2020
Author

I do not believe so, which tag?

dotNetkow Jun 30, 2020

Oh sorry! Looks like GitHub stripped out the head tag mention. oops! Trying to build this example out now, stay tuned.

mark-divitt · 2020-06-30T02:21:10Z

mark-divitt
Jun 30, 2020
Author

Ah, I see now. My index.html does have a

<head>
...lots of meta and link elements
</head>

0 replies

mark-divitt · 2020-06-30T02:24:24Z

mark-divitt
Jun 30, 2020
Author

I assume you are referring to this section of the installation doc

 In addition, a <head> element is needed in the main index.html file, as Capacitor is injected there upon app initialization.

0 replies

mark-divitt · 2020-06-30T18:15:31Z

mark-divitt
Jun 30, 2020
Author

Thank you!

…

On Tue, Jun 30, 2020 at 11:55 AM Matt Netkow ***@***.***> wrote: Oh sorry! Looks like GitHub stripped out the head tag mention. oops! Trying to build this example out now, stay tuned. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3174 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6AV72EGIHT5LOLSO7A3PTRZIKHPANCNFSM4OLR6VDA> .

0 replies

dotNetkow · 2020-06-30T21:24:36Z

dotNetkow
Jun 30, 2020

OK, here's a working example in one HTML file. You can open this on the file system or via npx cap serve (local web server).

The docs here are most of the way there - I will update soon but in the meantime, here's a WIP full example (subject to change!)

You must include the capacitor.js file locally. It can be found under node_modules/@capacitor/core/dist/capacitor.js or will get copied into your project automatically from there by running the npx cap copy web command (as the docs mention).

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Capacitor: Vanilla JS</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
  <script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>
  <script src="capacitor.js"></script>
  <script>
    async function takePicture() {
      const { Camera } = Capacitor.Plugins;
      const photo = await Camera.getPhoto({
          quality: 90,
          resultType: "uri"
        });
      
      const image = document.getElementById("photo");
      image.src = photo.webPath;
    }
  </script>
  </head>
  <body>
    <div id="app">
      <button type="button" onclick="takePicture();">Capture photo</button>
      <img id="photo"> 
    </div>
  </body>
</html>

4 replies

mark-divitt Jul 8, 2020
Author

Excellent, thank you very much. This helped me get this working...

would be different for Capacitor v3, since plugins are not included in capacitor.js?

Im having a nightmare with plugins not included in Capacitor 3, I think i might go back to v2

Calling plugin while using Capacitor as Script include for PWA #3174

Uh oh!

Replies: 5 comments · 8 replies

Uh oh!

Uh oh!

Uh oh!

mark-divitt Jun 29, 2020 Author

Uh oh!

Uh oh!

mark-divitt Jun 29, 2020 Author

Uh oh!

Uh oh!

Uh oh!

mark-divitt Jun 30, 2020 Author

Uh oh!

Uh oh!

mark-divitt Jun 30, 2020 Author

Uh oh!

mark-divitt Jun 30, 2020 Author

Uh oh!

Uh oh!

mark-divitt Jul 8, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 8 replies

mark-divitt Jun 29, 2020
Author

mark-divitt Jun 29, 2020
Author

mark-divitt
Jun 30, 2020
Author

mark-divitt
Jun 30, 2020
Author

mark-divitt
Jun 30, 2020
Author

mark-divitt Jul 8, 2020
Author