My First Progressive Web App (PWA)

Подписаться 351 тыс.

Просмотров 33 тыс.

50% 1

We learn the basics on Progressive Web Apps! What are they good for? Why do they exist? AND showing just how easy it is to get started!
🗿 MILESTONES
⏯ 00:10 What are progressive web apps PWA?
⏯ 16:35 FIKA TIME! ☕️
⏯ 20:35 PWA vs React Native
⏯ 24:02 building a very first minimal progressive web app on iOS
Repository with the code we use in the video
📝 github.com/chh...
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstu...
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
The recordings are done in a live stream with chat! Follow on Twitch to get notified:
🌊 / devtipsshow
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ / funfunfunction
#pwa #manifest

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 77

@rw251 5 лет назад

Love the format. You should definitely continue with PWAs doing more on service workers, offline mode, push notifications etc..

@StijnHommes 2 года назад

Heck no! They should do more about native apps and not give any credence to this 6-year-old Google experiment. The sooner people stop wasting time and return their focus to developing REAL native apps, the better.

@malipetek 5 лет назад

Push notifications API is being abused so much.

@OfficialDevTips 5 лет назад

Definitely. That said, I'd say that they are abused like crazy on native apps as well.

@malipetek 5 лет назад

@@OfficialDevTips You are right, what annoys me most is all websites are begging to jump on the abusement train those days. While apps granting the right when we install em. Its like email marketing and we dont have a spam filter yet.

@gindrunk 5 лет назад

I love this format because it show viewers like me what we undergone when learning new things, and things like how did you go by with the specific task or error. More of this please and also please continue on the PWA topic.

@markusgattol 5 лет назад

use developers.google.com/web/tools/workbox/ for building PWAs as it's more or less a batteries included starter... otherwise you'll end up reinventing the wheel and making lots of bugs doing so PWAs are now also supported on the desktop developers.google.com/web/progressive-web-apps/desktop so when is your app a PWA? here's a checklist what you need to do in order to turn you random app into a PWA developers.google.com/web/progressive-web-apps/checklist It can happen gradually as PWA is not a binary state i.e. you can go from a normal App to a PWA in steps...

@ViniciusRocha-bl1lk 5 лет назад

Thanks man!

@iceniveth 5 лет назад

Spotify recently has pwa support. It adds shortcut on your windows desktop.

@sunshineremovalsvic4576 5 лет назад

The icon is seperate and has to be added to manifest with I think ref = touch-apple-icon and href this icon.

@roquefore 5 лет назад

Guessing that icon didnt workout because pwa need different icons for different screen resolutions and that's applephones one just didnt fit - you may see in a console, that pwa is getting 404's on some requests in the end

@OlleHellman 5 лет назад

I hope PWA is the next step of apps and webb

@OfficialDevTips 5 лет назад

Me too!

@cyb 5 лет назад

PWA is being pushed by Google, Microsoft and Firefox. Microsoft adapted chromium since it wants PWA to take off to build up it's app store as for Google you will notice it's devices(tablets/laptops) are powered by chrome so PWA is definitely the future.

@ilikeit6306 5 лет назад

great explain tutorials.

@Killow 5 лет назад

