Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Progressive Web Apps (PWA) are web apps that feature a native Windows app experience, and can use features like push notifications. The addition of Service Worker support in EdgeHTML makes this all possible. Other platforms (iOS, Android) have had this support for a while. PWA’s can be defined to run as standalone, run in browser, or minimal UI. Microsoft has been using Bing crawlers to find existing “high quality” PWA enabled sites and will be automatically adding some of these to the Windows Store (and later letting site owners to claim these apps and augment them).
I decided to get a head start on this technology and have gone through the process to produce a PWA for digitalmediaphile.com which runs on WordPress. It took some “fiddling” so I am sharing the process here.
When you follow the instructions in this article all the way to the end, your Progressive Web App for Windows 10 will be ready to submit to the Windows Store. I’ve turned this blog into a PWA, and if you search the Windows Store for barbs connnected word, you’ll find both my old Windows 8.1 app and my new Windows 10 PWA.
There are many configurations of WordPress – and all the following applies to self-hosted WordPress blogs. If you are on a WordPress MultiSite server, sub folders won’t support creating a PWA for Windows users (blog.com/myblog won’t work). You will need to be using https and not http. And your site needs to have a Privacy Policy that you can link to for the Windows Store PWA.
A few things you will need:
- FTP or Remote Desktop access to the blog server to upload files.
- A child theme (you will need to edit header.php and you don’t want to do this on the main theme – using a child theme preserves your customizations if the theme is updated.
- Advanced Installer to edit the appx file. This is a GREAT program, and if you are a Microsoft MVP or a blogger, be sure to see http://www.advancedinstaller.com/free-license.html (what a nice company!)
- A developer account for the Windows Store https://developer.microsoft.com/en-us/store
- Google Chrome to optionally use Lighthouse to check your PWA validity for iOS and Android
Here is the process:
Create a child theme, prepare your images and create a manifest file
1. Create a child theme for your WordPress blog. If you don’t know how to do this, try a plug-in like https://wordpress.org/plugins/child-theme-configurator/
2. On your original main theme, create a backup of header.php either using copy and paste or ftp or RDP.
3. If you’ve used “build my pinned site” or other tools to create a IE pinned site, etc., open the ORIGINAL header.php (you’ve made a back up) and delete text that looks like
<link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”/apple-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-icon-76×76.png”>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-icon-114×114.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-icon-120×120.png”>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-icon-144×144.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-icon-152×152.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-icon-180×180.png”>
<link rel=”icon” type=”image/png” sizes=”192×192″ href=”/android-icon-192×192.png”>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>
<link rel=”icon” type=”image/png” sizes=”96×96″ href=”/favicon-96×96.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”>
<link rel=”manifest” href=”/manifest.json”>
<meta name=”msapplication-TileColor” content=”#ffffff”>
<meta name=”msapplication-TileImage” content=”/ms-icon-144×144.png”>
4. Use FTP or RDP to rename manifest.json in the root of your blog to manifest.json.old
5. Use FTP or RDP to copy and save a copy of the png’s referenced above to your local computer and then delete these png’s from the server.
6. Create a 1024×1024 png as a “site icon/identity” (transparent background) for your site. Suggest you name it 1024.png
7. Go to https://www.pwabuilder.com/ and scroll to the bottom of the page and select the PWA Image Generator and upload the 1024.png and generate and download the image package. Give this a few minutes to complete as images are being generated and then downloaded.
8. The zip file has a file structure by platform:
9. Extract the zip file to your local computer and then upload the AppImages folder to the root of your site so that all the folders and content are on the remote site.
10. Test the child theme you created in the first step and then activate it.
11. Edit the header.php of the CHILD theme and add in the following below any existing “link rel” entries
<link rel=”manifest” href=”/Appimages/icons.json”>
12. Save the file and test your site again.
13. Here comes one of the fun parts. pwabuilder.com has some bugs and can’t properly generate a manifest.json file. You can use this sample which is for a “standalone” app. Makes changes to name, start URL, description. note that the icon values are taken from icons.json, but the path is edited and /AppImages/ is pre-pended to each entry from icons.json. Save the file as manifest.json and upload to the root of your site. Test your site again.
{
“dir”: “ltr”,
“lang”: “en-US”,
“name”: “Name of your Blog”,
“scope”: “/”,
“display”: “standalone”,
“start_url”: “https://yourblog.com/”,
“short_name”: “ShortName”,
“theme_color”: “#ffffff”,
“description”: “comma, separated, values, here”,
“orientation”: “any”,
“background_color”: “#ffffff”,
“related_applications”: [],
“prefer_related_applications”: false,
“icons”: [
{
“src”: “/Appimages/windows10/Square71x71Logo.scale-400.png”,
“sizes”: “284×284”
},
{
“src”: “/Appimages/windows10/Square71x71Logo.scale-200.png”,
“sizes”: “142×142”
},
{
“src”: “/Appimages/windows10/Square71x71Logo.scale-100.png”,
“sizes”: “71×71”
},
{
“src”: “/Appimages/windows10/Square71x71Logo.scale-150.png”,
“sizes”: “107×107”
},
{
“src”: “/Appimages/windows10/Square71x71Logo.scale-125.png”,
“sizes”: “89×89”
},
{
“src”: “/Appimages/windows10/Square150x150Logo.scale-400.png”,
“sizes”: “600×600”
},
{
“src”: “/Appimages/windows10/Square150x150Logo.scale-200.png”,
“sizes”: “300×300”
},
{
“src”: “/Appimages/windows10/Square150x150Logo.scale-100.png”,
“sizes”: “150×150”
},
{
“src”: “/Appimages/windows10/Square150x150Logo.scale-150.png”,
“sizes”: “225×225”
},
{
“src”: “/Appimages/windows10/Square150x150Logo.scale-125.png”,
“sizes”: “188×188”
},
{
“src”: “/Appimages/windows10/Wide310x150Logo.scale-400.png”,
“sizes”: “1240×600”
},
{
“src”: “/Appimages/windows10/Wide310x150Logo.scale-200.png”,
“sizes”: “620×300”
},
{
“src”: “/Appimages/windows10/Wide310x150Logo.scale-100.png”,
“sizes”: “310×150”
},
{
“src”: “/Appimages/windows10/Wide310x150Logo.scale-150.png”,
“sizes”: “465×225”
},
{
“src”: “/Appimages/windows10/Wide310x150Logo.scale-125.png”,
“sizes”: “388×188”
},
{
“src”: “/Appimages/windows10/Square310x310Logo.scale-400.png”,
“sizes”: “1240×1240”
},
{
“src”: “/Appimages/windows10/Square310x310Logo.scale-200.png”,
“sizes”: “620×620”
},
{
“src”: “/Appimages/windows10/Square310x310Logo.scale-100.png”,
“sizes”: “310×310”
},
{
“src”: “/Appimages/windows10/Square310x310Logo.scale-150.png”,
“sizes”: “465×465”
},
{
“src”: “/Appimages/windows10/Square310x310Logo.scale-125.png”,
“sizes”: “388×388”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.scale-400.png”,
“sizes”: “176×176”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.scale-200.png”,
“sizes”: “88×88”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.scale-100.png”,
“sizes”: “44×44”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.scale-150.png”,
“sizes”: “66×66”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.scale-125.png”,
“sizes”: “55×55”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-256.png”,
“sizes”: “256×256”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-48.png”,
“sizes”: “48×48”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-24.png”,
“sizes”: “24×24”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-16.png”,
“sizes”: “16×16”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-256_altform-unplated.png”,
“sizes”: “256×256”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-48_altform-unplated.png”,
“sizes”: “48×48”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-24_altform-unplated.png”,
“sizes”: “24×24”
},
{
“src”: “/Appimages/windows10/Square44x44Logo.targetsize-16_altform-unplated.png”,
“sizes”: “16×16”
},
{
“src”: “/Appimages/windows10/StoreLogo.scale-400.png”,
“sizes”: “200×200”
},
{
“src”: “/Appimages/windows10/StoreLogo.scale-200.png”,
“sizes”: “100×100”
},
{
“src”: “/Appimages/windows10/StoreLogo.scale-150.png”,
“sizes”: “75×75”
},
{
“src”: “/Appimages/windows10/StoreLogo.scale-125.png”,
“sizes”: “63×63”
},
{
“src”: “/Appimages/windows10/StoreLogo.scale-100.png”,
“sizes”: “50×50”
},
{
“src”: “/Appimages/windows10/StoreLogo.png”,
“sizes”: “50×50”
},
{
“src”: “/Appimages/windows10/SplashScreen.scale-400.png”,
“sizes”: “2480×1200”
},
{
“src”: “/Appimages/windows10/SplashScreen.scale-200.png”,
“sizes”: “1240×600”
},
{
“src”: “/Appimages/windows10/SplashScreen.scale-150.png”,
“sizes”: “930×450”
},
{
“src”: “/Appimages/windows10/SplashScreen.scale-125.png”,
“sizes”: “775×375”
},
{
“src”: “/Appimages/windows10/SplashScreen.scale-100.png”,
“sizes”: “620×300”
},
{
“src”: “/Appimages/windows/windows-smallsquare-24-24.png”,
“sizes”: “24×24”
},
{
“src”: “/Appimages/windows/windows-smallsquare-30-30.png”,
“sizes”: “30×30”
},
{
“src”: “/Appimages/windows/windows-smallsquare-42-42.png”,
“sizes”: “42×42”
},
{
“src”: “/Appimages/windows/windows-smallsquare-54-54.png”,
“sizes”: “54×54”
},
{
“src”: “/Appimages/windows/windows-splashscreen-1116-540.png”,
“sizes”: “1116×540”
},
{
“src”: “/Appimages/windows/windows-splashscreen-868-420.png”,
“sizes”: “868×420”
},
{
“src”: “/Appimages/windows/windows-splashscreen-620-300.png”,
“sizes”: “620×300”
},
{
“src”: “/Appimages/windows/windows-squarelogo-270-270.png”,
“sizes”: “270×270”
},
{
“src”: “/Appimages/windows/windows-squarelogo-210-210.png”,
“sizes”: “210×210”
},
{
“src”: “/Appimages/windows/windows-squarelogo-150-150.png”,
“sizes”: “150×150”
},
{
“src”: “/Appimages/windows/windows-squarelogo-120-120.png”,
“sizes”: “120×120”
},
{
“src”: “/Appimages/windows/windows-storelogo-90-90.png”,
“sizes”: “90×90”
},
{
“src”: “/Appimages/windows/windows-storelogo-70-70.png”,
“sizes”: “70×70”
},
{
“src”: “/Appimages/windows/windows-storelogo-50-50.png”,
“sizes”: “50×50”
},
{
“src”: “/Appimages/windows/windowsphone-appicon-106-106.png”,
“sizes”: “106×106”
},
{
“src”: “/Appimages/windows/windowsphone-appicon-62-62.png”,
“sizes”: “62×62”
},
{
“src”: “/Appimages/windows/windowsphone-appicon-44-44.png”,
“sizes”: “44×44”
},
{
“src”: “/Appimages/windows/windowsphone-mediumtile-360-360.png”,
“sizes”: “360×360”
},
{
“src”: “/Appimages/windows/windowsphone-mediumtile-210-210.png”,
“sizes”: “210×210”
},
{
“src”: “/Appimages/windows/windowsphone-mediumtile-150-150.png”,
“sizes”: “150×150”
},
{
“src”: “/Appimages/windows/windowsphone-smalltile-170-170.png”,
“sizes”: “170×170”
},
{
“src”: “/Appimages/windows/windowsphone-smalltile-99-99.png”,
“sizes”: “99×99”
},
{
“src”: “/Appimages/windows/windowsphone-smalltile-71-71.png”,
“sizes”: “71×71”
},
{
“src”: “/Appimages/windows/windowsphone-storelogo-120-120.png”,
“sizes”: “120×120”
},
{
“src”: “/Appimages/windows/windowsphone-storelogo-70-70.png”,
“sizes”: “70×70”
},
{
“src”: “/Appimages/windows/windowsphone-storelogo-50-50.png”,
“sizes”: “50×50”
},
{
“src”: “/Appimages/android/android-launchericon-512-512.png”,
“sizes”: “512×512”
},
{
“src”: “/Appimages/android/android-launchericon-192-192.png”,
“sizes”: “192×192”
},
{
“src”: “/Appimages/android/android-launchericon-144-144.png”,
“sizes”: “144×144”
},
{
“src”: “/Appimages/android/android-launchericon-96-96.png”,
“sizes”: “96×96”
},
{
“src”: “/Appimages/android/android-launchericon-72-72.png”,
“sizes”: “72×72”
},
{
“src”: “/Appimages/android/android-launchericon-48-48.png”,
“sizes”: “48×48”
},
{
“src”: “/Appimages/ios/ios-appicon-1024-1024.png”,
“sizes”: “1024×1024”
},
{
“src”: “/Appimages/ios/ios-appicon-180-180.png”,
“sizes”: “180×180”
},
{
“src”: “/Appimages/ios/ios-appicon-152-152.png”,
“sizes”: “152×152”
},
{
“src”: “/Appimages/ios/ios-appicon-120-120.png”,
“sizes”: “120×120”
},
{
“src”: “/Appimages/ios/ios-appicon-76-76.png”,
“sizes”: “76×76”
},
{
“src”: “/Appimages/ios/ios-launchimage-750-1334.png”,
“sizes”: “750×1334”
},
{
“src”: “/Appimages/ios/ios-launchimage-1334-750.png”,
“sizes”: “1334×750”
},
{
“src”: “/Appimages/ios/ios-launchimage-1242-2208.png”,
“sizes”: “1242×2208”
},
{
“src”: “/Appimages/ios/ios-launchimage-2208-1242.png”,
“sizes”: “2208×1242”
},
{
“src”: “/Appimages/ios/ios-launchimage-640-960.png”,
“sizes”: “640×960”
},
{
“src”: “/Appimages/ios/ios-launchimage-640-1136.png”,
“sizes”: “640×1136”
},
{
“src”: “/Appimages/ios/ios-launchimage-1536-2048.png”,
“sizes”: “1536×2048”
},
{
“src”: “/Appimages/ios/ios-launchimage-2048-1536.png”,
“sizes”: “2048×1536”
},
{
“src”: “/Appimages/ios/ios-launchimage-768-1024.png”,
“sizes”: “768×1024”
},
{
“src”: “/Appimages/ios/ios-launchimage-1024-768.png”,
“sizes”: “1024×768”
},
{
“src”: “/Appimages/chrome/chrome-extensionmanagementpage-48-48.png”,
“sizes”: “48×48”
},
{
“src”: “/Appimages/chrome/chrome-favicon-16-16.png”,
“sizes”: “16×16”
},
{
“src”: “/Appimages/chrome/chrome-installprocess-128-128.png”,
“sizes”: “128×128”
},
{
“src”: “/Appimages/firefox/firefox-marketplace-512-512.png”,
“sizes”: “512×512”
},
{
“src”: “/Appimages/firefox/firefox-marketplace-128-128.png”,
“sizes”: “128×128”
},
{
“src”: “/Appimages/firefox/firefox-general-256-256.png”,
“sizes”: “256×256”
},
{
“src”: “/Appimages/firefox/firefox-general-128-128.png”,
“sizes”: “128×128”
},
{
“src”: “/Appimages/firefox/firefox-general-90-90.png”,
“sizes”: “90×90”
},
{
“src”: “/Appimages/firefox/firefox-general-64-64.png”,
“sizes”: “64×64”
},
{
“src”: “/Appimages/firefox/firefox-general-48-48.png”,
“sizes”: “48×48”
},
{
“src”: “/Appimages/firefox/firefox-general-32-32.png”,
“sizes”: “32×32”
},
{
“src”: “/Appimages/firefox/firefox-general-16-16.png”,
“sizes”: “16×16”
}
]
}
14. Now open header.php in your child theme and add the following right above the link for icons.json
<link rel=”manifest” href=”/manifest.json”>
15. Upload the edited header.php to the child theme directory and test again.
Next, we will be creating Service Workers for both non Windows platforms and Windows 10. We’ll tackle the non Windows platforms first.
Create the Service Worker
1. Go to https://pwabuilder.com and enter the URL for your site and then select Get Started
2. The manifest should display in a few minutes and if you’ve followed the instructions above, it will show no warnings or suggestions
3. Select Next Step
4. I used the second option, Offline copy of pages (you will see the code change in the right hand frame).
5. You can copy that code to a text editor for reference.
6. Select Next Step
7. Select Download and wait while the package builds and download it and save it. It will show the shortname.zip.
8. Copy the following code into the header.php of your child theme, right below the meta name=”viewport”… entry. Upload the edited file and test your site.
<!—-PWA stuff—>
<script type=”text/javascript”>
if (navigator.serviceWorker.controller) {
console.log(‘[PWA Builder] active service worker found, no need to register’)
} else {
//Register the ServiceWorker
navigator.serviceWorker.register(‘pwabuilder-sw.js’, {
scope: ‘./’
}).then(function(reg) {
console.log(‘Service worker has been registered for scope:’+ reg.scope);
});
}//This is the “Offline copy of pages” service worker
//Install stage sets up the index page (home page) in the cahche and opens a new cache
self.addEventListener(‘install’, function(event) {
var indexPage = new Request(‘index.html’);
event.waitUntil(
fetch(indexPage).then(function(response) {
return caches.open(‘pwabuilder-offline’).then(function(cache) {
console.log(‘[PWA Builder] Cached index page during Install’+ response.url);
return cache.put(indexPage, response);
});
}));
});//If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener(‘fetch’, function(event) {
var updateCache = function(request){
return caches.open(‘pwabuilder-offline’).then(function (cache) {
return fetch(request).then(function (response) {
console.log(‘[PWA Builder] add page to offline’+response.url)
return cache.put(request, response);
});
});
};event.waitUntil(updateCache(event.request));
event.respondWith(
fetch(event.request).catch(function(error) {
console.log( ‘[PWA Builder] Network request Failed. Serving content from cache: ‘ + error );//Check to see if you have it in the cache
//Return response
//If not in the cache, then return error page
return caches.open(‘pwabuilder-offline’).then(function (cache) {
return cache.match(event.request).then(function (matching) {
var report = !matching || matching.status == 404?Promise.reject(‘no-match’): matching;
return report
});
});
})
);
})
</script>
<!—End PWA stuff—->
9. From the extracted files, navigate to the ServiceWorker1 folder and upload both .js files to the root of your site. Test your site again, of course.
To test your PWA enabled site for non-Windows platforms, open your site in Google Chrome and navigate to More Tools, Developer Tools and then perform an Audit. For purposes of testing your PWA, deselect everything except Progressive Web App (or you can run all the tests). Lighthouse will run on the site. If issues are found, there should be information to help you address them.
Now we are ready to build a PWA for Windows 10.
Building a PWA for Windows 10
The pwabuilder.com site has the framework for build an appx to submit to the Store, but it is not fully functional. The appx generated contains generic store icons, etc. that you will need to be replace so that your app identity and images are consistent. While you can rename the appx suffix to zip and them look inside folders and even extract and replace pngs, etc., if you just re-zip, it will no longer be a valid appx file. You will need the Advanced Installer program as I mentioned at the beginning of this article.
Here are the steps:
1. You’ll need a dev center account if you don’t already have one. Go to https://developer.microsoft.com/en-us/dashboard/windows/overview and create a new App. Be sure to use the exact names you created in manifest.json for the app name and short name. You’ll need to go to App Management, Manage app names to add the short name.
2. Go to the App management, App identity tab. Stay on this page while you open a new browser window at pwabuilder.com and enter your URL again. Immediately go to Next step. Again, change the service worker function to Offline copy of pages. Go to Next Step.
3. On the Windows side of the page, select download and save the zipfile.
4. Extract the zipfile. Navigate to projects\PWA\Store packages\windows10 and right click test_install.ps1 (your computer needs to be configured for developer mode) and then “run with powershell”. Select Yes if prompted. The app will install.
5. You will find the app on your Start menu. Note the generic PWA icon. We will replace this in a later step. You can now take screen shots for the Windows Store. You can uninstall the app after you grab screen shots for the Store.
6. Next, generate the APPX file on the pwabuilder.com site (if you closed the site, be sure to change the setting for the service worker as in #2 above). Enter the information from https://developer.microsoft.com/en-us/dashboard/apps/xxxxxxxxxxxx/identity where the x’s are your apps’ designation and specify a version number. You need to use a version number ending in 0, so 1.0.0.0 or 1.1.0.0, etc. will work. Select Submit and download the app package. The Submit spinner keeps spinning (this is a bug) so you can ignore and close the page. Save the file that downloads.
7. Extract the yourappname.zip file. Be sure you know where the windows10 app image folder is from the beginning of this article in step 8 as you will need some of these images to replace the generic images.
8. In the extracted zip file hierarchy, navigate to \projects\PWA\Store packages\windows10\package and find the windows.appx file.
9. Open Advanced Installer. Select Windows Store and Mobile. Browse to the file and folder locations and import. Here’s a screen capture to assist you in specifying the correct folders
10. Under package information, note the generic PWA icon. Select change image and select the file with the same name from windows10 app image folder shown from the beginning of this article in step 8
11. Still within Advanced Installer, navigate to Package Definition/Files and Folders and then to the images folder. Right click each of these three files and select properties. Select … and Source Path and again navigate to the folder above.
12. Check Visual Assets and specify the correct short name if not present
13. Save the project.
14. In Advanced Installer, select the Home button, then Build. Then select Build in the dropdown.
15. A file will be creates with appname.appx. Copy this to windows.appx. This copy named windows.appx has all the correct images and information and can be submitted to the Store.
Finish your submission to the store, drag the windows.appx to the packages section and cross your fingers!