1 00:00:02,340 --> 00:00:09,810 It's obviously nice that we can run our application on Chrome for Android but our users are typically 2 00:00:09,810 --> 00:00:16,560 coming from other operating systems and browsers too, both on the desktop as well as on mobile devices. 3 00:00:16,650 --> 00:00:19,650 So we can't rely on them using Chrome 4 00:00:19,800 --> 00:00:23,100 and we also can't rely on them using Android. 5 00:00:23,100 --> 00:00:29,460 Now I mentioned the browser support and I showed you that only Chrome and Opera are supporting the 6 00:00:29,460 --> 00:00:36,420 manifest at the point of time I'm recording this, though support is coming to Microsoft Edge and Firefox, 7 00:00:36,480 --> 00:00:40,320 so we will see a lot of browsers supporting this very soon. 8 00:00:40,320 --> 00:00:42,620 Safari however doesn't support it 9 00:00:42,660 --> 00:00:50,040 and that of course is a disadvantage because whilst Android and Chrome have a huge market share, Safari 10 00:00:50,100 --> 00:00:53,550 on iOS also is quite important. 11 00:00:53,550 --> 00:01:00,140 Now the good thing is whilst this browser doesn't support the manifest.json file, it also won't fail, 12 00:01:00,210 --> 00:01:06,600 it will simply ignore it and we can add some other properties to the index.html file to get at 13 00:01:06,600 --> 00:01:09,310 least a comparable feeling there. 14 00:01:09,540 --> 00:01:17,690 We can add a couple of meta tags here to make sure that our application also looks nice on iOS and 15 00:01:17,690 --> 00:01:21,320 Safari and this is what I want to show you now. 16 00:01:21,360 --> 00:01:28,590 So besides the manifest, in this index.html file I will add a couple of other entries in this head section 17 00:01:28,590 --> 00:01:35,350 here to make sure our application looks and feels nice on Safari and iOS too. 18 00:01:35,730 --> 00:01:45,660 So the first one is a meta tag here and it has a name attribute where the value will be 19 00:01:46,470 --> 00:01:56,630 apple-mobile-web-app-capable and I'll set content to yes. 20 00:01:56,670 --> 00:02:00,510 So this looks cryptic but in the end, this will be understood by webkit, 21 00:02:00,570 --> 00:02:06,260 so by the Safari browser, it will see this meta tag and it'll recognize this key, 22 00:02:06,270 --> 00:02:08,310 so make sure to not mistype it, 23 00:02:08,340 --> 00:02:13,760 apple-mobile-web-app-capable is the correct key and then it will read the value here 24 00:02:13,770 --> 00:02:21,090 and if the value is yes, it knows that we want to treat this as a mobile web app which also allows us 25 00:02:21,090 --> 00:02:25,680 to add it the home screen, get our icon there and launch it from the home screen. 26 00:02:25,710 --> 00:02:30,390 So we basically have this manifest replacement here, 27 00:02:30,420 --> 00:02:34,410 so for Chrome, it detects the manifest and knows what we want to do, here 28 00:02:34,440 --> 00:02:38,410 we explicitly tell Safari by adding this meta tag. 29 00:02:38,640 --> 00:02:41,240 Of course we need to add more information though, 30 00:02:41,340 --> 00:02:51,890 for example we also want to add another meta tag with the name of apple-mobile-web-app, 31 00:02:51,930 --> 00:02:57,720 so you see the pattern, this is basically for all identifiers related to this web app like feature 32 00:02:58,030 --> 00:03:05,160 here set status-bar-style, all separated with dash to a certain content, 33 00:03:05,160 --> 00:03:12,480 for example, we could set the style here to black and this controls how the status bar will display on 34 00:03:12,480 --> 00:03:14,190 these devices. 35 00:03:14,190 --> 00:03:26,210 This is also great if we use another nice meta tag here, name is apple-mobile-web-app-title which allows 36 00:03:26,220 --> 00:03:32,130 to set a title, by default it would infer it from the title tags here which would actually be nice for 37 00:03:32,130 --> 00:03:33,620 this application already 38 00:03:33,690 --> 00:03:39,830 but if you have a deviating title, you can specify it here under content. I'll set pwagram 39 00:03:39,870 --> 00:03:42,330 and therefore I could just use the default title 40 00:03:42,330 --> 00:03:48,420 but again you could specify any deviating title here and Apple or iOS would use that below your 41 00:03:48,440 --> 00:03:50,150 icon and so on. 42 00:03:50,160 --> 00:03:55,030 We also want to let Apple know or iOS know which icon to use, 43 00:03:55,050 --> 00:03:57,580 we do this with a link. Here 44 00:03:57,660 --> 00:04:06,210 we have a link of type Apple touch icon and Apple or iOS will again understand this and then load this 45 00:04:06,240 --> 00:04:14,900 icon here for the app and this is /src/images/icons/app-icons-144x144.png, 46 00:04:15,210 --> 00:04:18,880 so 47 00:04:18,990 --> 00:04:26,310 basically this icon here. Now as you can see, we got loads of icons here though and also, we get some special 48 00:04:26,480 --> 00:04:31,560 Apple icons. So whilst I could point to this icon to have some basic support, 49 00:04:31,710 --> 00:04:38,430 I can also load the Apple optimized icon here by simply changing name to Apple 50 00:04:38,460 --> 00:04:44,700 icon, now I'm referring to this and I can also add a sizes property and be clear about the size of this 51 00:04:44,700 --> 00:04:45,210 icon, 52 00:04:45,240 --> 00:04:47,320 so that just as with the manifest 53 00:04:47,320 --> 00:04:49,810 where we also add multiple icons, 54 00:04:49,850 --> 00:04:52,560 the iOS browser is also able to load 55 00:04:52,560 --> 00:04:56,660 the best icon for a given device and screen resolution, 56 00:04:56,910 --> 00:05:03,780 so now we can simply add a lot of icons here for the different sizes I have. Now I don't want to bore 57 00:05:03,780 --> 00:05:05,230 you so I will skip ahead, 58 00:05:05,400 --> 00:05:11,370 of course feel free to copy and paste this from the final source code you can find at the end of this 59 00:05:11,370 --> 00:05:12,130 module. 60 00:05:12,300 --> 00:05:17,700 So with that, I added all these special Apple icons which are just normal pngs optimized for Apple 61 00:05:17,940 --> 00:05:25,110 and I made Apple aware of it as well as with these three meta tags here which allow Safari to load this, at least 62 00:05:25,170 --> 00:05:29,660 a bit close to a progressive web app like supported in Chrome. 63 00:05:29,910 --> 00:05:34,940 You won't have the same amount of support, obviously since a couple of properties we have in the manifest.json 64 00:05:34,940 --> 00:05:36,700 file are missing here 65 00:05:36,840 --> 00:05:42,000 but at least we are close to it or have some basic support. 66 00:05:42,180 --> 00:05:48,510 Now this is how we can get a better experience on iOS and with Safari.