No news at all on such a big great channel... : (

@Daniel-Condurachi 5 лет назад

is it doable an online store in a PWA? I have a possible customer that would like to have a new website, and iOS app to sell his products and also an Android app. doing a PWA would check all 3 boxes into one. Do you have any recommendations or guide for me?

@tiborsimon2132 5 лет назад

The Chat is the new Siri :D

@OfficialDevTips 5 лет назад

Yes! We love it!

@merefield2585 5 лет назад

But Apple doesn't want to support this technology properly as it will herald a massive loss of revenue (for its Appstore)?

@markusgattol 5 лет назад

it's a browser thingy as PWAs run where you've browser support e.g. first and foremost Chrome mobile and desktop... other current mobile and desktop browsers support PWAs too caniuse.com/#search=Web%20App%20Manifest

@merefield2585 5 лет назад

Yes,@@markusgattol, and who makes Safari?

@OfficialDevTips 5 лет назад

This assumes that developers would migrate from native apps to pwas. While this will be the case SOMETIMES, I think in the majority of the cases, the PWAs of the future are going to be built by organizations that previously lacked the resources to maintain a iOS + Android native apps in addition to their web apps. (can you tell that I'm reading the book "Abundance" :D)

@markusgattol 5 лет назад

@@OfficialDevTips could be but then that's like saying one would prefer efficiency and waste resources when there's a new way that's less resource heavy; I guess if you need less developers for a mobile & desktop presence in the future the second half could start tinkering around with AI instead of writing plain old native Apps...

@getorvillized7499 5 лет назад

to add icon on iOS:

@cgh2467 5 лет назад

They Icon didn't work and IOS does not fully support the web app manifest, for icons on IOS you need to use custom tags in the head of your HTML document, same with the theme colour and splash screen

@jonathanbakebwa2292 5 лет назад

No wonder... I tried to do this a few days and I was frustrated with it because I was unsuccessful with it. Which custom tags do you use to set the icon and the splash screen?

@cgh2467 5 лет назад

Jonathan Bakebwa sorry just seen this reply. I’ll comment those tags soon.

@StijnHommes 2 года назад

It doesn't matter whether the app is in a Safari window or not. It's still using Safari, just without showing the user all the vital navigation buttons and menus. You can't make an app by building a website and not developing something native. Stop wasting time.

@infiniteral2597 5 лет назад

Where are you?

@timmy_1337 5 лет назад

To display the icon on ios i you need to add the ios specific html tags developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

@grzegorzt 5 лет назад

Next time you can use this solution for an android phone developers.google.com/web/tools/chrome-devtools/remote-debugging/

@rajashekhar433 5 лет назад

please make a video on ReactJS + PWA + PUSH notifications

@safuya1833 5 лет назад

FunFunForum is a PWA ;) Would have been a good example

@dilass 5 лет назад

I think one of the biggest issues here is probably browser support, because it would limit you how well you want to design your app ( CSS ) and how much functionality you can push into your app ( JavaScript ). I also think WebAssembly will be a huge game changer with progressive apps and web apps in general as it enables users to export native app code used on existing iOS or Windows apps for example, but allows that code (probably C++ or whatever else) to be ported onto the web and complied at almost native speed

@herantd 5 лет назад

c'mon sweden say that "J" letter with english pronunciation :)

@onedimensionalchess4373 5 лет назад

herantd Affricates are for suckers.

@saschametz9018 5 лет назад

Didnt the icon work because you didnt use a „apple-touch-icon“ file? Anyway... nice Video🤗

@nathelevate 4 года назад

Great video guys, good work 👍

@adarshshukla2595 5 лет назад

Hope to get More video like tutorials of pwa Thanks love from india

@jamesm1343 5 лет назад

Clowns

@stepheningermany 5 лет назад

I think flutter will kill react native one google fuchsia comes out - one codebase for both apps - dart takes a bit of getting used to though

@maskman4821 5 лет назад

I basically turn all the web into pwa, works pretty well, haven't tried iphone yet, with pwa we don't need cordova unless you want to publish to app stores....

@Ecker00 5 лет назад

Love how Chrome uses gamification on developers, and it works. David is sold.

@everydayenterprise4662 5 лет назад

Do you mean through the score given in the Audit tab?

@Ecker00 5 лет назад

@@everydayenterprise4662 yeah, exactly. 👍

@mhn23visual 5 лет назад

yeah iOS does not support alpha channel icons, therefore you need an apple touch icon.

@getorvillized7499 5 лет назад

Note: you can add ANY web site to your home screen on iOS with Safari. This does not mean that technically it is a PWA, but it does give you an icon to launch from the home screen, and it launches your page in Safari without the web browser chrome thus making it look more "native app-y" to have it REALLY be a PWA you need to do the other stuff you guys were doing... to be able to do stuff like work offline, etc.

@cgh2467 5 лет назад

By default adding site to your home screen open IOS means it will open with the browser chrome, You must specify if you want it to open in a full screen experience

@kat3325 5 лет назад

Maybe old files got cached in the end and it didn't work because of it?

@chubbyBunny94 5 лет назад

Is it worth taking paid courses for coding? I'm considering a web development course from the training room (£2K)

@lawrenlelko 5 лет назад

Watch out. most of them are garbage, especially the big one costing $199/month. Best to start with Free Code Camp.

@michaelandreuzza 5 лет назад

love it !! here is mine colorsandfonts.com hälsningar från Åland !

@losticarus3363 5 лет назад

I think PWAs use the favicon as the icon.

@spyrossakellaropoulos 5 лет назад

The Visual Studio Code console was screaming "apple-touch-icon.png not found !" and you guys where like, why does the icon not work ??? 🤣

@OfficialDevTips 5 лет назад

hahaha, looks like we could have used you on the live stream chat :D

@Frondlock 5 лет назад

Interesting and all. I have a question though. How do i test my PWA like you did with the iOS emulator... but on linux (ubuntu)?

@komakaze1 4 года назад

Chrome, Firefox and Chromium should all be capable. Chrome's built-in Dev tools are excellent.

@ahfekry 5 лет назад

There is a tab just like Audit called Application, this tab lets you see the registered service worker and its state and most importantly your icons 😂