Showcase Your PWA In Your Website

May 08, 2020 · 4 min read

#showdev #webdev #javascript #webcomponents

Two weeks ago, Matt Netkow introduced Ionic React in an online presentation of the Ionic Zürich Meetup.

After a couple of minutes he displayed a features I never ever had thought about before: he showcased in his presentation an interactive embedded apps 🤯.

This literally let me speachless. What if anybody would be able to embed any interactive applications and websites easily in any slides?

I was convinced as soon as his idea hit my brain and that’s why I am happy to share with you this new feature of DeckDeckGo, our web editor for presentations, and per extension, the new Web Component we are open sourcing!


It is not the first time Matt inspired me a feature. If the landing page of our project is also a presentation itself, it is also because once he said that he found the idea interesting. Definitely Matt, thank you for the inspiration!

If you are familiar with the Ionic ecosystem, you may already have noticed that the device’s frame showcased and used in the above example really looks like the one used in their documentation. I can’t argue about that and you are totally right. Instead of reinventing the wheel, we used the style code they published under MIT license. Thank you Ionic for everything you do for the web 🙏.


We are providing some guidance in our documentation and Stencil is also displaying how any components can be installed in with any frameworks.

Install From A CDN

To fetch the component from a CDN, as for example Unpkg, add the following to the header of your HTML.

<script type="module" src=""></script> <script nomodule="" src=""></script>

Install From NPM

To install the project from npm, run the following command in your terminal:

npm install @deckdeckgo/demo

According to your need, either import it:

import '@deckdeckgo/demo';

Or use a custom loader:

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/demo/dist/loader'; deckDeckGoElement();

Showcase Your Applications

To use the component and showcase your applications, use it as following where the property src is the URI of your Progressive Web Apps or website.

Note that we are also setting the property instant to true to render instantly the content as the default behavior of the component is set to be lazy loaded. In case of DeckDeckGo, to maximize the load performances, only the current and next slides’ assets, and therefore iframe too, are loaded iteratively.

<deckgo-demo src="" instant="true"> </deckgo-demo>

That’s it, you are showcasing your application 🎉.


The component will automatically calculate the size of its content according the host available size.

private async initSize() { const style: CSSStyleDeclaration | undefined = window ? window.getComputedStyle(this.el) : undefined; const width: number = style && parseInt(style.width) > 0 ? parseInt(style.width) : this.el.offsetWidth; const height: number = style && parseInt(style.height) > 0 ? parseInt(style.height) : this.el.offsetHeight; const deviceHeight: number = (width * 704) / 304; this.width = deviceHeight > height ? (height * 304) / 704 : width; this.height = deviceHeight > height ? height : deviceHeight; }

That’s why, you can either encapsulate it in a container and make it responsive or assign it a size using styling.

<deckgo-demo src="" instant="true" style="width: 40vw; height: 90vh;"> </deckgo-demo>

Note also that the component will listen to resizing of the browser. Therefore, each time its size will change, it will resize itself automatically.

window.removeEventListener('resize', debounce(this.onResizeContent, 500)); private onResizeContent = async () => { await this.initSize(); await this.updateIFrameSizeReload(); };

Worth to notice too that in order to be sure that the content of your integrated app fits correctly, on each resize of the browser, it will be reloaded too. This is achieved with the following ugly beautiful hack to reload cross-domain iframe .

iframe.src = iframe.src;


Moreover than in slides, in which I definitely see a use case for such components because I am already looking forward to use it for my personal talks, I think it might be useful too, if for example, you are displaying a showcase of your realization in your website.

I also hope it made you eager to give DeckDeckGo a try for your next presentations 😊.

To infinity and beyond!



Read the article

Angular: The Single Rule To Get Better At RxJS

September 10th 2021 · 10 min read

#angular #rxjs #javascript #beginners

Read the article

Internet Computer: Web App Decentralized Database Architecture

August 17th 2021 · 9 min read

#webdev #serverless #database #blockchain

Read the article

Singleton & Factory Patterns With TypeScript

July 26th 2021 · 4 min read

#javascript #beginner #webdev #programming

More articles

My company address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub