PWA / HomeScreen install seems to open inapp browser when navigating
Answered
Mallow bee posted this in #help-forum
Mallow beeOP
Hello!
Having issues with Next 13! When I install my app on my iphone (Add to Home Screen) and navigate to a new page, it seems to open in a 'inapp browser'. Using the new app router stuff! Anyone have any idea on how to fix this? Was able to debug and find that it does it after navigation.
Having issues with Next 13! When I install my app on my iphone (Add to Home Screen) and navigate to a new page, it seems to open in a 'inapp browser'. Using the new app router stuff! Anyone have any idea on how to fix this? Was able to debug and find that it does it after navigation.
6 Replies
@Mallow bee Hello!
Having issues with Next 13! When I install my app on my iphone (Add to Home Screen) and navigate to a new page, it seems to open in a 'inapp browser'. Using the new app router stuff! Anyone have any idea on how to fix this? Was able to debug and find that it does it after navigation.
Needs more information. what pwa plugin are you using. What is your pwa settings. what specific version of next are you on. etc
Mallow beeOP
Hello!
Installed this only for testing -> https://github.com/ducanhgh/next-pwa/ It's still in there as just the default install options
Nextjs.config:
Versions:
Installed this only for testing -> https://github.com/ducanhgh/next-pwa/ It's still in there as just the default install options
Nextjs.config:
/** @type {import('next').NextConfig} */
const withPWA = require('@ducanh2912/next-pwa').default({
dest: 'public',
});
const path = require('path');
const nextConfig = {
reactStrictMode: false,
output: 'standalone',
env: {
API_URL: process.env.API_URL,
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
};
module.exports = withPWA(nextConfig);Versions:
"next": "13.4.17",
"react": "18.2.0",@Mallow bee Hello!
Installed this only for testing -> https://github.com/ducanhgh/next-pwa/ It's still in there as just the default install options
Nextjs.config:
/** @type {import('next').NextConfig} */
const withPWA = require('@ducanh2912/next-pwa').default({
dest: 'public',
});
const path = require('path');
const nextConfig = {
reactStrictMode: false,
output: 'standalone',
env: {
API_URL: process.env.API_URL,
},
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
};
module.exports = withPWA(nextConfig);
Versions:
"next": "13.4.17",
"react": "18.2.0",
yeah there is quite a bit you need to do to make a pwa work. it doesnt just magically work with the plugin as base. id suggest reading through all of the options and tweaking as needed for your app
Mallow beeOP
Noted, but this is a rewrite of the same app from 11.1 to 13. The 11.1 version had no PWA options, PWA may be the wrong terminology. Issue being more of how the app will open full screen (image 1) but once navigating, it adds the browser bar. The prior 11 version did not do that
@Mallow bee Noted, but this is a rewrite of the same app from 11.1 to 13. The 11.1 version had no PWA options, PWA may be the wrong terminology. Issue being more of how the app will open full screen (image 1) but once navigating, it adds the browser bar. The prior 11 version did not do that
i understand. next 13 handles everything completely differently from 11, and as such there will be lots of changes
Mallow beeOP
Figured it out, wasn’t loading the manifest lol
Answer