– Die ersten 500 Personen, die sich anmelden, erhalten die ersten 2 Monate kostenlos! — Sehen Sie sich die Live-PWA aus diesem Tutorial an: — Letzte Woche habe ich einen kostenlosen Ionic 4-Crashkurs veröffentlicht, in dem wir eine einfache App erstellt haben. Heute nehme ich dieselbe App (github unten) und zeige Ihnen, wie Sie sie in eine PWA (Progressive Web App) umwandeln. Der von mir verwendete Prozess ist auch derselbe Prozess, der mit reinen Angular-Apps funktioniert, da er die @angular/pwa-Bibliothek verwendet. Github für das Startprojekt: Los geht’s! – – – – – – – – – – – – – – – – – – – – – Abonnieren Sie NEUE VIDEOS! Meine Seite: Mein persönlicher FB-Account: Coursetro FB: Coursetros Twitter: Join my Discord! ^-Chat mit mir und anderen – – – – – – – – – – – – – – – – – – – – – Wer ist Gary Simon? Nun, ich bin ein Full-Stack-Entwickler mit mehr als 2 Jahrzehnten Erfahrung und bringe Leuten bei, wie man entwirft und programmiert. Ich habe über 100 Kurse für große Marken wie LinkedIn, Lynda.com, Pluralsight und Envato Network erstellt. Jetzt konzentriere ich all meine Zeit und Energie auf diesen Kanal und meine Website Coursetro.com. Komm zu meinem Discord-Server oder füge mich in den sozialen Medien hinzu und sag Hallo! .

Kommentare (24)

  • DesignCourse Antworten

    Anyone create an actual PWA yet? Link us!

    21. Februar 2019 um 17:41
  • Srdjan Stojanovic Antworten

    Can you make website in HTML and CSS that you made in (Creating a modern web design Illustration using Adobe Illustrator CC 2019(Tutorial)).I would be thankful.

    21. Februar 2019 um 22:41
  • AP Tech Antworten

    How to create live code editor for website like w3school…???

    21. Februar 2019 um 22:45
  • AdamsTaiwan Antworten

    I would like to make a suggestion. Put all the command line instructions(with comments) in a .bat to be included in the project. Open in vsCode then when demoing you can use the code runner tool and press F8 on each line to execute. This would be helpful for anyone who needs to follow the steps that you show in your tutorials.

    22. Februar 2019 um 2:11
  • Design Medium Antworten

    Your tutorials are the best!

    22. Februar 2019 um 2:32
  • Rushikesh ganesh Antworten

    Good tutorial

    22. Februar 2019 um 5:16
  • Rushikesh ganesh Antworten

    I want ask some questions about Ionic 3 of scrolling if I want to scroll to specific position in the scroll bar content how to do it ?

    22. Februar 2019 um 5:17
  • Ramzi Al-Selwi Antworten

    thank you so much for putting this video.

    4. März 2019 um 22:14
  • valcron1000 Antworten

    Gary, when I try to test locally my PWA I get an 'INVALID_REDIRECT' error. Do you know how to fix it? I followed every step and yet I can't seem to get it working. I'm running Windows 10, Node v11.13.0 and NPM v6.7.0

    Also, if I try to serve the app with 'ionic serve', in the Application tab I get 'service worker does not control the start url'.

    Well, at least the icons load fine.

    27. Mai 2019 um 16:51
  • shamse sysi Antworten

    Can i make ionic using WP REST API as PWA app ?

    5. Juni 2019 um 12:40
  • Raad Yacu Antworten

    Does this work with iPhone also? or is this just for Android? If iPhone ,then is there any specific step for it?

    2. Juli 2019 um 4:55
  • pmadubois Antworten

    I followed the tutorial and I got the prompt to "add to homescreen" on my android, but not on my Iphone

    26. Juli 2019 um 11:56
  • We$tern | Prophet Antworten

    hi, great tutorial, but what if I dont want to use firebase?
    I want to build out my pwa, and upload to my server, but i only get blank page.

    3. August 2019 um 13:16
  • funny mnts Antworten

    i ma getting issu like Manifest: Line: 1, column: 1, Syntax error.

    16. August 2019 um 9:05
  • A Antworten

    Can you please help me?

    I always get

    > ng.cmd run app:serve –host=localhost –port=8100

    [ng] Schema validation failed with the following errors:

    [ng] Data path ".builders['app-shell']" should have required property 'class'.

    [ERROR] ng has unexpectedly closed (exit code 1).

    What do I need to do?

    5. September 2019 um 10:51
  • Pannir Selvam M Antworten

    Is there any other way of deploying PWA without using firebase

    8. September 2019 um 3:36
  • Daniel TC Antworten

    The image generator is not working anymore 🙁

    10. Dezember 2019 um 13:33
  • CrazyCosmichild (Diseñador Gráfico) Antworten

    more angular pwa tutorials pleasee

    8. Februar 2020 um 19:31
  • Erez Boym Antworten

    Love the tutorial, full and simple to follow.

    Only one minor issue:
    1) If after deployment to firebase you get a you get a standard firebase opening screen instead of your own APP than make shore that your firebase json has "public": "www" (www = where your deployment is located.)
    the standard firebase index in automatically generated and is placed in the "public" directory, the defaults location from where firebase loads files.

    2) The "save on home screen" Icon is not set by automatically. To have your own Icon on the Ios device you need to add the following lines to the www/index.html file:

    <link rel="apple-touch-icon" href="<poath to the icon file>touch-icon-iphone.png">

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link href="<pass to the splash file>/apple_splash_2048.png" sizes="2048×2732" rel="apple-touch-startup-image" />

    and create the PNG files themselves.

    3) The APP can work offline only if it has no resource. If you have a <ion-img in your APP than it will not work offline.

    But, as I noted, a very good tutorial !

    Thanks for the effort you invested in it.

    15. März 2020 um 13:05
  • Kenny Wong Antworten

    Hi guys, will the PWA code (HTML, CSS, javascripts) built from ionic be easily viewed by others? How can we do to improve the security? How can we do to avoid codes being stole by other developers?

    7. April 2020 um 9:20
  • Hukam Antworten

    Can we build PWA with ionic 3 please help ..

    6. Juni 2020 um 6:00
  • Adewale Shoola Antworten

    Hi @DesignCourse please I need your help on click event and pointer-events of a hovering video. My email is [email protected]yahoo.com please what's yours so that I can email you my code snippet file, please 🙏🏾🙏🏾🙏🏾🎉👍

    21. August 2020 um 17:44
  • MotoDanKZ Antworten

    Do you do this before or after the app is complete? Thank you for the help btw, you are incredible!

    8. November 2020 um 12:00

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.