So wird aus WordPress eine App
Update: 2018-09-19
Description
WordPress soll eine App werden? Kein Problem! Die Technologie Progressive Web Apps wird die App-Welt (gott sei dank) verändern: damit kann jede responsive Webseite eine native App auf dem Smartphone werden.
WordPress mit dieser Technologie auszustatten ist sehr einfach und bietet bereits: Push Notifications und Offline Content, jedoch mit Einschränkungen. In meinem Podcast erkläre ich euch den bisherigen Stand und auf was ihr achten solltet. Eine komplette Anleitung zur Installation findet ihr auf meinem Technik-Blog.
<root data-test="player--xl" style="max-width:950px;min-width:260px;">
<show-title class="text-sm"></show-title>
<episode-title class="text-base mb-2"></episode-title>
<subscribe-button class="mb-4 mobile:flex tablet:hidden"></subscribe-button>
<poster class="rounded-sm w-48 shadow overflow-hidden"></poster>
<divider class="w-full my-6"></divider>
<poster class="rounded-sm shadow overflow-hidden"></poster>
<show-title class="text-base"></show-title>
<episode-title class="text-xl desktop:text-2xl"></episode-title>
<divider class="w-full my-4"></divider>
<play-state on="active">
<speed-control class="flex items-center"></speed-control>
</play-state>
<play-state on="active">
<chapter-previous class="mx-2 block"></chapter-previous>
</play-state>
<play-state on="active">
<step-backward class="mx-2 block"></step-backward>
</play-state>
<play-button class="mx-2 block" :label="$t('PLAYER.PLAY_EPISODE')"></play-button>
<play-state on="active">
<step-forward class="mx-2 block"></step-forward>
</play-state>
<play-state on="active">
<chapter-next class="mx-2 block"></chapter-next>
</play-state>
<play-state on="active">
<volume-control class="flex items-center"></volume-control>
</play-state>
<progress-bar></progress-bar>
<timer-current class="text-sm"></timer-current>
<play-state on="active">
<current-chapter class="text-sm"></current-chapter>
</play-state>
<timer-duration class="text-sm"></timer-duration>
<divider class="w-full mt-6 mb-3"></divider>
<tab-trigger tab="chapters">
<icon type="chapter"></icon>
</tab-trigger>
<tab-trigger tab="transcripts">
<icon type="transcripts"></icon>
</tab-trigger>
<tab-trigger tab="files">
<icon type="download"></icon>
</tab-trigger>
<tab-trigger tab="playlist">
<icon type="playlist"></icon>
</tab-trigger>
<tab-trigger tab="share">
<icon type="share"></icon>
</tab-trigger>
<subscribe-button class="mt-1 mobile:hidden tablet:flex"></subscribe-button>
<tab name="chapters">
<tab-chapters></tab-chapters>
</tab>
<tab name="transcripts">
<tab-transcripts></tab-transcripts>
</tab>
<tab name="files">
<tab-files></tab-files>
</tab>
<tab name="playlist">
<tab-playlist></tab-playlist>
</tab>
<tab name="share">
<tab-share></tab-share>
</tab>
<tab-overflow></tab-overflow>
<error></error>
</root>
<show-title class="text-sm"></show-title>
<episode-title class="text-base mb-2"></episode-title>
<subscribe-button class="mb-4 mobile:flex tablet:hidden"></subscribe-button>
<poster class="rounded-sm w-48 shadow overflow-hidden"></poster>
<divider class="w-full my-6"></divider>
<poster class="rounded-sm shadow overflow-hidden"></poster>
<show-title class="text-base"></show-title>
<episode-title class="text-xl desktop:text-2xl"></episode-title>
<divider class="w-full my-4"></divider>
<play-state on="active">
<speed-control class="flex items-center"></speed-control>
</play-state>
<play-state on="active">
<chapter-previous class="mx-2 block"></chapter-previous>
</play-state>
<play-state on="active">
<step-backward class="mx-2 block"></step-backward>
</play-state>
<play-button class="mx-2 block" :label="$t('PLAYER.PLAY_EPISODE')"></play-button>
<play-state on="active">
<step-forward class="mx-2 block"></step-forward>
</play-state>
<play-state on="active">
<chapter-next class="mx-2 block"></chapter-next>
</play-state>
<play-state on="active">
<volume-control class="flex items-center"></volume-control>
</play-state>
<progress-bar></progress-bar>
<timer-current class="text-sm"></timer-current>
<play-state on="active">
<current-chapter class="text-sm"></current-chapter>
</play-state>
<timer-duration class="text-sm"></timer-duration>
<divider class="w-full mt-6 mb-3"></divider>
<tab-trigger tab="chapters">
<icon type="chapter"></icon>
</tab-trigger>
<tab-trigger tab="transcripts">
<icon type="transcripts"></icon>
</tab-trigger>
<tab-trigger tab="files">
<icon type="download"></icon>
</tab-trigger>
<tab-trigger tab="playlist">
<icon type="playlist"></icon>
</tab-trigger>
<tab-trigger tab="share">
<icon type="share"></icon>
</tab-trigger>
<subscribe-button class="mt-1 mobile:hidden tablet:flex"></subscribe-button>
<tab name="chapters">
<tab-chapters></tab-chapters>
</tab>
<tab name="transcripts">
<tab-transcripts></tab-transcripts>
</tab>
<tab name="files">
<tab-files></tab-files>
</tab>
<tab name="playlist">
<tab-playlist></tab-playlist>
</tab>
<tab name="share">
<tab-share></tab-share>
</tab>
<tab-overflow></tab-overflow>
<error></error>
</root>
<script>
document.addEventListener("DOMContentLoaded", function() {
var player = document.getElementById("player-655aa7a02dee6");
podlovePlayerCache.add([{"url":"https:\/\/wpcast.de\/wp-json\/podlove-web-player\/shortcode\/publisher\/183","data":{"version":5,"show":{"title":"WPcast","subtitle":"Der WordPress Podcast","summary":"WordPress ist ein grandioses und vielf\u00e4ltiges Webwerkzeug. Der Podcast rund um die professionelle Anwendung und Anpassung von WordPress.\r\nhttps:\/\/flattr.com\/podcast\/wpcast","poster":"https:\/\/wpcast.de\/files\/2018\/03\/ituneslogo.png","link":"https:\/\/wpcast.de"},"title":"So wird aus WordPress eine App","subtitle":"Progressive Web Apps mit WordPress","summary":"WordPress soll eine App werden? Kein Problem! Die Technologie Progressive Web Apps wird die App-Welt (gott sei dank) ver\u00e4ndern: damit kann jede responsive Webseite eine native App auf dem Smartphone werden.\u00a0\r\n\r\nWordPress mit dieser Technologie auszustatten ist sehr einfach und bietet bereits: Push Notifications und Offline Content, jedoch mit Einschr\u00e4nkungen. In meinem Podcast erkl\u00e4re ich euch den bisherigen Stand und auf was ihr achten solltet. Eine komplette Anleitung zur Installation findet ihr auf meinem Technik-Blog.","publicationDate":"2018-09-19T16:46:09 +02:00 ","duration":"00:06:27 .533","poster":"https:\/\/wpcast.de\/files\/2018\/09\/phone.jpg","link":"https:\/\/wpcast.de\/so-wird-aus-wordpress-eine-app\/","chapters":[],"audio":[{"url":"http:\/\/dts.podtrac.com\/redirect.mp3\/wpcast.de\/podlove\/file\/80\/s\/webplayer\/c\/website\/folge12.ogg","size":"12593839","title":"Ogg Vorbis Audio (ogg)","mimeType":"audio\/ogg"},{"url":"http:\/\/dts.podtrac.com\/redirect.mp3\/wpcast.de\/podlove\/file\/79\/s\/webplayer\/c\/website\/folge12.mp3","size":"9309133","title":"MP3 Audio (mp3)","mimeType":"audio\/mpeg"}],"files":[{"url":"http:\/\/dts.podtrac.com\/redirect.mp3\/wpcast.de\/podlove\/file\/79\/s\/webplayer\/folge12.mp3","size":"9309133","title":"MP3 Audio","mimeType":"audio\/mpeg"},{"url":"http:\/\/dts.podtrac.com\/redirect.mp3\/wpcast.de\/podlove\/file\/80\/s\/webplayer\/folge12.ogg","size":"12593839","title":"Ogg Audio","mimeType":"audio\/ogg"}]}}, {"url":"https:\/\/wpcast.de\/wp-json\/podlove-web-player\/shortcode\/config\/default\/theme\/default","data":{"activeTab":"files","subscribe-button":{"feed":"https:\/\/wpcast.de\/feed\/mp3\/","clients":[{"id":"apple-podcasts","service":"https:\/\/itunes.apple.com\/de\/podcast\/wpcast\/id1342379627?l=de"},{"id":"spotify","service":"https:\/\/open.spotify.com\/show\/5CHtkaGmDHqcYHlC7JTexp"},{"id":"google-podcasts","service":"https:\/\/wpcast.de\/feed\/mp3\/"},{"id":"stitcher","service":"https:\/\/www.stitcher.com\/podcast\/wpcast?refid=stpr"},{"id":"rss","service":"https:\/\/wpcast.de\/feed\/mp3\/"}]},"share":{"channels":["facebook","twitter","whats-app","linkedin","pinterest","xing","mail","link"],"outlet":"https:\/\/wpcast.de\/wp-content\/plugins\/podlove-web-player\/web-player\/share.html","sharePlaytime":true},"related-episodes":{"source":"disabled","value":null},"version":5,"theme":{"tokens":{"brand":"rgba(33, 117, 155, 1)","brandDark":"rgba(33, 117, 155, 1)","brandDarkest":"rgba(33, 117, 155, 1)","brandLightest":"rgba(233, 241, 245, 1)","shadeDark":"#807E7C","shadeBase":"#807E7C","contrast":"#000","alt":"#fff"},"fonts":{"ci":{"name":"ci","family":["Open Sans","-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji\", \"Segoe UI Symbol"],"src":[],"weight":600},"regular":{"name":"regular","family":["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji\", \"Segoe UI Symbol"],"src":[],"weight":300},"bold":{"name":"bold","family":["-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Helvetica","Arial","sans-serif","Apple Color Emoji","Segoe UI Emoji\", \"Segoe UI Symbol"],"src":[],"weight":700}}},"base":"https:\/\/wpcast.de\/wp-content\/plugins\/podlove-web-player\/web-player\/"}}]);
podlovePlayer(player, "https://wpcast.de/wp-json/podlove-web-player/shortcode/publisher/183", "https://wpcast.de/wp-json/podlove-web-player/shortcode/config/default/theme/default").then(function() {
player && player.classList.remove("podlove-web-player-loading");
});
});
</script>
Comments
Top Podcasts
The Best New Comedy Podcast Right Now – June 2024The Best News Podcast Right Now – June 2024The Best New Business Podcast Right Now – June 2024The Best New Sports Podcast Right Now – June 2024The Best New True Crime Podcast Right Now – June 2024The Best New Joe Rogan Experience Podcast Right Now – June 20The Best New Dan Bongino Show Podcast Right Now – June 20The Best New Mark Levin Podcast – June 2024
In Channel