Menu

Verify your Post-Launch Bundle

You developed your site. You tested it. You launched it. Now ensure that the project that you devoted so much work to is the one that your site visitor actually sees!

Once you publish a bundle, the new bundle needs to propagate through our Content Delivery Network (CDN). Verify that the newly launched bundle with either the iOS Simulator or with a physical device.

1. Verify on the iOS Simulator

Follow these steps to verify your bundle is correct on the iOS Simulator. If you have iOS Simulator already installed on your Mac, skip the installation steps.

A. Download XCode

1. On your Mac, click on the App Store icon in your dock.

2. Type “Xcode” in your search bar to find Xcode.

3. Follow the installation instructions.

B. Install the iOS Simulator

1. On your Mac, open Xcode.

2. On the Xcode menu bar, navigate to the "Xcode" menu.

3. Select the "Preferences" menu option.

4. In the popup window, select the "Downloads" button.

5. In the "Components" tab, select the iOS Simulator versions which you want to install.

6. Click the “Install” button.

C. Run the iOS Simulator

1. On the Xcode menu bar, select the "Xcode" menu.

2. Hover over the "Open Developer Tool" sub-menu.

3. Click the "iOS Simulator" menu option.

D. Launch Safari in the iOS Simulator

Leave the iOS Simulator running in the background: you need it in the next step.

E. Open the Web Inspector in Developer Tools

1. On your own local Mac, launch the Safari browser.

You now have two versions of Safari open: one inside the simulator, the other on your desktop computer.

2. On your desktop Safari browser menu bar, select the “Safari” menu.

3. Select the "Preferences" menu option.

4. In the "Preferences" popup window, select the "Advanced" tab.

5. Ensure that the "Show Develop menu in menu bar" toggle is checked.

Enable the Safari Develop Menu

6. In your desktop Safari browser, select the "Develop" menu.

7. Hover over the "iOS Simulator" menu item, and select the "blank" menu option.

This opens the "Web Inspector" developer tools window for the iOS Simulator.

8. In the "Developer Tools" window, select the "Timelines" icon.

F. Load your Mobile Site on the iOS Simulator

1. Now, switch to your iOS Simulator Safari browser.

2. In your simulator Safari browser, go to your mobile site.

G. Inspect the Bundle Version

1. Switch back to the "Developer Tools" window on your local computer.

2. In the "Timelines" option, under the "Timeline Events" section, select the adaptive.min.js event.

adaptive.min.js

3. In the "Developer Tools" window, select the "Resource" icon.

This opens the "Resource" side menu bar.

4. In the "Resource" side menu, locate the “Request Headers” section.

5. In the "Request Headers" section, locate the x-amz-meta-bundle header.

Bundle Number

6. Ensure that the bundle number is the one that you expect.

2. Verify on an iPhone

Follow a similar process for bundle verification on an iPhone. If you do not have XCode installed on your Mac, follow the first two download and installation steps of the previous section.

A. Connect your iPhone to your Mac with a USB cable.

B. Enable Safari Web Inspector on your iPhone

1. On your iPhone, launch the "Settings" app.

2. Select the "Safari" menu.

3. In the "Safari" menu, navigate to the "Advanced" menu option.

4. In the "Advanced" settings, turn on the "Web Inspector" toggle.

Enable Safari Web Inspector

C. Launch Safari on your iPhone

Leave Safari running on your iPhone: you need it in the next step.

D. Open the Web Inspector in Developer Tools

1. On your own local Mac, launch the Safari browser.

You now have two versions of Safari open: one on your iPhone, the other on your desktop computer.

2. On your desktop Safari browser menu bar, select the “Safari” menu.

3. Select the "Preferences" menu option.

4. In the "Preferences" popup window, select the "Advanced" tab.

5. Ensure that the "Show Develop menu in menu bar" toggle is checked.

Enable the Safari Develop Menu

6. In your desktop Safari browser, select the "Develop" menu.

7. Hover over the "iPhoneName" menu item, and select the menu option that has the name of the page that is currently open on your iPhone Safari browser.

This opens the "Web Inspector" developer tools window for the iPhone.

8. In the "Developer Tools" window, select the "Timelines" icon.

E. Load Your Mobile Site on Your iPhone

1. Now, switch to your iPhone Safari browser.

2. In your iPhone Safari browser, navigate to your mobile site.

If you already have your website open, re-load the page.

F. Inspect the Mobile Site Bundle Version

1. Switch back to the "Developer Tools" window on your local computer.

2. In the "Timelines" option, under the "Timeline Events" section, select the adaptive.min.js event.

adaptive.min.js

3. In the "Developer Tools" window, select the "Resource" icon.

This opens the "Resource" side menu bar if it is not already open.

4. In the "Resource" side menu, locate the “Request Headers” section.

5. In the "Request Headers" section, locate the x-amz-meta-bundle header.

Bundle Number

Ensure that the bundle number is the one that you expect.

3. Smoke Test the Bundle

Conduct a smoke test once you have properly verified your bundle.

Smoke Test A smoke test is a quick test that the major functions of your mobile site work.

The origin of this term dates back to old hardware tests. In those days, if you turned on a piece of hardware for the first time and it did not catch on fire, your test was a success!

The goal of the smoke test is to ensure that all major pieces of your mobile site function in the live environment.

These major pieces include:

4. Verify the Conversion Flow

A full conversion workflow for a standard e-commerce site flows somewhat like this:

Homepage → "Category List" page → "Product" page →
"Add to Cart" action and or page → possible "Log In" flow → Cart → Checkout

5. Verify the Analytics

Edit in GitHub