Here is the easter egg of the Nothing PWA: Konami Code + 10 hours YouTube video. The browser will fire a "beforeinstallprompt" event is the site meets the Add to Home screen criteria When the user clicks on the install button, it will trigger the A2HS Dialog. In this case, if the browser supports the Add to Home screen feature, then it will display an “Install” button at the top of the page. (Left) Install Button - (Middle) Install Button + A2HS Mini-Infobar - (Right) Hence, I should provide a better A2HS UX to the Nothing PWA. Nonetheless, the A2HS mini-infobar is an interim solution, it will be removed from Chrome someday in the future. □ RIP the old A2HS banner (Chrome 67 and before) However, starting in Chrome 68 on Android, Chrome will show the A2HS mini-infobar instead of the big A2HS banner: One of my favorite feature I get from Progressive Web App is Add to Home screen (A2HS). PWACompat also creates meta icon tags for all icons in the manifest (including favicon), creates fallback meta tags for various browsers describing how a PWA should open, and also sets the theme color based on the web app manifest. However, is that all what PWACompat can do? No! It actually can do more! Tadah! Just like that, I managed to bring the splash screen to older browsers. The library is very straightforward, just add the Web App Manifest file and the PWACompat script, and you are good to go!Įnter fullscreen mode Exit fullscreen mode Meet PWACompat, PWACompat is a library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps. However, is there any way I can bring this splash screen feature to other older browsers? With that, Chrome for Android will automatically shows a splash screen while loading the PWA. Now I have the app icons ready, the next step is to create a Web App Manifest. The generator will automatically generate the icon in different sizes: 48px, 72px, 96px, 144px, 192px and 512px. With the Launcher Icon Generator, I am able to design and generate the app icon (with Material Design?) for the Nothing PWA in no time. It’s a very astonishing open source tool developed by Roman Nurik. ![]() To bring it to the next level, I can upgrade it to a Progressive Web App (PWA), so users can run it without an Internet connection and also able to add the PWA to their home screen.īefore I start to talk about the code, let’s design an icon for the Nothing PWA! The tool I am using to generate the app icon is called Launcher Icon Generator. I can rebuild the whole thing using HTML, CSS, and JavaScript. (Left) Nothing Android App: 19.24MB - (Right) Nothing Progressive Web App: 205KB So it makes me think, is there any way I can make it smaller? However, the APK size of the Nothing Android App is 14MB and it uses 19.24MB of the phone storage after the installation. The Nothing Android App basically does nothing, except there’s a very cool easter egg in the app ( ͡° ͜ʖ ͡°). The original version of the “Nothing” Android App was developed by Chilango Lab and it has more than 1 million downloads and 4.2 stars rating on Google Play Store □.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |