Add support for custom pwa elements

[Lexpeartha]

My first try at implementing PWA Elements, currently doesn't work
Since original capacitor documentation doesn't mention anything about Vue specifically, I figured it might be just the matter about executing defineCustomElements(window) once vue app is ready, for which I chose client plugin.

However I'm plagued by errors, as seen in the image below. Tried to debug them, but after trying can't figure out what might be wrong. Before this I also tried registering setupCustomComponents function with code similar to this plugin as a callback to certain hook, however I couldn't find suitable one from the list that executes at the time where window is defined. @danielroe some of your input would be greatly appreciated 👍🏽

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @danielroe on Vercel.

@danielroe first needs to authorize it.

[codecov-commenter]

Codecov Report

Merging #21 (7041a0b) into main (ae040b4) will increase coverage by 0.20%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main      #21      +/-   ##
==========================================
+ Coverage   92.61%   92.82%   +0.20%     
==========================================
  Files           6        6              
  Lines         379      390      +11     
  Branches       34       34              
==========================================
+ Hits          351      362      +11     
  Misses         28       28              

Impacted Files	Coverage Δ
src/module.ts	96.61% <100.00%> (+0.16%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ae040b4...7041a0b. Read the comment docs.

[danielroe]

I'll take a longer look later, but the issue I was running against (and which you are too) seems likely a result of esm/cjs dependencies as processed by vite.

Try this to get a different error 😆

  vite: {
    optimizeDeps: {
      exclude: ['@ionic/pwa-elements/loader', '@ionic/pwa-elements'],
    },
  },

[Lexpeartha]

Now that you pointed me in the right direction, it appears that this is issue with ionic-team/pwa-elements#109 library itself, which would explain error about dynamically imported module

[aaronksaunders]

you can work around this issue by importing the pwaElements in the header
#14 (comment)

[Lexpeartha]

you can work around this issue by importing the pwaElements in the header

I'm not sure importing 3rd party script in header is very reliable. Also it wouldn't work offline

[aaronksaunders]

It is a recommended approach in the documentation, but yes it would not work offline. PWA Elements - Capacitor (capacitorjs.com) <https://capacitorjs.com/docs/web/pwa-elements#including-through-script-tag> Although I suspect, as someone who has been using Ionic for years, that most people utilizing Ionic aren't building offline PWAs so I wanted to make sure they knew there was an alternative to address this issue in some scenarios so they could move forward at this time. So the issue really is about supporting Custom PWAs when offline.

…

-- Aaron K. Saunders CEO Clearly Innovative Inc ***@***.*** www.clearlyinnovative.com This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

On Fri, Jul 15, 2022 at 3:30 AM Lexpeartha ***@***.***> wrote: you can work around this issue by importing the pwaElements in the header I'm not sure importing 3rd party script in header is very reliable. Also it wouldn't work offline — Reply to this email directly, view it on GitHub <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEAFGOJP7YS3E3GRSOKMVDVUEHQPANCNFSM52PGJI3Q> . You are receiving this because you commented.Message ID: ***@***.***>

[Lexpeartha]

It is a recommended approach in the documentation, but yes it would not work offline. PWA Elements - Capacitor (capacitorjs.com) https://capacitorjs.com/docs/web/pwa-elements#including-through-script-tag Although I suspect, as someone who has been using Ionic for years, that most people utilizing Ionic aren't building offline PWAs so I wanted to make sure they knew there was an alternative to address this issue in some scenarios so they could move forward at this time. So the issue really is about supporting Custom PWAs when offline.

I think script was only added as a fallback when library doesn't work, which is in this case. This isn't surprising considering that Ionic (once it came out with Vue support) didn't support Vite as well, and they only added support for it in v6. I think Ionic's ecosystem just needs some time to catch-up with the vite tooling 👍🏽

Also I think PWAs are very important to consider, especially since in the docs it is listed as supported integration