Hey everyone - I summarized this video + added an update in a blog post! Check it out here for reference: samselikoff.com/blog/8-tips-to-make-your-website-feel-like-an-ios-app
I'd like to add few more points, 1. Make text unselectable by default 2. Add cursor:default on text by default 3. Add animation while switching between screens 4. Cache static content to load faster next time user opens the screen 5. Add sound visual for touch/click gesture (recommended) 6. Use/Make Own Component Library so that you don't mess up with large code 7. Add animations to components
Yet another good one. A caveat I'd like to add is that one should not Disable user scaling on just about every site. That's one thing I really like about the web platform, you can scale images when there's no option. But in this context, yeah for this app it makes sense.
Really great video, thank you for sharing these tips! One issue I see with disabling the user to be able to zoom is about accessibility. By setting that option even users outside the standalone app will not be able to zoom, so it’s a double edged sword.
Every tip you told in this video is really useful. Again I’m glad I’m here before you hit Millions of subs.. One question: Can we also make a banner to ask the users to save it as a home screen in one click? I’ve seen it for some websites but not sure how they did that.
Great content Sam. I used all these tips in my PWA . Will update the url here soon. I have a question about the avatar progress bar. How did you create that?
Awesome video once again man! Would love to see a video of how you are protecting your routes on this app. E.g are you checking for an Authenticated user on the client or on the server, and if so how are you getting around the flash of content if an un authenticated user lands on a protected page.
Great video, thanks! How do we account for the landscape mode when fixing the header 10:40? The notch is covering up a part of the app and the whitespace at the top is no longer necessary.
I think you could use the env(safe-area-inset-*) css function - check out Tip #5 in my writeup for details! samselikoff.com/blog/8-tips-to-make-your-website-feel-like-an-ios-app
Hello, loved the gradient used on the header, is it possible for you to point me to that example page or colors you picked. Looks really trendy! Congratulations on this video, I you make an update for 2022 let me know.
Hi nice video, Please tell me how to bring simulator on code. I can’t do that, and also tell me if other developers change my code and do this 8 step what can i do ?
@@samselikoff As I understand it, and I am curious to, they are asking about at 50 seconds in when you dragged the iOS Simulator "into" VS Code and then were able to resize between the Code window width and the Simulator by dragging the bar in between. Is that an OS feature, or a Code feature? Great video btw - thank you!
Every time I see your new video, I stop what I'm doing and watch it. btw on a separate topic, with the release of tailwind 2.0, I'm really interested in using it again I'm so much sold on their new site!!!!. but since I'm fairly new to frontend development space, I face issues with components such as mobile nav drawer, accordion, open n collapse panel etc. I usually use material UI or some other component library for this, I am interested in knowing what do you do in such cases? do u code from scratch ? or do you use something?. and what would be your recommendation for someone who wants to use tailwind CSS but also not has to code such components from scratch?
No service worker but it does have some aspects of a PWA. Service workers can be very tricky and I'd suggest not reaching for them unless they solve a very specific problem you're having.
That is what they were primarily designed for, but there are also other ways to accomplish limited offline functionality depending on what you're after. The biggest pitfall I've seen folks fall into with service workers is having difficulty updating clients that are aggressively caching assets (like JavaScript files) via the worker. I know they can be used effectively, but I would suggest only introducing single capabilities of them at a time that solve a specific problem you're facing!
You could make your website look like an iOS app or you could just make an app... Nothing feels more like a native application than - you know - an actual native application. Trying to make something look and feel like an app without actually building one is madness.
Hey everyone - I summarized this video + added an update in a blog post! Check it out here for reference: samselikoff.com/blog/8-tips-to-make-your-website-feel-like-an-ios-app
I'd like to add few more points,
1. Make text unselectable by default
2. Add cursor:default on text by default
3. Add animation while switching between screens
4. Cache static content to load faster next time user opens the screen
5. Add sound visual for touch/click gesture (recommended)
6. Use/Make Own Component Library so that you don't mess up with large code
7. Add animations to components
😮
😊
This is gold Sam, GOLD!!!
True that..
Someone posted this guy *carder111* on telegram yesterday and I tried him he is real💯✅
Just discovered your channel, really like your teaching style and the speed and flow of your videos. Generalised videos like this one are a great!
This is worth its weight in gold.
Perfect camera work, balanced music, super smooth speech and filled with useful content.
Subscribed!
Thank you for the kind words + I’m so glad you found it useful!
+1
I usually don't write comments on youtube but dude, just keep going your content is insane! 👊🤯
Add ' --xhtml true ' for self closing meta tags when using generator. Nice review and thanks for highlighting pwa asset generator.
Someone posted this guy *carder111* on telegram yesterday and I tried him he is real💯✅
Yet another good one. A caveat I'd like to add is that one should not Disable user scaling on just about every site. That's one thing I really like about the web platform, you can scale images when there's no option. But in this context, yeah for this app it makes sense.
Game Changer! Thanks bro
Really great video, thank you for sharing these tips! One issue I see with disabling the user to be able to zoom is about accessibility. By setting that option even users outside the standalone app will not be able to zoom, so it’s a double edged sword.
True. You could use the standalone media query to only disable it in standalone mode
Thanks! Nice to see the current PWA support
I found the PWA asset generator today. What an amazing tool
This video really helped me with my first PWA. Thanks Sam!
Thanks man. I could see myself using most of, if not all of these tips.
Someone posted this guy *carder111* on telegram yesterday and I tried him he is real💯✅
Great tips, Sam! I just found your channel, and it's a hidden gem. What a lot of valuable and clear explained information.
Every tip you told in this video is really useful. Again I’m glad I’m here before you hit Millions of subs..
One question: Can we also make a banner to ask the users to save it as a home screen in one click? I’ve seen it for some websites but not sure how they did that.
Subscribed! What a good tips, I'm making PWA's and this is pure gold
Excellent work. Thanks for the tips Sam.
amazing! been wondering how to get rid of the annoying top status bar in my PWA. lots of other good tips here I hadn't seen too. appreciate the video!
Great Video... Hope you can make an updated version once the Apple Developer Conference takes place next week.
So good! Thanks, Sam!
Thank you, this was very helpful.
This is an absolute game changer - thank you!
The best video. Thank you very much bro
Amazing tips very usefull thanks so much for share it!!
Great content Sam. I used all these tips in my PWA . Will update the url here soon. I have a question about the avatar progress bar. How did you create that?
Awesome info Sam. Thanks so much!
Mind blown, didn't know any of this, now curious about android devices
Super useful tips. Thanks!
Thanks Sam. This was really helpful.
Brilliant. These tips are super helpful.
Thanks for this golden tips !
awesome tips, thank you sam!
Good tips. Great quality!
Awesome video once again man! Would love to see a video of how you are protecting your routes on this app. E.g are you checking for an Authenticated user on the client or on the server, and if so how are you getting around the flash of content if an un authenticated user lands on a protected page.
This is great and everything but how do you get the user to save the app to the home screen? Thats the most important part..
great video ty very much
2 years old and still relevant, and yet Apple provides no better way to add an app to the home screen. Still buried deep into that share menu :(
Awesome! Thank you Sam.
thanks sam!! Greattt content!!
I LOVE YOU BRO. THANK YOU SO MUCH. SERIOUSLY.
Just saved my life! Thanks 🙌🏼
Nice tips! For the last trick, maybe using a scale down effect on pressed elements could result in valuable feedback UX-wise.
Such useful content!
Amazing thank you
Very very usefull ! Pwa for iOS is painfull. Thanks for focus on it. Do you know how to launch the same pwa in the app store?
Great video - Thanks:)
Amazing video!
Thanks Sam.
Great video, thanks!
How do we account for the landscape mode when fixing the header 10:40? The notch is covering up a part of the app and the whitespace at the top is no longer necessary.
I think you could use the env(safe-area-inset-*) css function - check out Tip #5 in my writeup for details! samselikoff.com/blog/8-tips-to-make-your-website-feel-like-an-ios-app
@@samselikoff Thank you Sam! I really appreciate it.
Thanks a lot
Can you link the source code to your app that you made with reach and tailwind? That would be much easier!
Big Thnaks!
looks good can u pls share your own HTML script with the edits? thanks
Hello, loved the gradient used on the header, is it possible for you to point me to that example page or colors you picked. Looks really trendy! Congratulations on this video, I you make an update for 2022 let me know.
Awesome, when will Android OS catch up??
I Sam cool video, this will great but with Next JS 13
I like a lot your videos, Sam! Display standalone still work? I still have the link preview with standalone display.
Link previews are no longer disabled for me either...
Really cool!
great stuff ! are you using nextjs in conjunction with next-pwa package ?
is there any way to set short_name and icons dynamically, i mean if our app is a white label application. what is the best approach for it?
Hi nice video,
Please tell me how to bring simulator on code. I can’t do that, and also tell me if other developers change my code and do this 8 step what can i do ?
Hm what do you mean bring simulator on code? Also I don't quite understand the second part of your question.
@@samselikoff As I understand it, and I am curious to, they are asking about at 50 seconds in when you dragged the iOS Simulator "into" VS Code and then were able to resize between the Code window width and the Simulator by dragging the bar in between. Is that an OS feature, or a Code feature? Great video btw - thank you!
Got the ‘Manifest is not valid JSON’ error. Changed content to: {"display": "standalone"} 2:46
Could you show to create a blog with nextjs from scratch to a full working and manageable blog ?
Awesome! Do all of these work on Android too, or are they iOS specific?
Someone posted this guy *carder111* on telegram yesterday and I tried him he is real💯✅
Great, trank you!
Life saver..
how can I get the iPhone simulator without Xcode? I'm running Linux
Transparent status bar work on iOS 16-17?
This is perfect! Thank you so much
for tip 7, can you only make it non-scalable in standalone context without using javascript?
awesome
i wish apple would allow the app store for this type of thing... would eliminate a huge amount of work for a lot of use cases.
🔥🔥🔥
this tips can be applied to feel like an Android app too?
Hi! Will this also work on hosted webpages? On Netlify for example..
Yes absolutely!
Nice, i think the future gonna be web and no more installing apps again #PWAFTW
Would this work for Android too?
Every time I see your new video, I stop what I'm doing and watch it.
btw on a separate topic, with the release of tailwind 2.0, I'm really interested in using it again I'm so much sold on their new site!!!!. but since I'm fairly new to frontend development space, I face issues with components such as mobile nav drawer, accordion, open n collapse panel etc. I usually use material UI or some other component library for this, I am interested in knowing what do you do in such cases? do u code from scratch ? or do you use something?. and what would be your recommendation for someone who wants to use tailwind CSS but also not has to code such components from scratch?
Does this work for android?
The video/setup/recording quality is just too high...
so isn't this a PWA then or not? do you have a service worker?
No service worker but it does have some aspects of a PWA. Service workers can be very tricky and I'd suggest not reaching for them unless they solve a very specific problem you're having.
@@samselikoff if offline mode is what someone ist looking for the then a service worker would be needed right?
That is what they were primarily designed for, but there are also other ways to accomplish limited offline functionality depending on what you're after. The biggest pitfall I've seen folks fall into with service workers is having difficulty updating clients that are aggressively caching assets (like JavaScript files) via the worker. I know they can be used effectively, but I would suggest only introducing single capabilities of them at a time that solve a specific problem you're facing!
@@samselikoff thank you😁
what would you say is the benefit of creating an app as a website rather than using react native??
Can we use real device?
You could make your website look like an iOS app or you could just make an app...
Nothing feels more like a native application than - you know - an actual native application.
Trying to make something look and feel like an app without actually building one is madness.
Great video!